一.问题描述

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

随机推荐

Redis 命令 - Pub/Sub
PSUBSCRIBE pattern [pattern ...] Listen for messages published to channels matching the given patter ...
JQuery合并列(可用于导出Word)
在网上找了一些JQuery合并列的例子,但是都是用.hide()的方式,这样导致了在导出Word的时候表格严重变形自己写了一个用.remove()方式的合并列 function arrangeTab ...
knowlege experience
The konwledge is you need learning some basic knowledge. The experience is you can use konwledge ma ...
Javasript中Date日期常用用法(正则、比较)
Date 对象用于处理日期和时间.创建 Date 对象的语法: 代码如下复制代码 var myDate=new Date() Date 对象会自动把当前日期和时间保存为其初始值.参数形式有以下5种 ...
Quartz 第二课 Jobs and Triggers（官方文档翻译）
The Quartz API IScheduler—与scheduler交互的主要的接口 IJob—这个接口主要定义scheduler执行内容 IJobDetail—用于定义Jobs实例 ITrigg ...
验证hashmap非线程安全
http://www.blogjava.net/lukangping/articles/331089.html final HashMap<String, String> firstHas ...
[WCF]IIS部署到新系统
最近为以前的一个企业部署软件的时候,接触到WCF,通过博客园大佬的系列文章和一些书籍,基本了解了一些.简单说也算是SOA一种方式,提供某种服务,可以理解为一个类库,供其他项目使用,可以做到业务分离.但 ...
Js 变量的作用域
变量的作用域所有的变量作用域是指在哪里可用哪里不可用局部作用域和全局作用域在js中以函数来分割作用域在函数里面就叫做局部作用域,在函数外面的就叫全局作用域在函数里面如果省略var 关键字那 ...
工具：linux 性能监控工具-nmon
nmon 下载:http://pan.baidu.com/s/1jICoSpo 放到linux下可以直接运行. nmon 工具可以帮助在一个屏幕上显示所有重要的性能优化信息,并动态地对其进行更新. n ...
Java+Mysql+学生管理系统
最近正在学java和数据库,想起以前写的学生管理系统,都是从网上下载,敷衍了事.闲来无事,也就自己写了一个,不过功能实现的不是很多. 开发语言:java: 开发环境:Mysql, java: 开发工具 ...

纯CSS制作二级导航