坚持学css（2013-01-22）

将近一个月的时间没有更新博客了，前段时间工作上的事太忙，都没怎么抽出时间学习css，不过有学到更多的photoshop的用法了，以后网站正好可以自己做图了。今天做了一点点，收获如下：

用ul>li做横向导航：

1.  ul>li默认的是竖直显示的，要让li的内容垂直显示，只需要加上float:left即可。

2. 在<a>标签中加入display：block，它显示就是以块的形式显示的。

3. 加入二级菜单，首先让二级菜单不可见，即二级菜单ul的熟悉设置visibility:hidden;

4. 显示二级菜单，就设置li的hover事件的时候显示：

#nav li:hover>ul
{
 visibility:visible;
 top:100%;
}

top：100%是二级菜单刚好显示的一级菜单的下面

效果图如下：

代码如下：jsp的body：

	<div id = "wrap">
  		<ul id = "nav">
  			<li id="pan1"><a href="javascript: void(0)"><span>主页</span></a></li>
  			<li id="pan2"><a href="javascript: void(0)"><span>柯林斯</span></a></li>
  			<li id="pan3"><a href="javascript: void(0)"><span>关联网站</span></a>
  				<ul>
  					<li><a href="javascript: void(0)"><span>谷歌</span></a></li>
  					<li><a href="javascript: void(0)"><span>百度</span></a></li>
  				</ul>
  			</li>
  			<li id="pan4"><a href="javascript: void(0)"><span>线路介绍</span></a></li>
  			<li id="pan5"><a href="javascript: void(0)"><span>娱乐设施</span></a></li>
  			<li id="pan6"><a href="javascript: void(0)"><span>画廊</span></a>
  				<ul>
  					<li><a href="javascript: void(0)"><span>ABC</span></a></li>
  					<li><a href="javascript: void(0)"><span>123</span></a></li>
  				</ul>
  			</li>
  			<li id="pan7"><a href="javascript: void(0)"><span>论坛</span></a></li>
  			<li id="pan8"><a href="javascript: void(0)"><span>关于我们</span></a></li>
  		</ul>
  	</div>

CSS里的内容：

html, body, p, h1, h2, h3, h4, h5, h6, ul, ol, li, form, fieldset  {
	margin:0;
	padding:0;
	border:0;
}

body {
	font-size:12px;  
	font-family:"宋体";
	text-align : center;
}

#wrap{
	margin: 0 auto;
	width : 964px;
	height : 300px;
	margin-top : 100px;
	text-align : left;
}

#nav li {
    border: 0 none;
    display: inline;
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 5;
}

#nav li:hover
{
	z-index:1000;
	white-space:normal;
}

#nav li li
{
	float:none;
	display:block;
}

#nav a{
	height :20px;
	display: block;
    text-decoration: none;
    background : #87ace4;
    margin-right : 1px;
    margin-bottom : 1px;
    text-align : center;
    color : #000;
    line-height : 20px;
}

#nav ul a{
	height : 20px;
	display: block;
    text-decoration: none;
    margin-bottom : 1px;
    text-align : left;
    line-height : 20px;
}


#nav, #nav ul
{
	margin:0;
	padding:0;
	border:0;
	list-style-type:none;
	display:block;
}

#nav ul
{
	visibility:hidden;
	position:absolute;
	z-index:10;
	left:0;
	top:0;
}

#nav li:hover>ul
{
	visibility:visible;
	top:100%;
}

#nav li li:hover>ul
{
	top:0;
	left:100%;
}

#nav a span {
    height : 20px;
    width : 80px;
}

#nav #pan1{width:80px;}
#nav #pan2{width:100px;}
#nav #pan3,#nav #pan3 li{width:125px;}
#nav #pan4{width:135px;}
#nav #pan5{width:160px;}
#nav #pan6,#nav #pan6 li{width:93px;}
#nav #pan7{width:98px;}
#nav #pan8{width:100px;}