首先我们写一个<li>格式的代码如下:
<!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>
<title>无标题页</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>
从上面的代码我们得到如下的效果:
清除它的默认样式即把ul的list-style:none,这样就显示如下(图二):
增加二级子节点
<ul>
<li>
<a href ="#">1</a>
<ul>
<li><a href="#">11</a>
</li>
<li><a href="#">11</a>
</li>
</ul>
</li>
<li><a href ="#">2</a>
<ul>
<li><a href="#">22</a>
</li>
<li><a href="">22</a></li>
</ul></li>
<li><a href="">3</a>
<ul>
<li><a href="">33</a></li>
<li><a href="">33</a></li>
<li><a href="">33</a></li>
</ul>
</li>
<li><a href="">4</a>
<ul>
<li><a href="">44</a></li>
<li><a href="">44</a></li>
<li><a href="">44</a></li>
</ul>
</li>
</ul>
得到如下效果:
我们可以看到二级菜单很正常的显示了,所以我们要使其不可见:设置子无序列表为不可见:ul li ul
{
display:none
}
效果出来了,但是是图一的效果,不是我们需要的,在做如下设置:
ul li:hover ul
{
display:block
}
上面的代码的意思是:当鼠标滑过一级菜单的li时,二级菜单ul显示为块级元素;可是运行程序发现当鼠标真的划过一级菜单时,二级菜单会把一级菜单给挤开了,这个时候我们应该想到一个属性position:absolute就是说把二级菜单设置为绝对定位;这样二级菜单将脱离原来文档流,不再占据空间,因此也不会一级菜单内容挤开了,这样以来一个超级简陋的纵向二级菜单就算是完成了。
我们把全部的代码都显示出现:
<!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>
<title></title>
<style>
ul
{
list-style:none
}
ul li ul
{
display:none
position:absolute
}
ul li:hover ul
{
display:block
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li>
<a href ="#">1</a>
<ul>
<li><a href="#">11</a>
</li>
<li><a href="#">11</a>
</li>
</ul>
</li>
<li><a href ="#">2</a>
<ul>
<li><a href="#">22</a>
</li>
<li><a href="">22</a></li>
</ul></li>
<li><a href="">3</a>
<ul>
<li><a href="">33</a></li>
<li><a href="">33</a></li>
<li><a href="">33</a></li>
</ul>
</li>
<li><a href="">4</a>
<ul>
<li><a href="">44</a></li>
<li><a href="">44</a></li>
<li><a href="">44</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
大家可以运行看看,基本的效果实现的.但是不好看,感觉有点粗糙,下面对代码进行美化.
<!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>
<title>无标题页</title>
<style type ="text/css" >
a
{
text-decoration:none
}
#nav
{
width:100px
border:1px solid #ccc
border-bottom:none
}
ul
{
list-style:none
margin:0
padding:0
}
ul li
{
background:silver
padding:0 8px
height:30px
border-bottom:1px solid #ccc
position:relative
}
ul li ul
{
display:none
position:absolute
width:100px
left:100px
border-bottom:none
}
ul li:hover ul
{
display:block
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li>
<a href ="#">1</a>
<ul>
<li><a href="#">11</a>
</li>
<li><a href="#">11</a>
</li>
</ul>
</li>
<li><a href ="#">2</a>
<ul>
<li><a href="#">22</a>
</li>
<li><a href="">22</a></li>
</ul></li>
<li><a href="">3</a>
<ul>
<li><a href="">33</a></li>
<li><a href="">33</a></li>
<li><a href="">33</a></li>
</ul>
</li>
<li><a href="">4</a>
<ul>
<li><a href="">44</a></li>
<li><a href="">44</a></li>
<li><a href="">44</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
所谓的美化,无非就是一个高度,背景颜色等进行设置.这样就得到了可以使用的菜单.
<html ><head>
<title>列表</title>
<style type="text/css">
*{margin:0pxpadding:0px}
div{padding:10pxwidth:120pxbackground-color:#CCCCCC}
.ulStyle{list-style: none1width:140px}
.ulStyle li{background-color:whitelist-style:none}
</style>
</head>
<body>
<div class="cont">
<p>CSS</p>
<ul class="ulStyle css">
<li><a href="#">css入门</a></li>
<li><a href="#">css进阶</a></li>
<li><a href="#">css高级</a></li>
</ul>
<p>webUI</p>
<ul class="ulStyle webUI">
<li><a href="#">理论知识</a></li>
<li><a href="#">实战应用</a></li>
<li><a href="#">高级技巧</a></li>
</ul>
<p>DOM</p>
<ul class="ulStyle DOM">
<li><a href="#">DOM入门</a></li>
<li><a href="#">DOM应用</a></li>
<li><a href="#">DOM与浏览器</a></li>
</ul>
<p>XHTML</p>
<ul class="ulStyle XHTML">
<li><a href="#">参考手册</a></li>
<li><a href="#">交流论坛</a></li>
</ul>
</div>
</body>
</html>
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)