今天小编跟大家讲解下有关纯CSS+XHTML实现的二级导航菜单效果 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关纯CSS+XHTML实现的二级导航菜单效果 的相关资料，希望小伙伴们看了有所帮助。
本文实例讲述了纯CSS+XHTML实现的二级导航菜单效果。分享给大家供大家参考。具体如下：
这是一款简约、兼容好的XHTML+css二级导航菜单
运行效果截图如下：
在线演示地址如下：
http://demo.aidi.net.cn/js/2015/css-xhtml-2l-menu-nav-demo-codes/
具体代码如下：
复制代码代码如下:<!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=utf-8" /><title>纯CSS+XHTML下拉菜单</title><style type="text/css"><!--* { margin:0; padding:0;}body { font:12px Verdana, Geneva, sans-serif #333; line-height:1.5;}ul li { list-style:none;}.menu { width:660px; margin:20px auto;}.menu li { display:inline; float:left; margin:0 5px; background:#f2f2f2; border:1px #39c solid; text-align:center; font-size:14px; font-weight:700; line-height:30px; cursor:hand; }.tuckUp { display:inline; width:120px; height:30px; overflow:hidden; background:#f2f2f2;}.pullDown{ display:inline; height:auto;}.item a:link, .item a:visited { display:inline; float:left; width:110px; background:#ccc; text-align:center; color:#444; font-size:12px; font-weight:normal; text-decoration:none; line-height:25px; margin:0 5px 5px 5px;}.item a:hover { display:inline; float:left; background:#39c; width:100px; color:#FFF; text-decoration:none; text-align:center; font-size:12px; font-weight:700; font-weight:normal; line-height:25px; padding:0 0 0 10px; margin:0 5px 5px 5px;}//--></style></head><body><ul class="menu"> <li class="tuckUp" onmousemove="this.className='pullDown'" onmouseout="this.className='tuckUp'">精品特效 <div class="item"><a href="">网页特效</a></a> <a href="">层和布局</a></a> <a href="">表单按钮</a></div> </li> <li class="tuckUp" onmouseover="this.className='pUllDown'" onmouseout="this.className='tuckUp'">菜单导航 <div class="item"><a href="">菜单导航</a> <a href="">CSS菜单</a> <a href="">JQUERY菜单</a></div> </li> <li class="tuckUp" onmouseover="this.className='pullDown'" onmouseout="this.className='tuckUp'">源代码 <div class="item" ><a href="">源码下载</a> <a href="">ASP分类</a> <a href="">PHP分类</a> <a href="">ASP.NET</a></div> </li> <li class="tuckUp" onmouseover="this.className='pUllDown'" onmouseout="this.className='tuckUp'">更新汇总 <div class="item"><a href="">最新更新</a> <a href="">最新更新</a> <a href="">网站首页</a></div> </li> <li class="tuckUp" onmouseover="this.className='pUllDown'" onmouseout="this.className='tuckUp'">脚本下载 <div class="item"><a href="">脚本资源</a> <a href="">AJAX</a> <a href="">JQUERY</a> <a href="">EXTJS</a></div> </li></ul></body></html>
希望本文所述对大家的CSS网页设计有所帮助。
来源：爱蒂网