|
網頁設計製作教學分享 css menu 橫式下拉直式多層子選單(四)
網頁設計或製作的同時，通常對於選單的顏色配置，也會使用較單一的顏色，這一個css menu 橫式下拉式選單的顏色配置就比較協調，是屬於較精緻型的配色。css選單有用圖下去配置的有用圖下去做的只要找到圖的位置，就可以更換。
以下貼於<head>與</head>之間：
<style type="text/css">
ul.download {list-style-image:url(zip.gif);}
ul.download li {padding-left:5px; font-size:11px;}
#padding {height:50px;}
#multi-level {margin:25px 0 200px 100px;height:30px; position:relative; z-index:100;}
#multi-level .pad {float:left;}
/* The menu styling */
/* Remove the padding, margins and bullets from the lists */
.menu, .menu ul {list-style-type:none; padding:0; margin:0; font-family:arial, sans-serif;}
/* Set up the size of the list items and float left to place inline */
.menu li.top {display:block; float:left; position:relative;}
/* Style and position the table so it takes no part in the menu function. The font size is necessary for IE5.5 */
.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}
/* Default link styling */
.menu li.top a.top_link {display:block; float:left; height:35px;}
.menu li.top a span {position:absolute; left:-9999px; top:0; z-index:0; font-size:10px;}
/* pre-load the hover images */
.menu li.p1 {width:65px; background:url(multi_level-files/home_1.gif) no-repeat;;}
.menu li.p2 {width:90px; background:url(multi_level-files/products_1.gif) no-repeat;;}
.menu li.p3 {width:88px; background:url(multi_level-files/services_1.gif) no-repeat;;}
.menu li.p4 {width:91px; background:url(multi_level-files/contacts_1.gif) no-repeat;;}
.menu li.p5 {width:72px; background:url(multi_level-files/shop_1.gif) no-repeat;;}
.menu li.p6 {width:103px; background:url(multi_level-files/privacy_1.gif) no-repeat;;}
.menu li a#home {width:65px; background:url(multi_level-files/home_0.gif) no-repeat;}
.menu li a#products {width:90px; background:url(multi_level-files/products_0.gif) no-repeat;}
.menu li a#services {width:88px; background:url(multi_level-files/services_0.gif) no-repeat;}
.menu li a#contacts {width:91px; background:url(multi_level-files/contacts_0.gif) no-repeat;}
.menu li a#shop {width:72px; background:url(multi_level-files/shop_0.gif) no-repeat;}
.menu li a#privacy {width:103px; background:url(multi_level-files/privacy_0.gif) no-repeat;}
/* Style the list OR link hover. Depends on which browser is used */
.menu a:hover {visibility:visible;}
.menu li:hover {position:relative; z-index:200;}
.menu li a#home:hover, .menu li:hover a#home,
.menu li a#products:hover, .menu li:hover a#products,
.menu li a#services:hover, .menu li:hover a#services,
.menu li a#contacts:hover, .menu li:hover a#contacts,
.menu li a#shop:hover, .menu li:hover a#shop,
.menu li a#privacy:hover, .menu li:hover a#privacy {background:transparent;}
/* keep the 'next' level invisible by placing it off screen. */
.menu ul,
.menu :hover ul ul,
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0;}
.menu :hover ul.sub {left:0; top:35px; background: #fff; padding:3px 0; border:1px solid #888; white-space:nowrap; width:93px; height:auto;}
.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:90px;}
.menu :hover ul.sub li a {display:block; font-size:11px; height:20px; width:87px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
.menu :hover ul.sub li a.fly {background:#fff url(multi_level-files/arrow.gif) 80px 7px no-repeat;}
.menu :hover ul.sub li a:hover {background:#37a237; color:#fff;}
.menu :hover ul.sub li a.fly:hover {background:#37a237 url(multi_level-files/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu :hover ul li:hover > a.fly {background:#37a237 url(multi_level-files/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid #888; white-space:nowrap; width:93px; z-index:200; height:auto;}
</style>
以下貼於<body>與</body>之間：
<div id="wrapper">
<div id="info">
<div id="multi-level">
<img class="pad" src="multi_level-files/pad.gif" title="" alt="" />
<ul class="menu">
<li class="top p1"><a href="http://www." id="home" class="top_link"><span>Home</span></a></li>
<li class="top p2"><a href="http://www." id="products" class="top_link"><span>Products</span><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="../menu/" class="fly">Cameras<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../mozilla/">Nikon</a></li>
<li><a href="../ie/">Minolta</a></li>
<li><a href="../opacity/">Pentax</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="mid"><a href="../boxes/" class="fly">Lenses<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../mozilla/">Wide Angle</a></li>
<li><a href="../ie/">Standard</a></li>
<li><a href="../opacity/">Telephoto</a></li>
<li><a href="../menu/" class="fly">Zoom<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../mozilla/">35mm to 125mm</a></li>
<li><a href="../opacity/">50mm to 250mm</a></li>
<li><a href="../menu/">125mm to 500mm</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="../boxes/">Mirror</a></li>
<li><a href="../opacity/" class="fly">Non standard<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../mozilla/">Bayonet mount</a></li>
<li><a href="../opacity/">Screw mount</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="../mozilla/">Flash Guns</a></li>
<li><a href="../ie/">Tripods</a></li>
<li><a href="../opacity/">Filters</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top p3"><a href="http://www." id="services" class="top_link"><span>Services</span><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="../menu/">Printing</a></li>
<li><a href="../layouts/">Photo Framing</a></li>
<li><a href="../boxes/">Retouching</a></li>
<li><a href="../mozilla/">Archiving</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top p4"><a href="http://www." id="contacts" class="top_link"><span>Contacts</span><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="../layouts/">Support</a></li>
<li><a href="../boxes/" class="fly">Sales<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../mozilla/">USA</a></li>
<li><a href="../ie/">Canadian</a></li>
<li><a href="../opacity/">South American</a></li>
<li><a href="../menu/" class="fly">European<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../mozilla/" class="fly">British<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../ie/">London</a></li>
<li><a href="../menu/">Liverpool</a></li>
<li><a href="../boxes/">Glasgow</a></li>
<li><a href="../opacity/" class="fly">Bristol<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../ie/">Redland</a></li>
<li><a href="../opacity/">Hanham</a></li>
<li><a href="../menu/">Eastville</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="../layouts/">Cardiff</a></li>
<li><a href="../mozilla/">Belfast</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="../opacity/">French</a></li>
<li><a href="../menu/">German</a></li>
<li><a href="../boxes/">Spanish</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="../boxes/">Australian</a></li>
<li><a href="../boxes/">Asian</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="../mozilla/">Buying</a></li>
<li><a href="../ie/">Photographers</a></li>
<li><a href="../opacity/">Stockist</a></li>
<li><a href="../menu/">General</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top p5"><a href="http://www." id="shop" class="top_link"><span>Shop</span><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="../ie/">Online</a></li>
<li><a href="../opacity/">Catalogue</a></li>
<li><a href="../menu/">Mail Order</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top p6"><a href="http://www." id="privacy" class="top_link"><span>Privacy Policy</span></a></li>
</ul>
<img class="pad" src="multi_level-files/pad.gif" title="" alt="" /></div>
</div> <div id="info_right">
<div class="box250"></div></div>
</div>
|
