xeofan
@xeofan
Бомж на клаве

Как реализовать такое выпадающее меню на чистом css?

https://jsfiddle.net/7ybpv6oj/3/
Наткнулся на такой пример меню, человек при этом использовал ещё и jquery, попробовал сам на чистом css, и вышло не очень, субменю появляется, но при наведении на него тут же исчезает, как можно исправить положение?)
  • Вопрос задан
  • 254 просмотра
Решения вопроса 3
alams_stoyne
@alams_stoyne
Full Stack Developer - #PHP #CSS #JS #DB
Вот так:
<section class="mainmenu">
  <div class="menu">
      <a href="#"><h3>Меню</h3></a>
      <div class="submenu">
        <a href="#"><p>Субменю</p></a>
        <a href="#"><p>Субменю</p></a>
        <a href="#"><p>Субменю</p></a>
      </div>
  </div>  
   <div class="menu">
      <a href="#"><h3>Меню</h3></a>
      <div class="submenu">
        <a href="#"><p>Субменю</p></a>
        <a href="#"><p>Субменю</p></a>
        <a href="#"><p>Субменю</p></a>
      </div>
  </div>  
</section>

*{
    padding: 0;
    margin: 0;
}

body{
  background: white;
  padding-top: 50px;
  padding-left: 200px;
  font-family: 'Montserrat Alternates', sans-serif;
}


.mainmenu .menu .submenu{
  display: none;
}
.mainmenu .menu:hover .submenu{
  border-top: 2px solid #E5E2E2;
  background: gray;
  display: block;
}
.mainmenu .menu:hover .submenu a:hover{
    color: #FFF
}
.menu a{
    text-decoration: none;
    color: #E5E2E2;
}
.mainmenu .menu{
    border: 2px solid #B18552;
    width: 300px;
    overflow: hidden;
    text-align: center;
    background: blue;
}

.mainmenu div:first-child{
    border-radius: 30px 30px 0 0;

}
.mainmenu div:last-child{
    border-radius: 0 0 30px 30px;
}
.mainmenu h3{
          transition: all 4s;
    padding: 25px 0 25px 0;
    font-size: 25px;
}

.mainmenu p{
    font-size: 20px;
       padding: 25px 0 25px 0;
}
Ответ написан
Комментировать
sankooo
@sankooo
Software Engineer
Переделал заново:
https://jsfiddle.net/7ybpv6oj/23/
Ответ написан
Комментировать
@soledar10
html css3 js jquery
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
03 дек. 2024, в 12:22
8000 руб./за проект
03 дек. 2024, в 12:10
10000 руб./за проект
03 дек. 2024, в 11:59
4000 руб./за проект