您的位置：首页 > Web前端 > CSS

纯CSS制作二级导航

2015-05-09 11:34 316 查看

一.问题描述

　　做一个类似校园网首页，主要是导航栏的设置，ul默认纵向排列，如何横向排列，同时去掉圆点。

二.问题解决

2.1 先写导航条

　　用两个ul嵌套，一个ul是横向导航条，另一个是每个小项目下连一个竖向的ul。

<ul id="nav_ul">
<li>
<a href="#">首页</a>
<ul class="nav_ul_ul">
<li>电信</li>
<li>联通</li>
<li>移动</li>
</ul>
</li>
</ul>

2.2 html乱码

　　原来没加charset，后来百度了需要加上gb2312，依然乱码，改成utf-8就ok了。

<meta charset="UTF-8">

2.3 去掉小圆点

<style type="text/css">
#navigator ul
{
list-style:none;
}

</style>

2.4 ul横向排列

　　left就是1234，right就是4321。不过我发现并没有这么简单。

#navigator li
{
float:left;
}

　　不过由于，div是用的id，二级ul也变成横向了。

　　查了资料我感觉可以这样写，果然对了。

#navigator ul li
{
float:left;
}
#navigator ul li ul li
{
float:none;

三.细节处理

3.1 鼠标滑过才弹出二级列表

　　首先定义嵌套的ul不显示,当鼠标划过li的时候下面的ul显示出来。

　　IE不显示效果，用搜狗可以。

#navigator ul li ul
{
display:none;
}
#navigator ul li:hover ul
{
display:block;
}

3.2 二级ul未和一级对齐

　　但是我们发现显示出来的二级栏目不是我们想要的位置，那么对它进行绝对定位，因为绝对定位的元素的位置相对于最近的已定位祖先元素。所以它外面的li设置一个相对定位。

#navigator ul li
{
float:left;
position:relative;
}
<!--hover 不是hovor -->
#navigator ul li:hover ul
{
display:block;
position:absolute;
left:0px;
top:21px;
}

　　但是二级里面的字体显示也变了，变成了，竖向。

<html>
<head>
<meta charset="UTF-8">
<title>首页
</title>
<!--别写成css/text -->
<style type="text/css">
#navigator ul
{
list-style:none;
}
#navigator ul li ul
{
display:none;
}
#navigator ul li
{
float:left;
position:relative;
}
<!--hover 不是hovor -->
#navigator ul li:hover ul
{
display:block;
position:absolute;
left:0px;
top:21px;
}
#navigator ul li ul li
{
<!-- 消除父元素浮动影响-->
float:none;
}
.nav_ul_ul li
{
}
#navigator
{

}
</style>
</head>
<body>

<div id = "navigator">
<ul id="nav_ul">
<li>
<a href="#">首页</a>
<ul class="nav_ul_ul">
<li>电信</li>
<li>联通</li>
<li>移动</li>
</ul>
</li>
<li>
<a href="#">电信</a>
<ul class="nav_ul_ul">
<li>优惠1</li>
<li>优惠2</li>
<li>优惠3</li>
</ul>
</li>
<li>
<a href="#">移动</a>
<ul class="nav_ul_ul">
<li>电信</li>
<li>联通</li>
<li>移动</li>
</ul>
</li>
<li>
<a href="#">联通</a>
<ul class="nav_ul_ul">
<li>电信</li>
<li>联通</li>
<li>移动</li>
</ul>
</li>
</ul>
</div>

</body>
</html>

　　先不管了，这有个比较精美的。

　　下载地址http://download.csdn.net/detail/huoxingshiyilang/8678959

　　特别说明：上面这个链接的资料是最下面的精美导航的代码，亲测兼容IE和谷歌。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航