一个左侧竖直排列的多级图文菜单，CSS代码

时间：2013-04-01 21:04 来源：互联网作者：源码搜藏浏览：次收藏挑错推荐打印

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯CSS实现的侧边两级滚动下拉菜单效果</title>
<style type="text/css">
body {font-family:Arial, Helvetica, sans-serif;}
#navigation {width:145px;position:relative; z-index:100;margin-top:50px; border-right:1px solid #999; padding:10px 0px; float:left;}
* html #navigation {width:145px; w\idth:144px;}
#navigation li {width:145px;position:relative;}
#navigation a, #navigation a:visited {display:block; height:47px; background:url(http://www.codefans.net/jscss/demoimg/201303/navigati.png) top left; text-indent:-9000px;}
* html #navigation a, * html #navigation a:visited {width:145px; w\idth:145px;}
#navigation ul ul a.drop, #navigation ul ul a.drop:visited {background:#2d3d47}
#navigation ul ul a.drop:hover{background:#fff; color:#202c32;}
#navigation ul ul :hover > a.drop {background:#fff; color:#202c32;}
#navigation ul ul ul a, #navigation ul ul ul a:visited {background:#e2dfa8;}
#navigation ul ul ul a:hover {background:#b2ab9b;}
#navigation ul ul {visibility:hidden;position:absolute;top:-10px;left:145px;  padding:4px; background:#2d3d47; height:96px; width:145px; border-left:1px solid #999;}
* html #navigation ul ul {top:-9px;t\op:-10px;}
#navigation ul ul ul{left:149px; top:-1px; width:149px;}
#navigation ul ul ul.left {left:-149px;}
#navigation table {position:absolute; top:0; left:0; border-collapse:collapse;}
#navigation ul ul a, #navigation ul ul a:visited {background:#2d3d47; color:#fff; height:auto; line-height:14px; text-indent:0px; display:block; padding:5px; text-decoration:none; font-size:11px;}
/* yet another hack for IE5.5 */
* html #navigation ul ul a, * html #navigation ul ul a:visited {width:145px;w\idth:145px;}
#navigation :hover > a, #navigation ul ul :hover > a {background:url(http://www.codefans.net/jscss/demoimg/201303/navigati.png) top left;}
#navigation a.link1:hover {background-position:-146px 0px;}
#navigation a.link2 {background-position:0px -47px;}
/* DO NOT consolodate next 2 lines into one, this breaks IE6 */
#navigation a.link2:hover {background-position:-146px -47px;}
#navigation :hover > a.link2, #navigation ul ul :hover > a.link2  {background-position:-146px -47px;}
#navigation a.link3 {background-position:0px -94px;}
#navigation a.link3:hover{background-position:-146px -94px;}
#navigation :hover > a.link3, #navigation ul ul :hover > a.link3  {background-position:-146px -94px;}
#navigation a.link4 {background-position:0px -141px;}
#navigation a.link4:hover {background-position:-146px -141px;}
#navigation :hover > a.link4, #navigation ul ul :hover > a.link4  {background-position:-146px -141px;}
#navigation a.link5 {background-position:0px -188px;}
#navigation a.link5:hover {background-position:-146px -188px;}
#navigation a.link6 {background-position:0px -235px;}
#navigation a.link6:hover {background-position:-146px -235px;}
#navigation a.link7 {background-position:0px -282px;}
#navigation a.link7:hover {background-position:-146px -282px;}
#navigation a.link8 {background-position:0px -329px;}
#navigation a.link8:hover {background-position:-146px -329px;}
#navigation a.link9 {background-position:0px -375px; height:65px;}
#navigation a.link9:hover {background-position:-146px -375px;}

#navigation ul ul a:hover {background:#fff; color:#202c32;}
/* make the second level visible when hover on first level list OR link */
#navigation ul li:hover ul,
#navigation ul a:hover ul{visibility:visible; }
/* keep the third level hidden when you hover on first level list OR link */
#navigation ul :hover ul ul{visibility:hidden;}
/* make the third level visible when you hover over second level list OR link */
#navigation ul :hover ul :hover ul{ visibility:visible;}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}

:focus {
	outline: 0;
}

ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}
label {cursor:pointer;}
</style>

</head>

<body>

<li><a href="#" class="link1">Home</a></li>
        <li><a href="#" class="drop link2">Metal</a>
            
            <ul>
                <li><a href="#">Gold</a></li>
                <li><a href="#">Aluminum</a></li>
                <li><a href="#">Brass</a></li>

<li><a href="#">Stainless Steel</a></li>
            </ul>
            
        </li>
        <li><a href="#" class="drop link3">Plastic</a>
            
            <ul>
                <li><a href="#">Polyethelene</a></li>

<li><a href="#">Polycarbonate</a></li>
                <li><a href="#">Fiberglass</a></li>
                <li><a href="#">PVC</a></li>
            </ul>
            
        </li>
        <li><a href="#" class="drop link4">Services</a>
            
            <ul style="height:240px;top:-40px;">
                <li><a href="#">Art</a></li>
                <li><a href="#">Design For Manufacturing</a></li>
                <li><a href="#">Prototyping</a></li>
                <li><a href="#">Quickturn</a></li>
                <li><a href="#">Safety Design</a></li>
                <li><a href="#">Kits & Assembly</a></li>
                <li><a href="#">Request For Quote</a></li>
                </ul>
            
        </li>
        <li><a href="#" class="link5">News</a></li>
        <li><a href="#" class="link6">Catalog</a></li>
        <li><a href="#" class="link7">About Us</a></li>
        <li><a href="#" class="link8">Contact</a></li> 
        <li><a href="#" class="link9">Registered Users</a></li>
    </ul>
</div>
</body>
</html>

运行代码保存代码复制代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

CSS代码实现的网页左侧导航菜单，多级展开，竖直风格，用到一张图片来修饰菜单的效果，菜单上的文字和菜单项正好是对应的，不过修改菜单时候似乎要麻烦些，但是效果值得肯定，简洁清新的风格。一个左侧竖直排列的多级图文菜单，CSS代码由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/biaodan/1005.html

标签：网站源码