css下拉菜单之导航栏下拉菜单的制作笔记

原创 PHP笔记  2017-04-08 19:20  阅读 2,072 views 次

实例:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css导航栏下拉菜单的制作_PHP笔记</title>
</head>
<body >
<style type="text/css">
*{margin:0; padding:0;}/*为了兼容,一般会把外边距和内边距(填充)初始化为0*/
#menu{width:500px; height:40px; background:#CCCCCC;margin:auto;}
ul{list-style-type:none;/*去除列表标记*/ }
ul li{ font-size:22px; float:left;}
a{ display:block;padding:7px 10px;} /*转换为块元素*/ 
a:hover{background:#C1FFC1;}
.menu1 {
 position: absolute;/*绝对定位*/
 display: none;/*隐藏元素*/
 background-color:#F0F0F0;
 min-width: 100px;/*最小宽度*/
 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);/*阴影*/
}
.menu1 a {text-decoration:none;/*去除下划线*/}
#a:hover .menu1{ display: block; }/*当鼠标移动到id=”a”元素上显示下拉菜单*/
</style>
<div id='menu'>
<ul>
<li><a href="#">首页</a></li>
<li id="a"><a href="#" class="menu">web前端</a>
<div class="menu1">
<a href="#">html</a>
<a href="#">css</a>
<a href="#">JavaScript</a>
</div>
</li>
<li><a href="#">php学习</a></li>
<li><a href="#">数据库</a></li>
<li><a href="#">服务器</a></li>
</ul>
</div>
</body>
</html>

运行结果:

本文地址:https://www.ggbiji.com/css-drop-down-menu.html
版权声明:本文为 PHP笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情