漂亮的菜单 简洁网页适用 有图有真相

概述漂亮的菜单 简洁网页适用 有图有真相

下面是内存溢出 jb51.cc 通过网络收集整理的代码片段。

内存溢出小编现在分享给大家，也给大家做个参考。

/*导航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;}

以上是内存溢出(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

总结

以上是内存溢出为你收集整理的漂亮的菜单 简洁网页适用 有图有真相全部内容，希望文章能够帮你解决漂亮的菜单 简洁网页适用 有图有真相所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。