谁可能写一段最简单代码 给我讲下下拉菜单的原理
kixv
2016-05-10 17:56
大概知道是下拉菜单初始设置display：none
鼠标移动上去display:block
谢谢了 卡了好久 想不通
1回答
-
- listenlo
- 2016-05-11 10:17:21
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>横排二级下拉菜单</title>
<style type="text/css">
* { margin:0; padding:0;}
ul, li { list-style:none;}
a { text-decoration:none;}
.nav { border:2px solid #ccc; border-right:none; overflow:hidden; float:left; margin:100px 0 0 300px;}
.nav ul li { float:left;} //li本身是块元素，在制作一级菜单栏要变成行内元素，也可以写成display:inline;
.nav ul li a { width:120px; height:40px; text-align:center; line-height:40px; display:block; border-right:2px solid #ccc; background:#eee; color:#666;}//给a写样式，记住a标签要转变为块级元素，这样之前设置的宽高才会显示；
.nav ul li a:hover{ color:#f00; }//鼠标指到li时改变字体颜色
// 添加完二级栏目后，现在我们开始添加css样式，首先给<li>标签下的<ul>标签添加相对定位，再去除之下<li>标签的做浮动样式，再适当修改<a>标签
.nav ul li ul { position:absolute; display:none;} //二级标签要隐藏
.nav ul li ul li { float:none;}
.nav ul li ul li a { border-right:none; border-top:1px dotted #ccc; background:#f5f5f5;}
.nav ul li:hover ul{ display:block; }//由于二级标签隐藏，现在给鼠标样式时要写显示；表示鼠标指示到该元素上时则显示
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">栏目一</a>
<ul>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
</ul>
</li>
<li><a href="#">栏目二</a>
<ul>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
</ul>
</li>
<li><a href="#">栏目三</a>
<ul>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
</ul>
</li>
<li><a href="#">栏目四</a></li>
<li><a href="#">栏目五</a></li>
</ul>
</div>
</body>
</html>
还有什么不明白地方再说，这个百度上有很多这样的例子 你可以多练习下
十天精通CSS3
242556 学习 · 2623 问题
相似问题