原文:
一.问题描述
做一个类似校园网首页，主要是导航栏的设置，ul默认纵向排列，如何横向排列，同时去掉圆点。
二.问题解决
2.1 先写导航条
用两个ul嵌套，一个ul是横向导航条，另一个是每个小项目下连一个竖向的ul。
1
2.2 html乱码
原来没加charset，后来百度了需要加上gb2312，依然乱码，改成utf-8就ok了。
1
2.3 去掉小圆点
2.4 ul横向排列
left就是1234，right就是4321。不过我发现并没有这么简单。
1 #navigator li2 {3 float:left;4 }
不过由于，div是用的id，二级ul也变成横向了。
查了资料我感觉可以这样写，果然对了。
1 #navigator ul li2 {3 float:left;4 }5 #navigator ul li ul li6 {7 float:none; 
三.细节处理
3.1 鼠标滑过才弹出二级列表
首先定义嵌套的ul不显示,当鼠标划过li的时候下面的ul显示出来。
IE不显示效果，用搜狗可以。
1 #navigator ul li ul2 {3 display:none;4 }5 #navigator ul li:hover ul6 {7 display:block;8 }
3.2 二级ul未和一级对齐
但是我们发现显示出来的二级栏目不是我们想要的位置，那么对它进行绝对定位，因为绝对定位的元素的位置相对于最近的已定位祖先元素。所以它外面的li设置一个相对定位。
1 #navigator ul li 2 { 3 float:left; 4 position:relative; 5 } 6 7 #navigator ul li:hover ul 8 { 9 display:block;10 position:absolute;11 left:0px;12 top:21px;13 } 但是二级里面的字体显示也变了，变成了，竖向。
1 2 3 4首页 5 6 7 42 43 44 45 81 82 83 84 85
先不管了，这有个比较精美的。
下载地址
posted on 2015-05-09 11:57 阅读( ...) 评论( ...)