HTML+CSS简易版二级下拉菜单案例
一、HTML：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="nav"> <ul> <li class="menu2" onMouseOver="this.className=‘menu1‘" onMouseOut="this.className=‘menu2‘">我的首页 <div class="list"> <a href="#">言初森语</a><br /> <a href="#">首页</a><br /> <a href="#">学录</a><br /> <a href="#">语录</a><br /> <a href="#">音乐</a><br /> <a href="#">番剧</a><br /> </div> </li> <li class="menu2" onMouseOver="this.className=‘menu1‘" onMouseOut="this.className=‘menu2‘">我的菜单1 <div class="list"> <a href="#">言初森语</a><br /> <a href="#">首页</a><br /> <a href="#">学录</a><br /> <a href="#">语录</a><br /> <a href="#">音乐</a><br /> </div> </li> <li class="menu2" onMouseOver="this.className=‘menu1‘" onMouseOut="this.className=‘menu2‘">我的菜单2 <div class="list"> <a href="#">言初森语</a><br /> <a href="#">学录</a><br /> <a href="#">语录</a><br /> </div> </li> <li class="menu2" onMouseOver="this.className=‘menu1‘" onMouseOut="this.className=‘menu2‘">我的菜单3<div class="list"> <a href="#">言初森语</a><br /> <a href="#">首页</a><br /> <a href="#">学录</a><br /> <a href="#">语录</a><br /> <a href="#">音乐</a><br /> <a href="#">番剧</a><br /> <a href="#">心情</a><br /> <a href="#">其他</a><br /> </div> </body> </html>
二、未加CSS样式效果图：
三、 加上CSS：
<style type="text/css"> #nav{ width:600px; height:30px; position:relative; z-index:1; margin-right: auto; margin-left: auto; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; } body{ background-color:white; font-size:12px; font-family:"微软雅黑", Helvetica, sans-serif; margin:0px; padding:0px; color:white; } a:link{ color:#336601; text-decoration:none; float:left; width:100px; padding:3px 5px 0px 5px; } a:visited{ color:beige; text-decoration:none; float:left; padding:3px 5px 0px 5px; width:100px; } a:hover{ color:white; float:left; padding:3px 3px 0px 20px; width:88px; text-decoration:none; background-color:lightsalmon; } a:active{ color:white; float:left; padding:3px 3px 0px 20px; width:88px; text-decoration:none; background-color:#BD06B4; } li{ display:inline; list-style:none; list-style-position:outside; text-align:center; float:left; } .list{ line-height:20px; text-align:left; padding:4px; font-weight:normal; } .menu1{ width:120px; height:auto; margin:6px 4px 0px 0px; border:1px solid #9CDD75; background-color:antiquewhite; color:#336601; padding:6px 0px 0px 0px; cursor:hand; overflow:hidden; filter:Alpha(opacity=70); } .menu2{ width:120px; height:25px; margin:6px 4px 0px 0px; background-color:gainsboro; color:brown; border:1px solid #EEE8DD; padding:6px 0px 0px 0px; overflow:hidden; cursor:hand; } </style>
三、 HTML+CSS效果：
原文：https://www.cnblogs.com/YC-Yanchu/p/12317201.html