一.问题描述

　　做一个类似校园网首页，主要是导航栏的设置，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. C#的提交表单方式WebClient

    向网站提交页面的主要代码 string postString = "arg1=a&arg2=b";//这里即为传递的参数,可以用工具抓包分析,也可以自己分析,主要是form ...

  2. 北大ACM(POJ1001-Exponentiation)

    Question:http://poj.org/problem?id=1001问题点:大数运算(求幂) #include <iostream> using namespace std; # ...

  3. 第五十八篇、iOS 微信聊天发送小视频的秘密

    对于播放视频,大家应该一开始就想到比较方便快捷使用简单的MPMoviePlayerController类,确实用这个苹果官方为我们包装好了的 API 确实有很多事情都不用我们烦心,我们可以很快的做出一 ...

  4. Objective-C 【单个对象内存管理（野指针&内存泄露）】

    ------------------------------------------- 单个对象内存管理 (1)野指针 ①定义了一个指针变量,但是并没有赋初值,它随机指向一个东西 ②某指针变量指向的内 ...

  5. response.redirect和server.Transfer的差别详解

    Response.Redirect和Server.Transfer都能实现页面的跳转,但两者又有很大区别. 一 地址栏里显示的地址不同 Response.Redirect会显示跳转的网页的地址,而Se ...

  6. 关于JFinal拦截器的理解

    这是波总的亲自总结,记录一下: 1:拦截器可以用在两个层面,一个是"控制层",另一个是"业务层",其中"业务层"是一种狭义的说法,更加合理的 ...

  7. Linux进程调度

    原文地址: http://cchxm1978.blog.163.com/blog/static/35428253201092910491682/ 相当不错的文章,读了后收藏,多谢博主分享! ----- ...

  8. Poj OpenJudge 百练 Bailian 1008 Maya Calendar

    1.Link: http://poj.org/problem?id=1008 http://bailian.openjudge.cn/practice/1008/ 2.content: Maya Ca ...

  9. Mysql slave 同步错误解决

    涉及知识点 mysql 主从同步 ,参考: MySQL数据库设置主从同步 mysqlbin log查看, 参考:MySQL的binlog日志 解决slave报错, 参考: Backup stopped ...

  10. Git 安装与使用（二）

    一.分支管理 在Git里,master是主分支,同时可以创建其他分支,支持各分支合并到主分支上,基本命令如下 1.创建分支 git checkout -b dev       创建dev分支,并切换到 ...