在ul li的第二级悬停时显示ul li的第三级

Question

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? 告诉我在主类别上显示第三个菜单悬停的简单方法吗？

Answer 1

if i got you right: 如果我说对了：

HTML: 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: 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: 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/ jsfiddle： http : //jsfiddle.net/esf90kz5/3/

在ul li的第二级悬停时显示ul li的第三级

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-11-24 11:40:03

在ul li的第二级悬停时显示ul li的第三级

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-11-24 11:40:03

解决方案1
1 已采纳 2014-11-24 11:40:03