IT技术学习网
IT技术学习网
您的位置: 主页 > 编程技术 > css >

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

2014-11-01 10:12 来源: IT技术学习网原创 阅读:

下文是纯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>itjsxx.com</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>itjsxx.com导航</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,从而达到显示的目的。

css实现鼠标滑过显示子栏目下拉菜单的代码实例
转载需注明出处:IT技术学习网 http://www.itjsxx.com/css/css_mouse_hover_show.html

评论文章 css实现鼠标滑过显示子栏目下拉菜单的代码实例
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
IT技术学习网 - 关于我们 - 联系我们 - 版权声明 - 网站地图