静态网页水平导航栏带下拉列表

最新推荐文章于 2025-11-18 13:24:14 发布

原创最新推荐文章于 2025-11-18 13:24:14 发布 · 6.3k 阅读

59 ·

CC 4.0 BY-SA版权

文章标签：

#练习

网页制作专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何使用HTML和CSS创建一个带有下拉列表的水平导航栏。通过设置浮动列表项和利用hover事件展示下拉列表，详细讲解了代码结构和实现过程。

静态网页制作导航栏

一.HTML代码的结构

想做一个水平导航栏，鼠标停留在各模块链接上时出现该模块的下拉菜单，具体如图：只有导航栏吼
一般来讲导航栏要用列表来做，水平导航栏我看到的做法是两种：
1.将列表中的a作为内联元素，即li{display:inline;}。这个做法无法控制每块的宽。
2.设置浮动列表项，即li{float:left;}，这里需要设置a{display:block;}以及各块统一的width。

那么这里我选择第二种。
下拉列表通过在li中添加一个模块来实现。该模块会在导航栏某模块hover事件发生后出现，那么就需要设置display:none与hover时display:block。
下拉列表的内容用a并设置display:block，其他格式就不提辽。

二.实现

贴一哈代码

HTML:

<body>
<div class="navigate_bar">
    <ul>
        <li class="dropdown">
                <a href="#home" class="dropdown-btn">首页</a>
                <div class="dropdown-content"></div>
        </li>
       <li class="dropdown">
               <a href="news" class="dropdown-btn">新闻</a>
               <div class="dropdown-content">
                   <a>2019.8.16</a>
                   <a>2019.8.15</a>
                   <a>2019.8.14</a>
               </div>
       </li>
        <li class="dropdown">
                <a href="#about" class="dropdown-btn">关于</a>
                <div class="dropdown-content">
                    <a>关于我们</a>
                    <a>开发团队</a>
                </div>
        </li>
        <li class="dropdown">
                <a href="#contact" class="dropdown-btn">联系</a>
                <div class="dropdown-content">
                    <a>联系我们</a>
                    <a>加入我们</a>
                </div>
        </li>
    </ul>
</div>
<script src="TEST.js"></script>
</body>

CSS

.dropdown{
    display:inline-block;
    width:120px;
    padding:0;
    margin:0;
}
li{
    float:left;
}
ul{
    margin:0;
    padding:0;
    list-style-type: none;
    overflow: hidden;
    background-color: #7db646;
}
.dropdown-btn,.dropdown-content a{
    display:block;
    text-decoration: none;
    text-align: center;
    font-weight:bold;
    padding:4px;

}
.dropdown-btn{
    color:#eafff0;
    border-right: solid #eafff0 2px;
}
.dropdown-content{
    display:none;
    position:absolute;
    background-color: #eafff0;
    min-width:120px;
}
.dropdown-content a{
    color: #6e9564;
    border-bottom:solid #6e9564 1px;
}
.dropdown:hover,.dropdown-btn:hover{
    background-color: #46973f;
}
.dropdown:hover .dropdown-content{
    display:block;
}
.dropdown-content a:hover{
    background-color: #aaea9b;
}

好辽，大概就是这样。
有什么错误欢迎指出，大家一起交流交流哈