I have a problem with the drop down menu style..
when I mouse hover the third level, the second level font color is changed to its color..
I want to make it keep white (as hover) when third level is hover..
How can I make it?
My style:
<!DOCTYPE html> <html> <head> <style> ul#menu { font-size: 20px; display: inline; min-height: 45px; overflow: auto; } ul#menu li { float: left; list-style: none; padding-left: 20px; background-color: #ff6a00; border-bottom: 2px solid #181818; border-top: 2px solid #303030; min-width: 160px; display: block; position: relative; min-height: 45px; } ul#menu li:hover { background-color: #808080; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b')"; border-bottom: 2px solid #222222; border-top: 2px solid #1B1B1B; } ul#menu li a { text-decoration: none; padding: 0px; border-left: 3px solid rgba(0, 0, 0, 0); color: white; display: block; font-family: 'Lucida Console'; font-size: 18px; line-height: 45px; padding: 0 10px; text-decoration: none; text-transform: uppercase; text-align: left; } ul#menu li a:hover { border-radius: 5px 0 0 0; border-left: 3px solid #C4302B; color: #C4302B; } ul#menu li:hover { background-color: #DA251D; } ul#menu li ul { display: none; } ul#menu li:hover ul { display: block; } ul#menu li ul li { float: none; } #menu .submenu li:hover a { border-left: 3px solid #454545; border-radius: 0; color: #ffffff; } #menu > li:hover .submenu, .menu > li:focus .submenu { max-height: 2000px; z-index: 10; } #menu > li:hover .submenu li, .menu > li:focus .submenu li { opacity: 1; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } </style> <title>Page Title</title> </head> <body> <div class="ThirdMenu"> <ul id="menu" class="menu"> <li>sangeet <ul class="submenu" id="submenu" <li>sdfsadf <ul class="thirdmenu" id="thirdmenu"><li>sdfsd</li></ul> </li> <li></li> <li></li> <li></li> </ul> </li> </ul> </div> </div> </body> </html>
Tell me simple way to display third menu hover on main category?
if i got you right:
HTML:
<div class="menu_wrap">
<ul class="newlevel level0">
<li><a href="#">level0, link 1</a></li>
<li>
<a href="#">level0, link 2</a>
<ul class="newlevel level1">
<li><a href="#">level1, link 1</a></li>
<li><a href="#">level1, link 2</a></li>
<li>
<a href="#">level1, link 3</a>
<ul class="newlevel level2">
<li><a href="#">level2, link 1</a></li>
<li><a href="#">level2, link 2</a></li>
<li><a href="#">level2, link 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">level0, link 3</a></li>
</ul>
</div>
CSS:
.menu_wrap
{
width: 300px;
}
ul
{
padding: 0;
}
li
{
list-style: none;
}
a
{
display: block;
padding: 10px;
text-decoration: none;
background: #ff6a00;
color: #000;
border-top: 1px solid;
}
a:hover, .current > a
{
background: #DA251D;
}
.level1 a
{
padding-left: 40px;
}
.level2 a
{
padding-left: 80px;
}
.level0 ul
{
display: none;
}
.newlevel li:hover > ul
{
display: block;
}
JQuery:
$(document).ready(function(){
$('.newlevel li').hover(function(){
if ($(this).children('ul').length > 0){
$(this).addClass('current');
}
},function(){
$(this).removeClass('current');
});
});
jsfiddle: http://jsfiddle.net/esf90kz5/3/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.