垂直下拉菜单

来源：互联网发布：淘宝上的依视路假货编辑：程序博客网时间：2024/06/05 10:52

<!DOCTYPE HTML><html><head>    <title>垂直下拉菜单</title><style type="text/css">    ul{ list-style:none; padding:0px;   }ul li{width:100px;}ul li a{   text-decoration:none;   background:#0099FF;   color:white;   height:40px;   line-height:40px;   text-align:center;   display:block;     border-bottom:1px solid white;}ul li a:hover{background:#C0F;}.submenu{position:relative;}.memu-list{display:none;}.submenu:hover .memu-list{display:block; position:absolute;top:5px;left:102px;}</style></head><body><ul><li><a href="#">首页</a></li><li class="submenu"><a href="#">职业学院</a><!--注意标签控制的一类，修饰是加在什么地方的--><ul class="memu-list"><li><a href="#">前端学院</a>                        <ul class="memu-list"><li><a href="#">Web前端工程师</a></li><li><a href="#">小程序工程师</a></li></ul>                    </li><li><a href="#">后端学院</a></li><li><a href="#">移动学院</a></li></ul></li><li><a href="#">会员课程</a></li><li><a href="#">极客社区</a></li></ul></body></html>

0 0