Здравствуйте, создал выпадающее меню трех уровней. Но загвостка возникла в следующем:
при наведении на дочернии меню (второго и третьего уровня, а особенно актуально – третьего) они не убираются, когда с них уходишь. В результате – когда выпадается 2 уровень, а за ним 3-й уровень – остальные меню второго уровня становятся не активными.
Задача в том, а) чтобы менюшка убиралась, когда с него уходишь б) при наведении на меню третьего уровня – второй уровень оставался активным
Привожу код (сам голову сломал уже):
#nav {
background: #191919 url(images/nav.gif);
width: 998px;
height: 40px;
margin:0px;
padding: 0px;
color: #99a7b1;
float:left;
border-top: 1px solid #191919;
z-index: 1000;
}
#nav ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#nav ul li {
list-style-type: none;
text-transform: uppercase;
font-size: 12px;
font-weight: bold;
font-family: Arial, Verdana;
float: left;
}
#nav ul li a {
color: #191919;
display: block;
padding: 9px 15px 10px 15px;
background-color: #989792;
text-decoration: none;
border-right: 1px solid #191919;
border-left: 1px solid #989792;
border-bottom: 1px solid #191919;
}
#nav ul li a:hover {
background-color: #FF9900;
text-decoration: none;
border-right: 1px solid #191919;
border-bottom: 1px solid #ffffff;
}
#nav .current_page_item a, #nav .current_page_item a:visited {
background-color: #ffffff;
border-bottom: 1px solid #ffffff;
border-left: 0px;
}
#nav .current_page_item ul li a, #nav .current_page_item ul li a:visited {
background-color: #989792; /* Цвет фона 2 и 3 уровня меню при активности 1-го уровня*/
border-bottom: 1px solid #ffffff;
border-left: 0px;
color:#000000;
}
#nav .current_page_item a:hover {
background-color: #989792;
}
#nav .current_page_item ul li a:hover {
background-color: #FF9900; /* Цвет фона при нажатии 2 и 3 уровня меню*/
}
#nav ul li ul li {
width:230px;
list-style-type: none;
text-transform: uppercase;
font-size: 12px;
font-weight: bold;
font-family: Arial, Verdana;
float: left;
}
#nav ul li ul li ul li {
width:auto; /* отвечает за растяжку фона под текстом в третьем уровне меню*/
list-style-type: none;
text-transform: uppercase;
font-size: 9px;
letter-spacing:1px;
font-weight: bold;
font-family: Tahoma, Arial, Verdana;
margin-top: -20px;
margin-left:180px;
margin-bottom: 20px;
padding: 0px;
}
#nav ul li ul li a {
color: #191919;
display: block;
padding: 3px 15px 3px 15px;
text-decoration: none;
border-right: 1px solid #191919;
border-left: 1px solid #989792;
border-bottom: 1px solid #191919;
}
#nav li ul {
position: absolute;
display: none;
width:220px;
}
#nav li:hover ul, li.over ul {
display:block;
z-index:1000;
}
#nav li:hover li ul {
display:none;
}
#nav li:hover li:hover ul {
display: block;
}
Выпадающее меню на CSS