*{margin: 0;padding: 0;font-size: 16px;}
body{
background-image: url(4.jpg);
}
.ul{
list-style: none;
border-bottom: 5px orange solid;
height: 50px;/*li浮动后，脱离文档流，所以要给ul定义宽度(自适应)和高度。*/
padding-left: 50px;/*将表格整体向左偏移。*/
position: relative;
}/*去掉ul的宽度不然无法浮动成一行。*/
.ul a{
background-color: #005CAF;
color: #F4A7B9;
height: 30px;
line-height: 30px;
width: 100px;
display: block;/*重要点，设置为块级元素，这样可以直接对a设置样式，而不用对li设置。*/
margin-right: 10px;
text-decoration: none;
text-align: center;/*a标签文本居中对齐。*/
border:2px solid #a1a1a1;/*圆角矩形框*/
border-radius:25px;
}
a:hover{
background-color: #FFC408;
color: white;
}
.ul>li{
float: left;
margin-top: 18px;
}
.ul2{
position:absolute;
left: 50px;
top: 50px;
height: 0;/*设置高度为零，才能隐藏起来。*/
overflow: hidden;
}
.ul li:hover .ul2{
overflow: visible;
}
一键复制
编辑
Web IDE
原始数据
按行查看
历史