<!DOCTYPEhtmlPUBLIC”-//W3C//DTDXHTML1.0Transitional//EN””http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<htmlxmlns=”http://www.w3.org/1999/xhtml”>
<head>
<metahttp-equiv=”Content-Type”content=”text/html;charset=utf-8″/>
<title>CSS下拉菜单</title>
<!–<linkrel=”stylesheet”type=”text/css”href=”nav1.css”/>–>
<!–<linkrel=”stylesheet”type=”text/css”href=”nav2.css”/>–>
</head>
<body>
<divclass=”menu”>
<ul>
<li>
<ahref=”#”>menu_0</a>
<ul>
<li><ahref=”#”>item_0</a></li>
<li><ahref=”#”>item_1</a></li>
<li><ahref=”#”>item_2</a></li>
<li><ahref=”#”>item_3</a></li>
<li><ahref=”#”>item_4</a></li>
</ul>
</li>
<li>
<ahref=”#”>menu_1</a>
<ul>
<li><ahref=”#”>item_5</a></li>
<li><ahref=”#”>item_6</a></li>
<li><ahref=”#”>item_7</a></li>
<li><ahref=”#”>item_8</a></li>
<li><ahref=”#”>item_9</a></li>
</ul>
</li>
<li>
<ahref=”#”>menu_2</a>
<ul>
<li><ahref=”#”>item_10</a></li>
<li><ahref=”#”>item_11</a></li>
<li><ahref=”#”>item_12</a></li>
<li><ahref=”#”>item_13</a></li>
<li><ahref=”#”>item_14</a></li>
</ul>
</li>
<li>
<ahref=”#”>menu_3</a>
<ul>
<li><ahref=”#”>item_15</a></li>
<li><ahref=”#”>item_16</a></li>
<li><ahref=”#”>item_17</a></li>
<li><ahref=”#”>item_18</a></li>
<li><ahref=”#”>item_19</a></li>
</ul>
</li>
<li>
<ahref=”#”>menu_4</a>
<ul>
<li><ahref=”#”>item_20</a></li>
<li><ahref=”#”>item_21</a></li>
<li><ahref=”#”>item_22</a></li>
<li><ahref=”#”>item_23</a></li>
<li><ahref=”#”>item_24</a></li>
</ul>
</li>
</ul>
</div>
<divstyle=”clear:left;”>Content!</div>
</body>
</html>
在不添加CSS的情况下，下拉菜单实际上就是二级无序列表。在CSS中通过对子列表的隐藏与显示的操作来达到下拉的效果。
![图片[1]-css下拉菜单(css下拉菜单怎么做附代码)-小白之家](https://caijiqi-1251775600.file.myqcloud.com/jianshu/2022/01/5320753702550983868.jpg)
两种实现下拉的方法的共同点在于：
1.必须将最外层的ul元素的padding属性设为0，以保证整个下拉菜单中的没有无序列表中的自动缩进。同时，将list-style-type设为none，以去除列表项前的标记。
2.如果主菜单需要横向，则需要把li元素设置为浮动元素，即float:left。
3.使二级子菜单呈一列的方法是将二级列表的ul元素和li元素设置为相同的宽度。
4.必须把二级列表的ul元素的position属性为absolute，以保证将该元素及其子元素从文件流中去除，这样一来当二级菜单显示的时候不会影响下面的其它元素。
5.下拉菜单后面的页面元素，需要把clear属性设置为left或者both。这是因为下拉菜单被设为了浮动元素，如果不这样做的话后面的页面元素的位置将会不恰当。
6.需要通过伪类:link、:visited以及:hover来设置元素有焦点和没有焦点时的颜色状态等。
不同点如前所述，即是：当一级菜单项没有焦点的时候，方法一会把二级菜单的ul元素的visibility属性设为hidden，使整个二级菜单不可见；当有焦点的时候，需要把相应的二级菜单的visibility属性改为visible，使其可见。而方法二则将需要不可见的二级菜单ul元素的display元素设为none，当需要可见的时候改为block。
上述状态的切换均通过伪类来完成而不调用JavaScript。
详细代码如下：
nav1.css（通过切换visibility属性）
.menu{
font-family:Arial,Helvetica,sans-serif;
width:455px;
margin:0auto;
}
.menuul{
padding:0;
list-style-type:none;
}
.menuulli{
float:left;
width:90px;
text-align:center;
line-height:30px;
background:#FC0;
border:#fff1pxsolid;
border-width:01px00;
}
.menuullia:link,.menuullia:visited{
text-decoration:none;
color:#000;
}
.menuulli:hover{
background:#F60;
}
.menuulli:hovera{
color:#fff;
}
.menuulliul{
visibility:hidden;
position:absolute;
width:90px;
}
.menuulli:hoverulli{
visibility:visible;
background:#F96;
color:#000;
width:90px;
}
.menuulliullia:link,.menuulliullia:visited{
color:#000;
}
.menuulliulli:hover{
background:#39F;
}
nav2.css（通过切换display属性）
.menu{
font-family:Georgia,”TimesNewRoman”,Times,serif;
margin:0auto;
width:505px;
}
.menuul{
padding:0;
list-style-type:none;
}
.menuulli{
float:left;
}
.menuullia:link,.menuullia:visited{
background:#3CF;
color:#000;
text-decoration:none;
display:block;
width:100px;
height:30px;
text-align:center;
}
.menuulli:hovera{
background:#009;
color:#fff;
font-weight:bold;
}
.menuulliul{
display:none;
}
.menuulli:hoverul{
display:block;
width:100px;
position:absolute;
}
.menuulliullia:link,.menuulliullia:visited{
background:#6FF;
color:#000;
}
.menuulliulli:hovera{
background:#60F;
color:#F60;
font-weight:bold;
},css下拉菜单怎么做附代码,在网站制作中，首先要做的便是主页的导航栏，导航栏一般都会用到下拉菜单，用来筛选子单元。下面是用CSS3的办法制导航栏的下拉菜单：
首先设置一个DIVtop-container作为导航栏，再在里边放一个DIVtop-nav用来放主导航，然后再设置4个divnav-btn-lv1
放一级菜单，每个一级菜单下边放无序列表产生子菜单：
class=”top-container”>
class=”top-nav”>
class=”nav-btn-lv1″>导航1
导航A
导航B
导航C
导航D
class=”nav-btn-lv1″>导航2
导航A
导航B
导航C
导航D
class=”nav-btn-lv1″>导航3
导航A
导航B
导航C
class=”nav-btn-lv1″>导航4
导航A
导航B
然后便是对div进行款式表的设置以及特效动画，首先将悉数款式的外边距及内边距设为0，并将列表前边的标志去掉。字体挑选微软雅黑，带暗影作用
*{
margin:0px;
padding:0px;
list-style:none;
font-family:”微软雅黑”;
text-shadow:#0000FF5px5px;
}
然后分别设置top-container和top-nav的宽高和布景色（为了分辨出div），将top-nav居中
.top-container{
width:100%;
height:40px;
background-color:#66AFE9;
}
.top-nav{
width:600px;
height:40px;
margin:0pxauto;
background-color:chartreuse;
}
然后再设置nav-btn-lv1的宽和最大高度，流布局，水平及垂直居中（用行高），超出部分躲藏（overflow）。
.nav-btn-lv1{
width:150px;
max-height:40px;
background-color:burlywood;float:left;
text-align:center;/*行高*/line-height:40px;
overflow:hidden;
}
然后设置nav-btn-lv1的鼠标点击特效（过渡作用及小手特效）
.nav-btn-lv1:hover{/*最大高度*/max-height:400px;/*过渡作用*/transition:1s;/*鼠标小手*/cursor:pointer;
}
再给列表加布景及下划线
.nav-btn-lv1li:hover{
background-color:yellow;
text-decoration:underline;
}
最终是让列表实线通明作用并且使导航栏出现圆角：
}
.nav-btn-lv1ul{
opacity:0.5;
}
.top-nav,.nav-btn-lv1{
border-radius:10px;
}
Tips：本站所有资源均收集自互联网，分享目的仅供学习参考，资源版权归该资源的合法拥有者所有。
Tips：若本站所发布的资源侵犯到您的合法权益，请及时联系 hqteam@qq.com 删除!
暂无评论内容