html - 子菜单悬停仅部分工作

Question

这里是:

http://gyazo.com/e94edf3c9b10bc33c2d9be8ed049583e

如您所见，子菜单有效，当我将鼠标悬停在子菜单上的某个内容上时，它会创建一个灰色背景。问题是，一旦我进入“运动版”，悬停基本上会取消并关闭子菜单。它就停在那条蓝线开始的地方。

代码如下:HTML:

<div id="toprightunder">
    <ul>
        <li>
          <a href="#">Content options</a>
          <ul>
                <li><a href="#">Default Homepage</a></li>
                <li><a href="#">News Edition </a>li>
                <li><a href="#">Entertainment Edition</a></li>
                <li><a href="#">Sports Edition</a></li>
                <li><a href="#">Latino Edition</a></li>
            </ul>
        </li>
    </ul>
</div>

CSS:(有很多，因为我测试了很多)

#toprightunder {
    margin-top:18px;
    height:15px;
    position:absolute;
    width:200px;
    right:0;
}
#toprightunder a {
    text-decoration:none;
    color:rgb(100, 100, 100);
    margin-left:0;
    padding-bottom:3px;
}
#toprightunder ul {
    list-style:none;
    margin:0 auto;
    /*text-align:right;*/
    position:relative;
    display:inline-table;
    margin-left:0;
    padding-left:0;
}
#toprightunder ul li {
    display:inline;
    color:rgb(100, 100, 100);
    font-family:"arial", times, sans-serif;
    font-size:10px;
    margin-top:13px;
    text-decoration:none;
    margin-left:0;
    padding-left:0;
}
#toprightunder ul ul {
    display:none;
}
#toprightunder ul li:hover > ul {
    display:block;
}
#toprightunder ul ul {
    position: absolute;
    top: 100%;
    padding-top:2px;
    padding-bottom:7px;
    margin-right:0;
    right:0px;
    background: white;
    border: 1px solid #000;
    overflow:hidden;
    height:auto;
    margin:auto;
}
#toprightunder ul ul li {
    position:relative;
    color:rgb(100, 100, 100);
    font-size:13px;
    display:block;
    /*margin-bottom:10px;
padding-left:25px;
padding-right:4px;*/
    white-space:nowrap;
    height:auto;
    margin:auto;
}
#toprightunder ul ul li a {
    color:#fff;
    text-align:left;
    float:left;
    margin-right:0;
    position:relative;
}
#toprightunder a:hover {
    background-color:transparent;
    color:rgb(100, 100, 100);
}
#toprightunder ul li:hover > li {
    background-color:transparent;
}
#toprightunder ul ul li:hover > a {
    color:rgb(50, 50, 50);
    background:rgb(240, 240, 240);
}
#toprightunder ul ul li > a {
    color:rgb(100, 100, 100);
    padding-bottom:7px;
    padding-top:2px;
    padding-left:25px;
    width:100%;
}

#headbar a {
    text-decoration:none;
    color:white;
    padding-bottom:2px;
    padding-top:4px;
    padding-left:8px;
    padding-right:8px;
    }

#headbar ul ul {
    display:none;
    }

#headbar ul li:hover > ul {
    display:block;
    color:green;
    }

#headbar ul {
    text-decoration:none;
    list-style:none;
    margin-top:1px;
    padding:0;
    position:relative;
    }

#headbar ul li {
    display:inline;
    color: white;
    padding-bottom:2px;
    padding-top:3px;
    font-family:"arial", times, sans-serif;
    font-size:12px;
    }

#headbar ul ul {
    border-radius: 0px; 
    position: absolute; 
    top: 100%;
    padding-top:6px;
    }

#headbar ul ul li {
    float:none;
    position:relative;
    color:rgb(100,100,100);
    font-size:16px;
    }

#headbar ul ul li a {
    color:#fff;
    }

#headbar ul ul li a:hover {
    }


/*#headbar ul:after {
    content: "";
    clear:both;
    display:block;*/


#headbar a:hover {
    background-color:rgb(255,255,255);
    color:rgb(100,100,100);
    }

#headbar ul li:hover > a{
    color:rgb(50,50,50);
    background-color:transparent;
    padding-top:8px;
    }

#headbar ul ul li > a {
    color:rgb(100,100,100);
    padding-top:8px;
    }

#headbar {
    width: 100%;
    height: 20px;
    background-color: rgb(30,144,255);
    text-decoration:none;
    padding-top:129px;
    text-align: left;
    /*position:relative;*/
    }

Answer 1

将 z-index: 2; 添加到 #toprightunder 选择器，这应该可以解决您的问题。

#toprightunder {
    margin-top:18px;
    height:15px;
    position:absolute;
    width:200px;
    right:0;
    z-index: 2;
}