Fatal编程技术网
  • html/
  • Html 下拉式导航栏

Html 下拉式导航栏

html css

Html 下拉式导航栏,html,css,Html,Css,子菜单未正确显示请帮助我 我希望它在CSS和HTML 子菜单应该像一个列表，它应该被显示 一个接一个，但它在同一行中一个接一个地显示 在主菜单上悬停后，应显示子菜单 <style> #navbar { position: absolute; top: 0; left: 0; margin: 0; padding:0;} #na

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


#导航栏{
位置：绝对位置；
排名：0；
左：0；
保证金：0；
填充：0；}
#李国宝
{
列表样式：无；
浮动：左；
}
#纳瓦巴利阿{
显示：块；
填充：3px8px；
文本转换：大写；
文字装饰：无；
颜色：#999；
字体大小：粗体；}
#导航栏李a：悬停{
颜色：#000；}
#纳瓦尔{
显示：无；}
#navbar li:悬停ul，#navbar li.悬停ul{
位置：绝对位置；
显示：列表项；
左：0；
宽度：100%；
保证金：0；
填充：0；}

    

  • 

  • 

      

    • 

    • 

    • 

    

    • 

  • 

  • 

  •
为子菜单添加此样式：

#navbar li ul li
{
    float: none; 
}

HI现在已经习惯了这个css，并在纯css中创建了下拉菜单navi

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>

    

  • 

  • 

      

    • 

    • 

    • 

    • 

    • 

    

    • 

  •

将此添加到css中

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

感谢Olaf Dietsche的工作，但我的“关于我们”子菜单在“关于我们”上悬停后显示在主页下方，位置不正确：(