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

Html 在第二级ul li悬停时显示第三级ul li,html,css,Html,Css,我对下拉菜单样式有问题 当我将鼠标悬停在第三级时,第二级字体颜色将更改为其颜色 我想让它保持白色(如悬停)当第三级是悬停 我怎样才能做到 我的风格: 菜单 { 字体大小:20px; 显示:内联; 最小高度:45px; 溢出:自动; } ul#菜单li { 浮动:左; 列表样式:无; 左侧填充:20px; 背景色:#ff6a00; 边框底部:2个实心#181818; 边框顶部:2个实心#303030; 最小宽度:160px; 显示:块; 位置:相对位置; 最小高度:45px; } 菜单li:悬

我对下拉菜单样式有问题

当我将鼠标悬停在第三级时,第二级字体颜色将更改为其颜色

我想让它保持白色(如悬停)当第三级是悬停

我怎样才能做到

我的风格:


菜单
{
字体大小:20px;
显示:内联;
最小高度:45px;
溢出:自动;
}
ul#菜单li
{
浮动:左;
列表样式:无;
左侧填充:20px;
背景色:#ff6a00;
边框底部:2个实心#181818;
边框顶部:2个实心#303030;
最小宽度:160px;
显示:块;
位置:相对位置;
最小高度:45px;
}
菜单li:悬停
{
背景色:#808080;
过滤器:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c',endColorstr='#1b1b1b1b');
-ms过滤器:“progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c',endColorstr='#1b1b1b1b')”;
边框底部:2个实心#2222222;
边框顶部:2个实心#1B1B1B;
}
菜单a
{
文字装饰:无;
填充:0px;
左边框:3倍实心rgba(0,0,0,0);
颜色:白色;
显示:块;
字体系列:“Lucida控制台”;
字号:18px;
线高:45px;
填充:0 10px;
文字装饰:无;
文本转换:大写;
文本对齐:左对齐;
}
菜单李a:悬停
{
边界半径:5px0;
左边框:3px实心#C4302B;
颜色:#C4302B;
}
菜单li:悬停
{
背景色:#DA251D;
}
菜单
{
显示:无;
}
ul#菜单li:悬停ul
{
显示:块;
}
菜单,菜单,菜单,菜单
{
浮动:无;
}
#菜单.子菜单li:将鼠标悬停在a上
{
左边框:3倍实心#4545;
边界半径:0;
颜色:#ffffff;
}
#菜单>li:悬停子菜单,.菜单>li:焦点子菜单
{
最大高度:2000px;
z指数:10;
}
#菜单>李:悬停。子菜单李,.菜单>李:焦点。子菜单李
{
不透明度:1;
-webkit转换:无;
-moz变换:无;
-ms转换:无;
-o变换:无;
转化:无;
}
页面标题
  • 桑吉特 如果我没弄错的话:

    HTML:

    JQuery:

    $(document).ready(function(){
        $('.newlevel li').hover(function(){
            if ($(this).children('ul').length > 0){
                $(this).addClass('current');  
            }
        },function(){
                $(this).removeClass('current');    
        });
    });
    

    jshiddle:

    真的非常感谢你兄弟…………它起作用了。。。在第六天到今天之前,我试图找出答案,但我拿不到我的answare,但你做到了
    .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;
    }
    
    $(document).ready(function(){
        $('.newlevel li').hover(function(){
            if ($(this).children('ul').length > 0){
                $(this).addClass('current');  
            }
        },function(){
                $(this).removeClass('current');    
        });
    });