css布局中 使用hover实现下拉标签
本文档主要介绍使用hover伪类实现下拉框的实现
代码
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
.container {
width: 800px;
margin: 0px auto;
font-size: 0px;
}
.cdiv {
color: #FFFFFF;
cursor: pointer;
padding: 15px;
text-align: center;
font-size: 16px;
display: inline-block;
background: black;
}
.p2:hover ul {
left: 225px;
display: inline-block;
}
.list_1 {
position: absolute;
font-size: 12px;
list-style-type: none;
display: none;
top: 47px;
}
li {
background: yellowgreen;
padding: 5px 16px;
}
li:hover {
color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="cdiv p1">首页</div>
<div clas