- /*CSS代码*/
- /*导航CSS*/
- nav{ margin:auto;width:960px; text-align:center; margin-bottom:30px;}
- nav ul{ list-style:none; white-space:nowrap;}
- nav ul li{ float:left;}
- nav ul li a{ border-bottom:3px solid #0099cc; margin-left:30px;}
- /* = Navigation*/
- #menu-navi {height: 40px;line-height: 40px;font-size:16px;clear:both;}
- #menu-navi a {-webkit-transition: background 0.2s ease-in-out; -moz-transition: background 0.2s ease-in-out;-o-transition: background 0.2s ease-in-out; -ms-transition: background 0.2s ease-in-out;transition: background 0.2s ease-in-out;}
- /*** ESSENTIAL Navigation Style ***/
- .sf-menu,.sf-menu * {margin: 0;padding: 0;list-style: none;}
- .sf-menu { line-height: 1.0 }
- .sf-menu ul {position: absolute;top: -999em;width: 10em; /* left offset of submenus need to match (see below) */}
- .sf-menu ul li { width: 100% }
- .sf-menu li:hover {visibility: inherit; /* fixes IE7 'sticky bug' */}
- .sf-menu li {float: left;position: relative;}
- .sf-menu a {display: block;position: relative;}
- .sf-menu li:hover ul,
- .sf-menu li.sfHover ul {left: 0;top: 40px; /* match top ul list item height */ z-index: 99;background: #0099CC;}
- ul.sf-menu li:hover li ul,
- ul.sf-menu li.sfHover li ul { top: -999em }
- ul.sf-menu li li:hover ul,
- ul.sf-menu li li.sfHover ul {left: 10em; /* match ul width */top: 0;}
- ul.sf-menu li li:hover li ul,
- ul.sf-menu li li.sfHover li ul { top: -999em }
- ul.sf-menu li li li:hover ul,
- ul.sf-menu li li li.sfHover ul {left: 10em; /* match ul width */top: 0;}
- /*** navigation skin ***/
- .sf-menu {float: left;margin-bottom: 1em;}
- .sf-menu a { color: #666;padding: 0 15px;height: 40px;line-height: 40px;text-decoration: none;text-transform: uppercase;}
- .sf-menu a:focus,
- .sf-menu a:hover{color: #FFF;background: #03749D; }
- li.sfHover { color: #fff; }
- .sf-menu li li {text-transform: none; }
- .sf-menu li li li { background: #0099cc; }
- .sf-menu ul a {color: #fff;padding: 0 1.2em;height: 35px;line-height: 35px;}
- <!-- html代码 -->
- <div id="menu-navi" class="clearfix">
- <div class="menu-container">
- <ul class="sf-menu">
- <li><a href='/'>首页</a></li>
- <li><a href='/'>代码</a></li>
- <li><a href='/'>讨论</a></li>
- <li><a href="#">下载</a>
- <ul>
- <li><a href="">模版</a></li>
- <li><a href="">插件</a></li>
- </ul>
- </li>
- <li><a href="">博客</a></li>
- <li><a href="#">联系</a>
- <ul>
- <li><a href="pay.html">支付</a></li>
- <li><a href="service.html">关于</a></li>
- </ul>
- </li>
- <li><a href="">留言</a></li>
- </ul>
- </div>
- </div>
- //该片段来自于http://www.codesnippet.cn/detail/230120131864.html
来源: http://www.codesnippet.cn/detail/230120131864.html