На моем веб-сайте есть раскрывающееся меню. Он отображается нормально, пока вы не наведете верх. Подменю появится, но прежде чем вы сможете щелкнуть ссылку, подменю исчезнет.
Вот HTML -
<div id="top-nav"><div id="nav">
<nav>
<ul id="menu" style="list-style-type: none;">
<li id="sub"><a href="#">Artists</a>
<ul>
<li><a href="#">Banks</a></li>
<li><a href="#">Lil Silva</a></li>
<li><a href="#">Frances and the Lights</a></li>
<li><a href="#">Jim-E Stack</a></li>
</ul>
</li>
<li><a href="#">Night</a></li>
<li><a href="#">Info</a></li>
</ul>
</nav>
</div>
</div>
И вот CSS -
#nav {
text-align:center;
list-style: none;
}
ul#menu {
background-color: #FFFFFF;
list-style: none outside none;
margin: 0 auto;
padding-bottom: 0px;
padding-top: 0px;
text-align: center;
width: 300px;
}
ul#menu:after {
content: "";
background-color: #FFFFFF;
height: 10px;
width: 100%;
display: block;
position: absolute;
left: 0;
margin-top: 20px;
}
ul#menu li {
float: left;
}
ul#menu li a {
color: #666666;
font-size: 12px;
margin: 0;
padding: 0px 35px;
text-decoration: none;
}
ul#menu li a:hover {
background-color: #ccc;
}
a.selected-page, ul#menu a.selected-page:hover {
background-color: #FFFFFF;
}
li#sub ul {
display: none;
position: absolute;
background-color: #FFFFFF;
z-index: 22222;
margin-top: 4px;
overflow: hidden;
}
li#sub ul li {
display: block;
float: none;
border-top-style: none;
border-width: 2px;
border-color: #FFFFFF;
text-align: left;
padding-top: 5px;
padding-bottom: 5px;
}
ul#menu li#sub:hover ul {
display: block;
}
ul#menu li#sub ul li:hover {
background-color: #FFFFFF;
}
Что я делаю не так? Любая помощь очень ценится!
Как сказал dalucks, удалите верхний край из вашего CSS:
li#sub ul {
margin-top:0;
}
Также уменьшите левое поле /paddings из подменю UL и/или детей LI. С оригинальными большими значениями (35 пикселей) меню можно зависнуть над большим количеством невидимого пространства.
ul#menu li ul li a {
padding-left:5px;
}
Скрипт: http://jsfiddle.net/LXwTr/
проблема заключается в следующей строке вашего CSS-кода:
li#sub ul {
...
margin-top: 4px;
...
}
Просто удалите этот крайний край, и выпадающее меню будет работать правильно.
В вашем примере есть пробел в 4 пикселя между "Художниками" -link и выпадающим меню ниже. И если ваши курсоры покидают ссылку и входят в эту "область поля", браузер интерпретирует ее как не зависающую ссылку и скрывает ее.