html - 我在 css 中的子菜单没有直接显示

Question

这是css部分，在 当我点击服务时有子菜单的 html 部分，子菜单并没有完全下降到右边 2 到 3 像素

#navigation {
 background: url(../images/bg-navigation.png) no-repeat
height: 49px;
width: 960px;
margin: 0 auto;
position: relative;
z-index:1000;
top: 0;
}

#navigation ul {
display: inline-block;
list-style: none;
margin: 0;
padding: 1px 10px;}
#navigation ul li {float: left; padding:0px;}
#navigation li ul {display: none;}
#navigation ul li a {
color: #636974;
display: block;
font-size: 14px;
font-weight: bold;
line-height: 47px;
width: 154px;
border-color: transparent;
border-style: none solid;
border-width: 1px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
border-left: 1px solid #ccc;
}
#navigation ul li a:hover {background: #bebcbc;}
#navigation li:hover ul {display: block; position: absolute;}
#navigation li:hover li {float: none;}
#navigation li:hover a {background: #ffffff;}
#navigation li:hover li a:hover {background: #bebcbc;}

Answer 1

你可以这样试试——

#navigation > ul {
}

*{margin: 0;padding: 0;}
    #navigation {
 background: url(../images/bg-navigation.png) no-repeat;
height: 49px;
width: 960px;
margin: 0 auto;
position: relative;
z-index:1000;
top: 0;
}

#navigation > ul {
display: inline-block;
list-style: none;
margin: 0;
padding: 1px 10px;}
#navigation ul li {float: left; padding:0px;list-style: none;}
#navigation li ul {display: none;}
#navigation ul li a {
color: #636974;
display: block;
font-size: 14px;
font-weight: bold;
line-height: 47px;
width: 154px;
border-color: transparent;
border-style: none solid;
border-width: 1px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
border-left: 1px solid #ccc;
  }
#navigation ul li a:hover {background: #bebcbc;}
#navigation li:hover ul {display: block; position: absolute;}
#navigation li:hover li {float: none;}
#navigation li:hover a {background: #ffffff;}
#navigation li:hover li a:hover {background: #bebcbc;}

<div id="navigation">
    <ul>
        <li><a href="">nav</a>
        <ul>
            <li><a href="">nav</a></li>
            <li><a href="">nav</a></li>
            <li><a href="">nav</a></li>
        </ul>
        </li>
        <li><a href="">nav</a></li>
        <li><a href="">nav</a></li>
        <li><a href="">nav</a></li>
    </ul>
</div>

希望对你有帮助。