CSS导航子菜单 [英] CSS navigation sub menu

问题描述

我的CSS代码不允许子导航保持打开，允许用户能够选择一个选项。我失踪了什么？我相信它是与最后的CSS风格有关。因为它现在它显示，当你鼠标悬停。

请帮助别人：

HTML

 < div id =navigation_bar> 
< ul> 
< li id =>< a href =>首页< / font>< / a>< / li& 
< li>< a href =Beauty_treatments.html>美容护理< / a> 
< ul> 
< li>< a href =>修指甲&修脚< / a>< / li> 
< li>< a href =>凝胶修指甲&修脚< / a>< / li> 
< li>< a href =>打蜡< / a>< / li> 
< li>< a href =>面部护理< / a>< / li> 
< li>< a href =>化妆< / a>< / li> 
< li>< a href =>眼部护理< / 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; 
} 
  

解决方案

您的错误：

CSS：

 code> #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; 
} 
  

My CSS code is not allowing the sub nav to stay open allowing the user to be able to select an option. What am i missing? I believe it is something to do with the last CSS style. As it is now it shows when you mouse over. As soon as you start to move your mouse down to select an option it disappears.

Please could someone help:

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;
}

解决方案

Simple bug

Your error:

CSS:

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

What it should be:

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

这篇关于CSS导航子菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！