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

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

编程技巧