用JavaScript+CSS制作下拉菜单

最新推荐文章于 2022-06-27 00:22:55 发布

Chien d'amis

最新推荐文章于 2022-06-27 00:22:55 发布

阅读量1.8k

点赞数 5

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/u012310622/article/details/107194486

版权

JavaWeb 专栏收录该内容

9 篇文章 16 订阅

订阅专栏

用JavaScript+CSS制作下拉菜单

在这里插入图片描述
样例跳转：样例三<—点这跳转

HTML代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="./CSS/index3.css" rel="stylesheet" type="text/css">
<title>导航条</title>
</head>
<body>
<nav class="nav_1">
<ul>
<li><a href="">菜单1 </a>
<ul>
<li><a href="">栏目1 </a> </li>
<li><a href="">栏目2 </a> </li>
<li><a href="">栏目3 </a> </li>
<li><a href="">栏目4 </a> </li>
</ul>
</li>
<li><a href="">菜单2 </a>
<ul>
<li><a href="">栏目1 </a> </li>
<li><a href="">栏目2 </a> </li>
<li><a href="">栏目3 </a> </li>
<li><a href="">栏目4 </a> </li>
</ul>
</li>
<li><a href="">菜单3 </a>
<ul>
<li><a href="">栏目1 </a> </li>
<li><a href="">栏目2 </a> </li>
<li><a href="">栏目3 </a> </li>
<li><a href="">栏目4 </a> </li>
</ul>
</li>
<li><a href="">菜单4 </a>
<ul>
<li><a href="">栏目1 </a> </li>
<li><a href="">栏目2 </a> </li>
<li><a href="">栏目3 </a> </li>
<li><a href="">栏目4 </a> </li>
</ul>
</li>
<li><a href="">菜单5 </a>
<ul>
<li><a href="">栏目1 </a> </li>
<li><a href="">栏目2 </a> </li>
<li><a href="">栏目3 </a> </li>
<li><a href="">栏目4 </a> </li>
</ul>
</li>
</ul>

</nav>
</body>
</html>

CSS代码：

*{
padding: 0;
margin:0;
}
body{
background-color: #f5f2ff;
}
.nav_1{ /*.容器整体 宽 高 的设定 */
width: 500px;
height: 50px;
background-color: blue;
position: absolute; /*固定一级菜单的位置*/
}
.nav_1 ul{ /* 具体菜单的宽高的设定*/
margin: 0 auto;
width: 1190px;
height: 100%;

}
.nav_1 ul li{ /*去掉一级菜单的点，横向浮动*/
list-style:none;
float: left;
}
.nav_1 ul li a:link, .nav_1 ul li a:visited{ /*单个菜单的具体属性*/
display: block;
width: 200px;
height: 100%;
text-align:center;
text-decoration: none;
line-height: 50px;
font-weight: bold;
font-size: 22px;
background-color: blue;
color:white;
border:1px solid white;
}

.nav_1 ul li a:hover,.nav_1 ul li a:active{ /*设定鼠标点击 移动过的属性*/
background-color: yellow;
}

.nav_1 ul li ul{ /* 二级菜单整体设定 */
display: none; /* 隐藏二级菜单列表*/
position: absolute; /*二级菜单的位置固定*/
}
.nav_1 ul li:hover ul{
display: block; /*二级菜单 将显示为块级元素*/
width:auto; /*消除二级菜单的滚动条，因为继承了父级的宽度*/
}
.nav_1 ul li ul li{
float: none; /*消除二级菜单的浮动*/
background-color: #eadfff;
width:238px;
}

在这里插入图片描述

Chien d'amis

关注

5
点赞
踩
29

收藏

觉得还不错? 一键收藏
2
评论
用JavaScript+CSS制作下拉菜单

用JavaScript+CSS制作下拉菜单样例跳转：样例三<—点这跳转HTML代码：<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><link href="./CSS/index3.css" rel="stylesheet" type="text/css"><title>导航条</title></h
复制链接

扫一扫