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

最新推荐文章于 2024-08-21 09:31:30 发布

inuuu

最新推荐文章于 2024-08-21 09:31:30 发布

阅读量6.1k

点赞数 5

分类专栏：网页制作文章标签：练习

本文链接：https://blog.csdn.net/inuuu/article/details/99680016

版权

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

摘要由CSDN通过智能技术生成

静态网页制作导航栏

一.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>