drop down исчезает при зависании

Question

Я создаю сайт с выпадающим меню, но когда я наводил на него курсор, он исчезает. Я использую margin-top, который вызывает эту проблему, но мне нужно следовать определенному дизайну.

Любая идея, как я могу решить эту проблему

Вот это сайт http://techyhesh.com/Dogs/

вы увидите вопрос, когда вы пытаетесь навести курсор мыши на О ссылке и нажмите на вложенной ссылке

HTML

<nav role="navigation" id="navmenu"> 
    <div class="menu"> 
     <ul> 
      <li class="page_item page-item-6 current_page_item"><a href="">Home</a> 
      </li> 
      <li class="page_item page-item-2 page_item_has_children"><a href="">About</a> 
       <ul class="children"> 
        <li class="page_item page-item-23"><a href="">Everything you need to know</a> 
        </li> 
        <li class="page_item page-item-25"><a href="">Checklist</a> 
        </li> 
       </ul> 
      </li> 
      <li class="page_item page-item-8"><a href="">Your dog</a> 
      </li> 
      <li class="page_item page-item-10"><a href="">How can you help your dog</a> 
      </li> 
     </ul> 
    </div> 
</nav> 

CSS

#navmenu ul ul { 
    background: none repeat scroll 0 0 #f4d218; 
    margin-top: 1.4em; 
    padding: 0 1em 1em; 
    position: absolute; 
    width: 145px; 
    display: none; 
    z-index: 1; 
} 
#navmenu ul li:hover > ul { 
    display: block; 
} 
#navmenu ul li { 
    float: left; 
} 
#navmenu ul ul li:first-child { 
    border-top: none; 
} 
#navmenu ul ul li { 
    border-top: 2px dotted #b58e02; 
    margin-top: 1.4em; 
    padding: 10px 0 0; 
    width: 100%; 
} 
#navmenu ul { 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
    list-style-image: none; 
} 
#navmenu li { 
    display: inline; 
    vertical-align: middle; 
} 
#navmenu ul li a { 
    color: #706f6f; 
    padding: 11px 42px; 
    text-decoration: none; 
} 
#navmenu { 
    border-bottom: 2px dotted #c0d193; 
    border-top: 2px dotted #c0d193; 
    overflow: hidden; 
    padding-bottom: 8px; 
    padding-top: 15px; 
} 
#navmenu ul ul li a { 
    color: #ab8602; 
    margin: 0; 
    padding: 0; 
} 

Answer 1

добавить

#navmenu li { 
    display: inline; 
    vertical-align: middle; 
    padding: 20px 0; /*add this*/ 
} 
#navmenu ul li { 
    float: left; 
    position: relative; 
} 
#navmenu ul ul { 
    background: none repeat scroll 0 0 #f4d218; 
    top: 100%; /*add this and remove margin-top: 1.4em;*/ 
    padding: 0 1em 1em; 
    position: absolute; 
    width: 145px; 
    display: none; 
    z-index: 1; 
} 

затем удалить

#navmenu { 
    border-bottom: 2px dotted #c0d193; 
    border-top: 2px dotted #c0d193; 
    /* overflow: hidden; */ 
} 

DEMO

DEMO FULL

Answer 2

Причина, по которой вы пытаетесь удалить :hover по списку ul, состоит в том, что у вас есть верхняя граница 1.5em на #navmenu ul ul. Избавьтесь от этого кода, и он будет работать отлично. Но для того чтобы достигнуть эффекта, который вы ищете, чтобы эти chnages вашему CSS:

#navmenu ul li a{ 
    padding: 22px 42px 
} 

#navmenu ul ul{ 
    margin-top: 1.1em; 
} 

Answer 3

Ваш абсолютный ДИВ слишком далеко от своего родительского элемента. Разрыв между ними приводит к тому, что ваш выпадающий список не работает.

Вам нужно либо увеличить высоту родительской ссылки, чтобы она была ближе к div, либо уменьшила верхнюю границу div. (если увеличить высоту родителя вы должны уменьшить маржу-верхней части DIV а)

#navmenu ul ul { 
    margin-top: .5em; 
}