Навигация по CSS Меню не сохраняется на втором уровне

Привет Я пытаюсь настроить простое меню боковой панели на странице.Навигация по CSS Меню не сохраняется на втором уровне

Мой CSS выглядит следующим образом

#nav { 
float:left; 
font-size: 9pt; 
width:2in; 
margin: 0px; 
padding: 0px; 
color: white; 
} 

#nav :link{color:white ;text-decoration:none;} 
#nav :visited{color:white ;text-decoration:none;} 
#nav :hover{color:white ;text-decoration:none;} 
#nav :active{color:white ;text-decoration:none;} 


#nav ul{ 
background: #efefef; 
background: linear-gradient(top, #555555 0%, #aaaaaa 100%); 
background: -moz-linear-gradient(top, #555555 0%, #aaaaaa 100%); 
background: -webkit-linear-gradient(top, #555555 0%,#aaaaaa 100%); 
padding: 0 20px; 
border-radius: 10px; 
list-style: none; 
position: relative; 
display: inline-table; 
} 

#nav ul ul{ 
display: none; 
position: absolute; 
left: 100%; 
top: 0; 
text-align:left; 
} 

#nav ul li:hover{ 
background: #00008b; 
color: #fff; 
display: block; 
} 

#nav ul li:hover > ul{ 
width:85%; 
display:block; 
}

и мой HTML, как

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
<link rel='stylesheet' type="text/css" href='./main.css'> 
</head> 

<body> 

<div id='nav'> 
<ul id='topmenu'> 
    <li><a href="execsumm.html">Summary</a> </li> 
    <li><a href="current.html">Parties</a> 
     <ul> 
      <li><a href="ukprocess.html">Balearics</a></li> 
      <li><a href="usprocess.html">Americas</a></li> 
      <li><a href="approcess.html">Asia</a></li> 
     </ul> 
    </li> 
    <li><a href="proposed.html">New Proposal</a></li> 
    <li><a href="views.html">Views</a> 
     <ul> 
      <li><a href="./Interviews/mes.html">Frames</a></li> 
      <li><a href="./Interviews/bot.html">Robot</a></li> 
     </ul> 
    </li> 
    <li><a href="">Existing</a></li> 
    <li><a href="">Contacts</a></li> 
    <li><a href="">dfjd</a></li> 
</ul> 
</div> 


<div id='main'> 
content here 
</div> 
</body> 

</html>

меню отлично работает вверх к первому парения, но к тому времени, когда я пытаюсь и переместите мышь к список второго уровня исчезает. Что я делаю неправильно и как это исправить?

благодаря

источник

2013-08-04 Tahnoon Pasha

Проблема заключается в том, что вы нацелены «Ли: парить» в вашем CSS, но как только пользователь перемещает курсор вправо, вы не из li, больше не парит.

Одно из возможных решений заключается в том, чтобы дать прокладку ul zero и поместить прокладку на li.

#nav ul{ 
... 
margin:0; padding:0; 
... 
} 

#nav ul > li { 
    margin:0; padding:0 20px; 
}

Таким образом, пользователь не может выйти из ли, прежде чем входить в подменю. JSFiddle

Теперь есть разница в отображении: выделенная ли теперь занимает всю ширину родителя. Это приемлемо?

Некоторые случайные замечания: вы не должны использовать inline-table, если вы не превратите вещи в настоящую таблицу, указав внутренние элементы table-cell и так далее. В этом случае inline-block работает так же хорошо. И у вас есть цвет фона #EFEFEF, который очень светло-серый, почти белый. Таким образом, меню не читаются в браузерах, которые не поддерживают градиенты. Я подозреваю, что вы хотели что-то в диапазоне градиента, например, #7F7F7F.

источник

2013-08-04 06:48:18

спасибо @MrLister, который отлично работал. Цените свои дополнительные мысли. Я включил их в свой код. Моя первая попытка на что-нибудь css, так что это чрезвычайно полезно. –

Навигация по CSS Меню не сохраняется на втором уровне

ответ

Смежные вопросы