CSS实现垂直和s水平下拉菜单

来源：互联网发布：淘宝评价福利图编辑：程序博客网时间：2024/04/30 20:35

<!DOCTYPE html /><html><head>    <title>垂直下拉菜单</title>    <style type="text/css">        *{margin:0;padding:0;}.ul1{text-decoration: none;list-style: none;float: left;margin: 30px 50px;}.ul1 li{width: 50px;position: relative;padding-bottom: 10px;border: 1px solid #adf;/* float: left; */  /* 加上这个float时就是水平下拉菜单 */}.ul1 li a{text-decoration: none;color: #8bf;}.ul1 li ul{display: none;background-color: lightyellow;color: #bfe;border: 1px solid #3ab;position: absolute;left: 0px;top: 100%;z-index: 10;}.ul1 li ul li{position: relative;list-style-type: none;}.ul1 li:hover ul{display: block;}    </style></head><body>    <div>    <nav>    <ul class="ul1">    <li><a href="#">下拉1</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="#">下拉2</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="#">下拉3</a><ul><li><a href="#">内容1</a></li><li><a href="#">内容2</a></li><li><a href="#">内容3</a></li></ul>    </li>    </ul>    </nav>    </div></body></html>

垂直下拉菜单：

水平下拉菜单：

0 0