HTML实例 实现导航下拉菜单

发布时间:
2023-07-30 10:09
阅读量:
92
HTML实例 实现导航下拉菜单

html部分:

<ul>
    <li><a href="#home" class="active">主页</a></li>
    <li><a href="#news">新闻</a></li>
    <li>
        <div class="dropdown"> <a href="#" class="dropbtn">下拉菜单</a>
            <div class="dropdown-content"> <a href="#">链接 1</a> <a href="#">链接 2</a> <a href="#">链接 3</a> </div>
        </div>
    </li>
    <li><a href="#about">关于</a></li>
</ul>
<h3>导航栏上的下拉菜单</h3>
<p>鼠标移动到 "下拉菜单" 链接先显示下拉菜单。</p>

css部分:

ul {
     list-style-type: none;
     margin: 0;
     padding: 0;
     background-color: #999;
     overflow: hidden;
     /*注意: overflow:hidden 添加到 ul 元素,以防止 li 元素列表的外出(当li{float:left}时)。*/
 }

 li {
     float: left;
 }

 li a {
     color: white;
     padding: 14px 16px;
     display: inline-block;
     text-decoration: none;
 }

 li>a.active {
     background-color: green;
 }

 li>a:hover:not(a.active),.dropbtn:hover {
     background-color: #555;
 }

 .dropdown-content {
     display: none;
     position: absolute;
     /* 默认相对于<html>进行绝对定位 */
     background-color: #f9f9f9;
     min-width: 100px;
     box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .2);
 }

 .dropdown-content a {
     color: black;
     display: block;
     /* 因为<a>标签不是块元素,min-width:100px不会生效 */
 }

 .dropdown-content a:hover {
     background-color: #f1f1f1;
     color: deepskyblue;
 }

 .dropdown:hover .dropdown-content {
     display: block;
 }

 /* 中间的空格表示,鼠标悬念在.dropdown上时,dropdown的子元素.dropdown-content变为块元素 */
 /* 因为.dropdown只用过一次,觉得可以删除<div class="dropdown"></div>来减少代码量,尝试将.dropdown:hover .dropdown-content {display: block;} 修改为.dropbtn:hover+.dropdown-content {display: block;} 并删除<div class="dropdown"></div>后,鼠标悬停在“下拉菜单”上,会显示下拉菜单, 但无法选中菜单中的“链接 x”, ### 为什么?该如何完善? ###    
 */

实例效果图:

QQ截图20230726101921.png

END