如何设置竖直方向的导航栏

引：

a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 当有鼠标悬停在链接上 */
a:active {color: #0000FF} /* 被选择的链接 */

在普通时候，display:none;

在鼠标悬停时，display:block;

具体如下：

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" />
<title>css�˵�</title>
<style type="text/css">
<!--
*{margin:0;padding:0;border:0;}
body {
 font-family: arial, ����, serif; font-size:12px;
}
#nav {
  line-height: 24px;  list-style-type: none; background:#666666; width:80px;
}
#nav a {
 display: block; width: 80px; text-align:center;
}
#nav a:link  {
 color:#666; text-decoration:none;
}
#nav a:visited  {
 color:#666;text-decoration:none;
}
#nav a:hover  {
 color:#FFF;
 text-decoration:none;
 font-weight:bold;
}

#nav li {
	width: 180px; background:#CCC;
}
#nav li a{
	width: 160px; text-align:left;padding-left:20px;
}
#nav li a:hover{
	background:#999;
}
#nav li dl {
    line-height: 27px;
    list-style-type: none;
    text-align:left;
    left: -999em;
    width: 180px;
    display:none;
}
#nav li dl dd{
 float: left;
 width: 180px;
 background: #F6F6F6; 
}

#nav li dl a{
 display: block;
 width: 180px;width: 156px;
 text-align:left;
 padding-left:24px;
}
#nav li dl a:link  {
 color:#666; text-decoration:none;
}
#nav li dl a:visited  {
 color:#666;text-decoration:none;
}
#nav li dl a:hover  {
 color:#F3F3F3;
 text-decoration:none;
 font-weight:normal;
 background:#C00;
}

#nav li:hover dl {
 left: auto;
 display:block;
}
#nav li.sfhover dl {
 left: auto;
}
#nav li.sfhover a {
 float:left;
 color : #00FF00;
}
#mrc {
 clear: left; 
}
-->
</style>

</head>
<body>
<div id="nav">
	<li><a href="#">1111111</a>
		<dl>
			<dd><a href="#">1aaaaaa</a></dd>
 			<dd><a href="#">1bbbbbbbbbbbb</a></dd>
		 </dl>
	</li>
	<li><a href="#">22222222222222222222</a>
 		<dl>
 			<dd><a href="#">DELPHI</a></dd>
 			<dd><a href="#">VC++</a></dd>
 			<dd><a href="#">AJAX</a></dd>
 		</dl>
	</li>
	<li><a href="#">33333333333333</a>
		<dl>
			<dd><a href="#">3aaaaaaaaaa</a></dd>
 		</dl>
	</li>
	<li><a href="#">444444444444444444</a>
 		<dl>
 			<dd><a href="#">4aaaaaaaaaaaaaa</a></dd>
 			<dd><a href="#">mb5u.com</a></dd>
 		</dl>
	</li>

	<li><a href="#">5555555</a>
 		<dl>
 			<dd><a href="/">JQUERY</a></dd>
 			<dd><a href="#">AJAX</a></dd>
 			<dd><a href="#">EXTJS</a></dd>
 		</dl>
	</li>
	<li><a href="#">6666666</a>
 		<dl>
 			<dd><a href="#">ASP</a></dd>
 			<dd><a href="#">PHP</a></dd>
 			<dd><a href="#">JSP</a></dd>
 		</dl>
	</li>
</div>
</body>
</html>

如何设置竖直方向的导航栏

猜你喜欢