下拉菜单——css方式实现二级菜单

来源：互联网发布：类似惠头条的软件编辑：程序博客网时间：2024/05/18 03:27
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title>    <style>            /*静态页面样式设置开始*/            /*一级菜单样式设置开始*/            *{margin:0px;padding:0px;}            #nav{background-color:#eee;width:600px;height:40px;margin:0 auto;}            #nav ul{list-style:none;}            #nav ul li{float:left;line-height:40px;text-align:center;}            /*                text-decoration:nono;————实现了<a>标签的默认样式为零                text-align:center;实现了<a>标签的样式文字居中                display:block;————一定一定一定要设置，因为只有把<a>标签的display属性设置为block，才能对<a>标签进行样式的设置            */            #nav a{text-decoration: none;display: block;padding:0 10px;color: #000;}             #nav a:hover{color: #ccc;background-color: #ddd;}            /*一级菜单样式设置结束*/            /*二级菜单设置样式开始*/                /*                    肯定肯定肯定要设置ul li ul的position属性值为absolute,这样一级菜单的宽度将二级菜单的不受影响                    ul li ul li{margin-top设置值导致的问题是，当鼠标滑到二级菜单下面时会退出二级菜单,所以应该用border-top来代替}                */               #nav ul li ul li{float: none;background-color: #eee;margin-top: 0px;border-top: 2px solid #fff;}               #nav ul li{position: relative;}               #nav ul li ul{position: absolute;left: -145px;height: 40px;}               #nav ul li ul li a:hover{background-color: #ddd;}            /*二级菜单设置样式结束*/            /*静态页面设置样式结束*/            /*CSS方法实现二级菜单的显示和隐藏开始*/            #nav ul li ul{display: none;}            #nav ul li:hover ul{display: block;}            /*CSS方法实现二级菜单的显示和隐藏结束*/            /*浏览器兼容性测试开始*/            #nav a{height: 40px;}            #nav ul li ul li a{width: 500px;}            /*浏览器兼容性测试结束*/        </style>  </head><body><div id="nav">      <ul>      <li><a href="#">菜单1</a>            <ul>                <li><a href="#">2级fdjkgnfweifgdcsdjhwouhfioewjoivoiew</a></li>                <li><a href="#">3级</a></li>                <li><a href="#">4级</a></li>            </ul>        </li>    <li><a href="#">菜单2</a>                <ul>                <li><a href="#">2级fdjkgnfweifgdcsdjhwouhfioewjoivoiew</a></li>                <li><a href="#">3级</a></li>                <li><a href="#">4级</a></li>            </ul>        </li>    <li><a href="#">菜单3</a>            <ul>                <li><a href="#">2级fdjkgnfweifgdcsdjhwouhfioewjoivoiew</a></li>                <li><a href="#">3级</a></li>                <li><a href="#">4级</a></li>            </ul>        </li>    <li><a href="#">菜单4</a>            <ul>                <li><a href="#">2级fdjkgnfweifgdcsdjhwouhfioewjoivoiew</a></li>                <li><a href="#">3级</a></li>                <li><a href="#">4级</a></li>            </ul>        </li>    <li><a href="#">菜单5</a>            <ul>                <li><a href="#">2级fdjkgnfweifgdcsdjhwouhfioewjoivoiew</a></li>                <li><a href="#">3级</a></li>                <li><a href="#">4级</a></li>            </ul>        </li>    <li><a href="#">菜单6</a>            <ul>                <li><a href="#">2级fdjkgnfweifgdcsdjhwouhfioewjoivoiew</a></li>                <li><a href="#">3级</a></li>                <li><a href="#">4级</a></li>            </ul>        </li></ul><div>  </body></html>
阅读全文
0 0