0

我的 CSS 代码不允许子导航保持打开状态，允许用户选择一个选项。我错过了什么？我相信这与最后一个 CSS 样式有关。就像现在一样，当您将鼠标悬停时它会显示。一旦您开始向下移动鼠标以选择一个选项，它就会消失。

请有人帮忙：

HTML

<div id="navigation_bar">
    <ul>                        
        <li id=""><a href="">Home</font></a></li>                        
        <li><a href="Beauty_treatments.html">Beauty Treatments</a>
            <ul>
                <li><a href="">Manicure & Pedicure</a></li>
                <li><a href="">Gel Manicure & Pedicure</a></li>
                <li><a href="">Waxing</a></li>
                <li><a href="">Facials</a></li>
                <li><a href="">Make-up</a></li>
                <li><a href="">Eye Treatments</a></li>
            </ul> 
</div>

CSS

#navigation_bar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#navigation_bar ul li {
    float: left;
}
#navigation_bar ul li a {
    display: block;
    padding: 0 20px 0 20px;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #222;
    font-weight: bold;
    text-decoration: none;
    line-height: 36px;
    border: none;
}
#navigation_bar ul li a:hover {
    border: none;
    color: #ffffff;
    background-image: url(Images/mouse_over_background.gif);
    z-index: 1;                                          
}
#navigation_bar ul li ul li {
    float: none;
    z-index: 2;
}
#navigation_bar ul li ul {
    position: absolute;
    display: none;
}
#navigation_bar ul li:hover ul {
    display: block;
}
4

2 回答 2

2

简单的错误

你的错误：

CSS：

#navigation_bar ul li a:hover{
        border:none;
        color:#ffffff;
        background-image:url(Images/mouse_over_background.gif);
        z-index:1;                                          
}

它应该是什么：

#navigation_bar ul li a:hover{
        border:none;
        color:black;
        background-image:url(Images/mouse_over_background.gif);
        z-index:1;                                          
}
于 2013-05-14T22:51:47.183 回答
0

我看过 Fiddle 并更正了丢失的</li>标签。现在代码以我看不到它在小提琴中正常工作的方式工作。我已经更新了小提琴：http: //jsfiddle.net/CtPcA/1。背景图像是悬停时的紫色块，然后文本变为白色

于 2013-05-15T20:03:30.067 回答