网页导航栏下拉菜单的实现【基础篇】HTML样式：
导航栏下拉
内容1
内容2
内容3
内容4
box1
box2
box3
box4
CSS样式：ul{
width: 400px;
height: 30px;
line-height: 30px;
background-color: rgb(6, 7, 7);
}/* 对导航栏的整体样式进行设置 */
ul li{
list-style: none;
float: left;
}/* 删除列表的样式并设置浮动 */
a{
color: white;
padding: 20px;
margin: 0px;
text-decoration: none;
}/* 设置a标签的样式 */
.nav1 {
position: relative;/* 设置相对定位 */
display: inline-block;/* 让元素具有块级元素和行内元素的特性,即将块级元素转化为内联元素 */
}
.nav2 {
display: none;/* 将某元素隐藏起来 */
position: absolute;/* 绝对定位 */
background-color: #f9f9f9;
min-width: 81px;/* 最小宽度 */
}
.nav2 a {
color: black;
padding: 12px 16px;
display: block;/* 将a标签设置为块级标签 */
}
.nav2 a:hover {
background-color: #da8181
}/* 鼠标悬浮时的颜色 */
.nav1:hover .nav2 {
display: block;
}/* 鼠标悬浮在元素上时,变为块级标签 */
.nav1:hover,li:hover{
background-color: #12adb8;
}效果图； 作品有点简陋，请多多支持！！！！
|
