css实现鼠标滑过显示子栏目下拉菜单的代码实例

时间：2016-08-04

下文是纯css实现的，鼠标滑过自动显示子栏目下拉菜单的效果实例。

<!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>genban.org</title>
<style type="text/css" >    
    body{    
    margin:0px;    
    padding:0px;    
    }    
             
    li{    
    list-style:url(1.jpg);    
    }    
    a{    
    display:block;    
    }    
    a:link,a:visited  {    
    text-decoration: none;    
    color:#000000;    
}    
.menu{    
        margin:0px auto;    
        width:404px;    
        height:21px;    
        }    
        .menu ul{    
        margin:0px;    
        padding:0px;    
        }    
        .menu ul li{    
        position:relative;    
        float:left;    
    list-style:none;    
    padding:2px;    
    border:1px dotted;    
    font-size:14px;    
    width:95px;    
    text-align: center;    
    margin:0px;
     
    background:#999999;    
    }    
    .menu ul li ul{    
    display:none;    
    }    
    .menu ul li:hover ul{    
    display:block;    
    position: absolute; left: 0px; top: 21px;    
    }    
    .menu a:link{    
    background:url(2.png) -137px -10px;    
    }    
    .menu a:hover{    
    background:url(2.png) -26px -10px;    
    }    
         
         
    </style>
</head>

<body>
<p>genban.org导航</p>    
<div class="menu">    
 <ul>    
   <li><a href="#">首页</a></li>    
   <li><a href="#">新闻中心</a>    
    <ul>    
<li><a href="1#">新手入门</a></li>    
<li><a href="2#">视频教程</a></li>    
<li><a href="3#">常见问题</a></li>    
</ul>    
</li>    
   <li><a href="#">学习课程</a>    
    <ul>    
<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>    
 </ul>    
</div>    
</body>
</html>

鼠标滑过显示的关键css，其实就是

 .menu ul li:hover ul{    
    display:block;    
    position: absolute; left: 0px; top: 21px;    
    }

通过li:hover状态，来更改display，从none改为block，从而达到显示的目的。

上一条：url 关于自动换行问题 下一条:padding,margin,border与width宽度的关系图解教程

css实现鼠标滑过显示子栏目下拉菜单的代码实例

相关文章

最新文章