<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/隐藏下拉列表/
list{
display: none;
}
/鼠标移动显示下拉列表/
menu:hover list{
display: block;
}
</style>
</head>
<body>
<div class="menu">
<a href="#">下拉菜单</a>
<div class="list">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
</body>
</html>css设置下拉列表(select)样式首先我们需要获取到这个元素的id或者是class，然后在通过给这个元素设置它的width和height等等一些样式，具体的看代码:
<html>
<head>
<style>
div1{
width:600px;
height:200px;
font-size:13px;
}
div select{
width:200px;
}
div select option{
width:150px;
height:30px;
}
</head>
<body>
<div class='div1'>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</div>
</body>
</html>纯CSS的下拉菜单，我理解的意思就是<li>标签套<li>标签，然后再给<li>标签设置样式。在被套的<li>标签设置平时状态为隐藏，再等鼠标移动到上一个<li>标签时，将被套的<li>标签显示（样式：overflow:hidden; ）。大致意思就是如此。我对这些也不能说特别精通。网上倒是有很多倒子的。 贴一段网上摘的纯CSS下拉菜单（二级） <!DOCTYPE HTML> <html> <head> <meta >
/ CSS部分 /ul { list-style:none; margin:0; padding:0; text-align:center; background:#F03; color:#FFF; -webkit-transform:scaleY(0); -webkit-transform-origin:0 0; }li { padding:0; margin:0; }div { width:200px; }div:hover ul { -webkit-animation:ulShow 04s; -webkit-animation-fill-mode:forwards; -webkit-animation-timing-function: cubic-bezier(0,08,09,1); }div div { height:30px; line-height:30px; text-align:center; background-color:#FC0; }@-webkit-keyframes ulShow { from { -webkit-transform:scaleY(0); } to { -webkit-transform:scaleY(1); }}
<!-- HTML部分 --><div> <div>下拉 </div> <ul> <li>第一个</li> <li>第二个</li> <li>第三个</li> </ul></div>
本例适用于谷歌浏览器和Safari浏览器，如需兼容Opera须将“-webkit-”更改为”-o-“，火狐改为“-moz-”，IE系列比较复杂在此不予举例详情请查询W3C。
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul{
list-style: none;
}
nav>li{
float: left;
}
ul a{
display: block;
text-decoration: none;
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
color: white;
background-color: #2f3e45;
}
nav>li:first-child a{
border-radius: 10px 0 0 10px;
}
nav>li:last-child a{
border-radius: 0 10px 10px 0;
}
drop-down{
/position: relative;/
}
drop-down-content{
padding: 0;
display: none;
/position: absolute;/
}
h3{
font-size: 30px;
clear: both;
}
drop-down-content li:hover a{
background-color:red;
}
nav drop-down:hover drop-down-content{
display: block;
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#">下拉菜单</a></li>
<li class="drop-down"><a href="#">下拉菜单</a>
<ul class="drop-down-content">
<li><a href="#">我是1</a></li>
<li><a href="#">我是2</a></li>
<li><a href="#">我是3</a></li>
</ul>
</li>
<li><a href="#">下拉菜单</a></li>
<li><a href="#">下拉菜单</a></li>
<li><a href="#">下拉菜单</a></li>
</ul>
<h3>我是测试文字</h3>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）