-1

子菜单显示不正确请帮帮我，我希望它在 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>
4

3 回答 3

1

现场演示

HI 现在习惯了这个 css 并在纯 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>

现场演示

于 2012-11-07T11:41:54.447 回答
1

在你的CSS中添加这个

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

这是jsFiddle 文件

于 2012-11-07T11:50:47.263 回答
0

为您的子菜单添加此样式：

#navbar li ul li
{
    float: none; 
}
于 2012-11-07T11:41:47.603 回答