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

Question

[Дмитрий]

https://jsfiddle.net/7ybpv6oj/3/
Наткнулся на такой пример меню, человек при этом использовал ещё и jquery, попробовал сам на чистом css, и вышло не очень, субменю появляется, но при наведении на него тут же исчезает, как можно исправить положение?)

Comments

[Даниил Попов]

У вас там с форматированием жуть какая-то. Ничего не разобрать. Нужно делать вот так : https://jsfiddle.net/groog/7ybpv6oj/11/

А по поводу вашей проблемы: добавьте тот же ховер эффект на само сабменю

Answer 1

[Alams Stoyne]

Вот так:

<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;
}

Answer 2

[Vadim]

Переделал заново:
https://jsfiddle.net/7ybpv6oj/23/

Answer 3

[Дмитрий]

Пример