一.问题描述

　　做一个类似校园网首页，主要是导航栏的设置，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. 怎么改svn的登陆账号

    svn 我想大家都很熟悉.用的也很多.可是上次遇到一个问题 ,就是用别人的svn下载的代码.选择了记住账号密码.结果提交的时候 还是用别人的不大好.结果就想改成自己的账号.第一次改 找了半天.今天给大 ...

  2. CSS之图片旋转

    主方法为: var Img = function() { var T$ = function(id) { return document.getElementById(id); } var ua = ...

  3. JAVA之Switch语句

    switch case语句是用来判断case后面的表达式是否与switch的表达式一致,符合的话就执行case语句,不符合则break跳出.而default是当没有符合case的条件下执行的(它不用b ...

  4. 【SQLServer】将Job运行结果发送电子邮件通知用户

    SQLServer2005/2008数据库邮件功能: 1. 启用数据库邮件功能:打开SQL Server 2005 外围应用配置器,选择“功能的外围应用配置器”,选择“数据库邮件”,勾选“启用数据库邮 ...

  5. [求助]谁能给我讲解一下，iOS编程要如何实时显示采集到的图像？？？

    rt,最近搞一个高清图传,本着自(bu)主(mai)创(da)新(jiang)的原则,打算利用手中的iPad当作辅助飞行屏幕,USB传输数据.再说某疆图传7999(还只支持自家云台录像拍照),哪是我这 ...

  6. 为什么要使用jQuery?

    首先必须得了解为什么要学习JQuery,JQuery有哪些优点,当然是相对于传统的Javascript和DOM来说了,现在将JQuery的优势总结如下: 1,轻量级. JQuery非常小,压缩包只有1 ...

  7. Amoeba For MySQL入门：实现数据库水平切分

    当系统数据量发展到一定程度后,往往需要进行数据库的垂直切分和水平切分,以实现负载均衡和性能提升,而数据切分后随之会带来多数据源整合等等问题.如果仅仅从应用程序的角度去解决这类问题,无疑会加重应用程度的 ...

  8. htm5实现视差动画

    requestAnimationFrame.js window.requestAnimFrame = (function() { return window.requestAnimationFrame ...

  9. 长度有限制的字符串hash函数

    长度有限制的字符串hash函数 DJBHash是一种非常流行的算法,俗称"Times33"算法.Times33的算法很简单,就是不断的乘33,原型如下 hash(i) = hash ...

  10. alter和alert的一些问题

    今天在Java学习群里看到有人问:用alert能不能修改表结构?我第一反应是,alert是弹窗啊,怎么修改表结构?后来再看才知道,是那人打错了!我也晕了一下,还是记一下吧!alter是修改表结构的,a ...