www.gusucode.com > 标签导航菜单实现代码源码程序 > 标签导航菜单实现代码/csstabmenu/css/style.css
/* CSS3-only Horizontal Drop Line Tab Menu http://www.skyrocketlabs.com skyrocketlabs@gmail.com */ /* ARCHITECTURE */ body { font: normal 85% arial,verdana,tahoma,sans-serif; color: #777; margin: 0; padding: 0; background: #f0f0f0; } #wrapper { width: 960px; min-height: 800px; margin: 20px auto; padding: 20px; background: #fff; border: 1px solid #ccc; overflow: hidden; } #top { width: 960px; height: 120px; } .line { width: 960px; height: 1px; margin: 40px 0; background: #ddd; overflow: hidden; } /* TYPOGRAPHY */ h1, h2, h3 { font-size: 3.5em; font-weight: normal; letter-spacing: -1px; line-height: 1.0em; color: #000; margin: 0 0 5px 0; } h2 { font-size: 2.3em; letter-spacing: -1px; color: #999; margin: 0 0 30px 0; } h3 { font-size: 1.7em; letter-spacing: 0px; color: #000; margin: 70px 0 20px 0; padding: 0 0 20px 0; border-bottom: 1px solid #ddd; } h4 { font-size: 1.5em; font-weight: normal; line-height: 1.1em; color: #f0f0f0; margin: 0; padding: 10px 50px 0 0; } p { font-size: 1.0em; line-height: 1.5em; margin: 0 0 16px 0; } p a { color: #000; text-decoration: underline; } p a:hover { color: #999; text-decoration: underline; } p.boxy { padding: 10px; background: #f5f5f5; border: 1px solid #e0e0e0; } /* IMAGES */ img.icon { margin: 0 5px 0 0; vertical-align: middle; } #panel { width: 880px; height: 220px; padding: 40px; text-align: center; background: #d7d7d7 url(../img/panel-backgr.png) repeat-x; -moz-border-radius-bottomright: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-bottomleft: 10px; -webkit-border-bottom-left-radius: 10px; } /* MENU STYLE - IGNORE EVERYTHING ABOVE THIS LINE IF YOU WISH */ #menu { width: 960px; height: 40px; clear: both; } ul#nav { float: left; width: 960px; margin: 0; padding: 0; list-style: none; background: #dc0000 url(../img/menu-parent.png) repeat-x; -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; } ul#nav li { display: inline; } ul#nav li a { float: left; font: bold 1.1em arial,verdana,tahoma,sans-serif; line-height: 40px; color: #fff; text-decoration: none; text-shadow: 1px 1px 1px #880000; margin: 0; padding: 0 30px; background: #dc0000 url(../img/menu-parent.png) repeat-x; -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; } /* APPLIES THE ACTIVE STATE */ ul#nav .current a, ul#nav li:hover > a { color: #fff; text-decoration: none; text-shadow: 1px 1px 1px #330000; background: #bb0000; -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; } /* THE SUBMENU LIST HIDDEN BY DEFAULT */ ul#nav ul { display: none; } /* WHEN THE FIRST LEVEL MENU ITEM IS HOVERED, THE CHILD MENU APPEARS */ ul#nav li:hover > ul { position: absolute; display: block; width: 920px; height: 45px; position: absolute; margin: 40px 0 0 0; background: #aa0000 url(../img/menu-child.png) repeat-x; -moz-border-radius-bottomright: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-bottomleft: 10px; -webkit-border-bottom-left-radius: 10px; } ul#nav li:hover > ul li a { float: left; font: bold 1.1em arial,verdana,tahoma,sans-serif; line-height: 45px; color: #fff; text-decoration: none; text-shadow: 1px 1px 1px #110000; margin: 0; padding: 0 30px 0 0; background: #aa0000 url(../img/menu-child.png) repeat-x; } ul#nav li:hover > ul li a:hover { color: #120000; text-decoration: none; text-shadow: none; }