Question

子菜单显示不正确请帮助我我希望它在CSS和HTML中子菜单应该像应该显示的列表一个接一个，但它在同一行中一个接一个地显示在主菜单上悬停后，应显示子菜单

    <style>
        #navbar {
            position: absolute;
            top: 0;
            left: 0;
            margin: 0;
            padding:0;}
        #navbar li 
        {
            list-style: none;
            float: left; 
        }
        #navbar li a {
            display: block;
            padding: 3px 8px;
            text-transform: uppercase;
            text-decoration: none; 
            color: #999;
            font-weight: bold; }
        #navbar li a:hover {
            color: #000; }
            #navbar li ul {
            display: none;  }
        #navbar li:hover ul, #navbar li.hover ul {
            position: absolute;
            display:list-item;
            left: 0;
            width: 100%;
            margin: 0;
            padding: 0; }
        </style>
        </head>
        <body>

        <ul id="navbar">
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a>
          <ul>
          <li><a href="#">Subitem One</a></li>
                <li><a href="#">Second Subitem</a></li>
                <li><a href="#">thrid subitem</a></li>
        </ul>
            </li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Products</a></li>
          <li><a href="#">Contact</a></li>
        </ul>

Answer 1

的 Live demo 的

HI现在习惯了这个css并创建了下拉 navi 纯css

<强>的CSS

#navbar{ background:#0082c8; position:relative; margin-top:15px; } #navbar > li{ float:left; margin:0 10px; position:relative; padding:14px 0; } #navbar li a, .subnavi li a{ color:white; text-decoration:none; display:inline-block; line-height:29px; padding:0 13px; font-size:16px; font-family:arial; text-shadow: 0px 2px 2px #034e9f; filter: dropshadow(color=#034e9f, offx=0, offy=2); } #navbar > li:hover > a, li:hover > a , #navbar li a.active{ background:#055c9f; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: inset 0px 3px 3px 0px #042960; -moz-box-shadow: inset 0px 3px 3px 0px #042960; box-shadow: inset 0px 3px 3px 0px #042960; border:1px solid #009ada; color:#f7cf00; line-height:27px; padding:0 12px; } .subnavi{ position:absolute; display:none; top:51px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0px 0px 3px 1px #979395; -moz-box-shadow: 0px 0px 3px 1px #979395; box-shadow: 0px 0px 3px 1px #979395; background:#0082c8; border:1px solid #005890; padding:10px 0; white-space:nowrap; } #navbar li:hover .subnavi{ display:block; } #navbar .subnavi li{ margin:0; } #navbar .subnavi li a{ display:block; font-size:13px; padding:0 15px; border-radius:0; line-height:27px; } #navbar .subnavi li a:hover{ padding:0 15px; border-radius:0; border-left:0; border-right:0; line-height:25px; } #navbar:after{ content:''; clear:both; display:block; overflow:hidden; }

<强> HTML

<ul id="navbar"> <li><a href="" class="active">About</a></li> <li><a href="">Demo</a> <ul class="subnavi"> <li><a href="">Demo</a></li> <li><a href="">Demo</a></li> <li><a href="">Demo</a></li> <li><a href="">Demo</a></li> <li><a href="">Demo</a></li> </ul> </li> <li><a href="">Demo</a></li> </ul>

的 Live demo 的

Answer 2

在你的css中添加这个

#navbar li 
{
list-style: none;
float: left; 
position:relative;
}

这里是jsFiddle file

Answer 3

为子菜单添加此样式：

#navbar li ul li
{
    float: none; 
}

下拉导航栏

3 个答案: