html左侧导航栏点击下拉菜单,HTML+CSS实现下拉菜单

HTML+CSS实现简单下拉菜单

HTML+CSS实现简单的下拉列表

1.下拉列表实例

代码如下：

*{

margin:0;

padding:0;

text-decoration:none;

list-style:none;

}

body{

text-align:center;

}

.header{

display:inline-block;

position:relative;

background-color:#4CAF50;

}

.header:hover .downbtn{

display:block;

background-color: #f1f1f1;

}

.header:hover{

background-color: #3e8e41;

}

.header span{

padding:15px;

line-height:61px;

cursor:pointer;

color: white;

}

.header .downbtn{

display:none;

position:absolute;

background-color:#f9f9f9;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

min-width: 160px;

}

.header .downbtn li{

line-height:30px;

text-align:left;

padding-left:5px;

}

.header .downbtn a:hover{

text-decoration:underline;

color:#f00;

}

.header .downbtn a{

display:block;

color:black;

width:100%;

}

下拉列表

• 下拉列表01
• 下拉列表02
• 下拉列表03
• 下拉列表04
• 下拉列表05

效果图如下：

2.技术要点

下拉菜单需边的子菜单隐藏(使用display:none;将元素隐藏)

鼠标悬浮样式(div:hover)

父元素相对定位(position:relative;)

子元素绝对定位(position:absolute;)

持续更新，多多关注