纯css实现鼠标经过时弹出的四级导航菜单特效，可根据自身需求来自定义菜单选项数量，实用css代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>纯css实现四级导航菜单_武鸣人</title>
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
#nav_www_wuming_ren, #nav_www_wuming_ren ul {
list-style: none;
background: #F9F9F9;
font-weight: bold;
padding: 0px;
margin: 0px;
border: solid 1px #CCCCCC;
border-bottom: 0px;
width: 150px;
text-align: left;
}
#nav_www_wuming_ren ul ul{
border: solid 1px #CCCCCC;
border-bottom: 0px;
}
#nav_www_wuming_ren a {
display: block;
width: 150px;
w\idth: 140px;
color: #333333;
text-decoration: none;
text-align: center;
border-bottom: solid 1px #CCCCCC;
text-align: left;
padding-left: 10px;
}
#nav_www_wuming_ren a:hover{
color: #336666;
}
#nav_www_wuming_ren li {
line-height: 22px;
position: relative;
}
#nav_www_wuming_ren li ul {
position: absolute;
left: -999em;
width: 150px;
font-weight: normal;
margin: 0px;
padding: 0px;
}
#nav_www_wuming_ren li li {
width: 150px;
}
#nav_www_wuming_ren li ul a {
width: 150px;
w\idth: 126px;
padding: 0px 12px;
line-height: 22px;
text-align: left;
}
#nav_www_wuming_ren li ul ul {
margin: 0px 0 0 150px;
}
#nav_www_wuming_ren li:hover ul ul,#nav_www_wuming_ren li.sfhover ul ul,#nav_www_wuming_ren li:hover ul ul ul{
left: -999em;
}
#nav_www_wuming_ren li:hover ul, #nav_www_wuming_ren li li:hover ul,#nav_www_wuming_ren li.sfhover ul, #nav_www_wuming_ren li li.sfhover ul,#nav_www_wuming_ren li li li:hover ul
{
left: auto;
}
#nav_www_wuming_ren li:hover ul,#nav_www_wuming_ren li.sfhover ul{
left: 150px;
top: 0px;
}
#nav_www_wuming_ren li:hover, #nav_www_wuming_ren li.sfhover {
background: #F5E3C0;
}
* html #nav_www_wuming_ren li {
float: left;
height: 1%;
}
* html #nav_www_wuming_ren li a {
height: 1%;
}
-->
</style>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<ul id="nav_www_wuming_ren">
<li><a href="https://www.wuming.ren">武鸣人一号</a></li>
<li><a href="https://www.wuming.ren">武鸣人二号</a></li>
<li><a class="selected" href="https://www.wuming.ren">武鸣人三号(鼠标放这)</a>
<ul>
<li><a href="https://www.wuming.ren">Sub Menu 31</a></li>
<li><a class="selected" href="#">Sub Menu 32(鼠标放这)</a>
<ul>
<li><a class="selected"href="#">Sub Menu 321(鼠标放这)</a><ul>
<li><a href="https://www.wuming.ren">四级导航菜单</a></li>
</ul></li>
<li><a href="#">Sub Menu 322</a></li>
<li><a href="#">Sub Menu 323</a></li>
<li><a class="selected"href="#">Sub Menu 324</a><ul>
<li><a href="#">Sub Menu 321</a></li>
<li><a href="#">Sub Menu 322</a></li>
<li><a href="#">Sub Menu 323</a></li>
<li><a href="#">Sub Menu 324</a></li>
</ul></li>
</ul>
</li>
<li><a href="#">Sub Menu 33</a></li>
<li><a href="#">Sub Menu 34</a></li>
</ul>
</li>
<li><a class="selected" href="https://www.wuming.ren">武鸣人四号</a>
<ul>
<li><a href="#">Sub Menu 41</a></li>
<li><a class="selected" href="#">Sub Menu 42</a>
<ul>
<li><a href="#">Sub Menu 421</a></li>
<li><a href="#">Sub Menu 422</a></li>
<li><a href="#">Sub Menu 423</a></li>
<li><a href="#">Sub Menu 424</a></li>
</ul>
</li>
<li><a href="#">Sub Menu 43</a></li>
<li><a href="#">Sub Menu 44</a></li>
</ul>
</li>
<li><a href="https://www.wuming.ren">武鸣人五号</a></li>
</ul>
</body>
</html>本文来自武鸣人网站，转载请注明出处