<!DOCTYPE html>
<html>
<head>
<title>select</title>
<style>
.submenu >div{
display: none;
}
.submenu:hover >div{
display: block;
}
ul ,li{
list-style: none;
margin: 0;
padding: 0;
}
.submenu >div{
position: absolute;
padding: 7px 0;
}
.submenu ul{
padding: 7px 7px;
border-radius: 15px;
background: rgb(0, 255, 255);
}
.submenu ul:before{
content: '';
position:absolute;
top:-7px;
left: 12px;
border-style: solid;
border-width:7px;
border-color: transparent;
border-bottom-color: rgb(0, 255, 255);
}
</style>
</head>
<body>
<li class="submenu">
<a href="">MENU1</a>
<div>
<ul>
<li><a href="">SUBMENU 01</a></li>
<li><a href="">SUBMENU 02</a></li>
<li><a href="">SUBMENU 03</a></li>
</ul>
</div>
</li>
</body>
</html>css实现下拉菜单选项
猜你喜欢
转载自blog.csdn.net/qq_40095973/article/details/81009023
今日推荐
周排行