一.问题描述

　　做一个类似校园网首页，主要是导航栏的设置，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和谷歌。

纯CSS制作二级导航的更多相关文章

纯CSS实现二级导航下拉菜单--css的简单应用
思想:使用css的display属性控制二级下拉菜单的显示与否.当鼠标移动到一级导航菜单的li标签时,显示二级导航菜单的ul标签.由于实现起来比较简单,所以在这里直接给出了参考代码. 1.纯CSS二级 ...
如何使用纯CSS制作特效导航条？
先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...
纯css实现二级导航菜单效果,通过简单的鼠标事件操作页面元素样式变换实现二级导航菜单的功能,非常简单实用,
HTML代码如下 <div id="nav"><dl class="sy"><dt> ...
DIV+CSS制作二级横向弹出菜单，略简单
没有使用JavaScript控制二级菜单的显示,结果如上图所示. 代码如下: <!DOCTYPE html> <html> <head> <meta char ...
如何使用纯 CSS 制作四子连珠游戏
序言:你是否想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决!这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较 ...
个人练习：使用HTML+CSS制作二级菜单
最近一直在学习HTML+CSS,刚看完如果制作下拉菜单部分,就想着做一个练练手. 先上成品图: 就是上面这个效果,横向菜单选项能点击,鼠标放在上面也能展开二级菜单,二级菜单也能点击,点击后就会在底下的 ...
纯CSS制作水平垂直居中“十字架”
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
纯CSS制作三角（转）
原原文地址:http://www.w3cplus.com/code/303.html 原文地址:http://blog.csdn.net/dyllove98/article/details/89670 ...
纯css实现京东导航菜单
纯CSS代码实现导航菜单,推荐在chrome预览! 预览请点击这里:mygithub <!doctype html> <html lang="en"> &l ...

随机推荐

Swift标识符和关键字
任何一种计算机语言都离不开标识符和关键字,下面我们将详细介绍Swift标识符和关键字. 标示符标识符就是给变量.常量.方法.函数.枚举.结构体.类.协议等指定的名字.构成标识符的字母均有一定的规范, ...
给label text 上色 && 给textfiled placeholder 上色
1.给label text 上色: NSInteger stringLength = ; stringLength = model.ToUserNickName.length; NSMutableAt ...
[zz] 安装PostGIS(Linux篇)
0.安装PostgreSQL数据库参考安装PostgreSQL数据库(Linux篇). 1.安装proj4 #tar zxvf proj-4.8.0.tar.gz#cd proj-4.8.0#./c ...
CCM加密学习
这几天终于搞定了AES硬件加密工具的使用,几种简单的加密模式也都实验通过了,比较麻烦的一种是CCM模式的加密,它是CTR加密模式和CMAC认证算法的混合使用.本文先介绍CCM模式的原理与基本实现,然后 ...
makefile--编码修改-空格出现错误
"makefile", line 40: make: 1254-055 Dependency line needs colon or double colon operator. ...
java-多线程-join函数
join()>>不带参数线程A调用线程B.join,意思就是线程A并入了线程B,当执行完线程B,再去执行线程A后续动作 join(int keepTims)>>带参数,与上面 ...
[java学习笔记]java语言核心----面向对象之构造函数
1.构造函数概念特点: 函数名与类名相同不用定义返回值类型没有具体的返回值作用: 给对象进行初始化注意: 默认构造函数多个构造函数是以重载出现的一个类中如果 ...
[转]主键冲突的话就更新否则插入（ON DUPLICATE KEY UPDATE ）
mysql "ON DUPLICATE KEY UPDATE" 语法如果在INSERT语句末尾指定了ON DUPLICATE KEY UPDATE,并且插入行后会导致在一个UNIQ ...
CMake基础教程
如果需要配置和检查我们工程中的所有依赖,那么可以选用CMake工具:但是,这并不是必须的,因为我们可以使用其他的工具或者是IDE(比如Makefiles或者Visual Studio)来配置我们的工程 ...
Java中的队列：java.util.Queue接口
队列是一种特殊的线性表,它只允许在表的前端(front)进行删除操作,而在表的后端(rear)进行插入操作. Queue接口与List.Set同一级别,都是继承了Collection接口.Linked ...

纯CSS制作二级导航