纯div+css的黄色二级导航菜单 <br />/* common styling */<br />/* set up the overall width of the menu div, the font and the margins */<br />.menu {<br />font-family: arial, sans-serif; <br />width:750px; <br />margin:0; <br />margin:50px 0;<br />}<br />/* remove the bullets and set the margin and padding to zero for the unordered list */<br />.menu ul {<br />padding:0; <br />margin:0;<br />list-style-type: none;<br />}<br />/* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */<br />.menu ul li {<br />float:left; <br />position:relative;<br />}<br />/* style the links to be 104px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */<br />.menu ul li a, .menu ul li a:visited {<br />display:block; <br />text-align:center; <br />text-decoration:none; <br />width:104px; <br />height:30px; <br />color:#000; <br />border:1px solid #fff;<br />border-width:1px 1px 0 0;<br />background:#c9c9a7; <br />line-height:30px; <br />font-size:11px;<br />}<br />/* make the dropdown ul invisible */<br />.menu ul li ul {<br />display: none;<br />}<br />/* specific to non IE browsers */<br />/* set the background and foreground color of the main menu li on hover */<br />.menu ul li:hover a {<br />color:#fff; <br />background:#b3ab79;<br />}<br />/* make the sub menu ul visible and position it beneath the main menu list item */<br />.menu ul li:hover ul {<br />display:block; <br />position:absolute; <br />top:31px; <br />left:0; <br />width:105px;<br />}<br />/* style the background and foreground color of the submenu links */<br />.menu ul li:hover ul li a {<br />display:block; <br />background:#faeec7; <br />color:#000;<br />}<br />/* style the background and forground colors of the links on hover */<br />.menu ul li:hover ul li a:hover {<br />background:#dfc184; <br />color:#000;<br />}<br /> DEMOS zero dollars wrapping text styled form active focus shadow boxing image map fun backgrounds fade scrolling em sized images MENUS spies menu vertical menu enlarging list link images non-rectangular jigsaw links circular links LAYOUTS Fixed 1 Fixed 2 Fixed 3 Fixed 4 minimum width BOXES spies menu vertical menu enlarging list link images non-rectangular jigsaw links circular links MOZILLA drop down menu cascading menu content: mozzie box rainbow box snooker cue target practise two tone headings shadow text EXPLORER example one weft fonts vertical align OPACITY opaque colours opaque menu partial opacity partial opacity II
