一.问题描述

　　做一个类似校园网首页，主要是导航栏的设置，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制作二级导航的更多相关文章

  1. 纯CSS实现二级导航下拉菜单--css的简单应用

    思想:使用css的display属性控制二级下拉菜单的显示与否.当鼠标移动到一级导航菜单的li标签时,显示二级导航菜单的ul标签.由于实现起来比较简单,所以在这里直接给出了参考代码. 1.纯CSS二级 ...

  2. 如何使用纯CSS制作特效导航条？

    先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...

  3. 纯css实现二级导航菜单效果,通过简单的鼠标事件操作页面元素样式变换实现二级导航菜单的功能,非常简单实用,

    HTML代码如下 <!-- 头部导航栏开始--><div id="nav"><dl class="sy"><dt> ...

  4. DIV+CSS制作二级横向弹出菜单，略简单

    没有使用JavaScript控制二级菜单的显示,结果如上图所示. 代码如下: <!DOCTYPE html> <html> <head> <meta char ...

  5. 如何使用纯 CSS 制作四子连珠游戏

    序言:你是否想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决!这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较 ...

  6. 个人练习：使用HTML+CSS制作二级菜单

    最近一直在学习HTML+CSS,刚看完如果制作下拉菜单部分,就想着做一个练练手. 先上成品图: 就是上面这个效果,横向菜单选项能点击,鼠标放在上面也能展开二级菜单,二级菜单也能点击,点击后就会在底下的 ...

  7. 纯CSS制作水平垂直居中“十字架”

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 纯CSS制作三角（转）

    原原文地址:http://www.w3cplus.com/code/303.html 原文地址:http://blog.csdn.net/dyllove98/article/details/89670 ...

  9. 纯css实现京东导航菜单

    纯CSS代码实现导航菜单,推荐在chrome预览! 预览请点击这里:mygithub <!doctype html> <html lang="en"> &l ...

随机推荐

  1. Android布局属性全面剖析

    第一类:属性值为true或false android:layout_centerHrizontal 水平居中 android:layout_centerVertical 垂直居中 android:la ...

  2. 实现iOS项目一款用swift实现的应用top源码

    Top 后台 Swift版本Ios 8 / iPhone 5S适配这边有个登陆,如果你们想测试的话,可以用这个账号, 账号:18868879362 密码:420562   源码下载: http://c ...

  3. <转载>提升程序的特权(AdjustTokenPrivileges)

    首先列出需要的函数 1.OpenProcessToken 2.AdjustTokenPrivileges 3. LookupPrivilegeValue ----------------------- ...

  4. NodeJS V8 GC概览

    [A tour of V8: Garbage Collection] http://jayconrod.com/posts/55/a-tour-of-v8-garbage-collection 基本是 ...

  5. java集合 collection-list-ArrayList 去除ArrayList集合中的重复元素。

    import java.util.*; /* 去除ArrayList集合中的重复元素. */ class ArrayListTest { public static void sop(Object o ...

  6. ZigBee 入网详解

    本文将根据Sniffer来详细解释ZigBee终端设备入网的整个流程,原创博文. 当协调器建立好网络后,终端设备执行zb_startrequest函数,准备入网时,他们两者之间详细的流程如下.

  7. OpenJudge 2721 忽略大小写比较字符串大小

    1.Link: http://bailian.openjudge.cn/practice/2721/ 2.Content: 总时间限制: 1000ms 内存限制: 65536kB 描述 一般我们用st ...

  8. myeclipse 的 working set

    想必大家的myeclipse会有很多工程看的和不方便,那么怎么让它看的简洁一点呢,使用working set 会让你的目录看起来没有那么的多. 首先是怎么创建 working set  ,在新建时选择 ...

  9. 对CLR异常和状态管理的一点理解

    一:自己的感悟 今天读到<CLR via C#>的异常和状态管理这一章,作者给出了关于异常处理的诸多建议,里面有一些建议自己深有体会,比如说使用可靠性换取开发效率这一节.之前自己对异常怎么 ...

  10. 把div固定在网页顶部

    很多网站都有把某一块固定在顶部的功能,今天上网搜搜然后自己又写了一遍,贴出来给大家看看,哪天用到的时候自己也可以随时看看 <!DOCTYPE html PUBLIC "-//W3C// ...