导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢?

下面为大家分享一下我的经验

方法步骤:

第一步  :

首页我们打开Sublime Text或其它编辑器,创建一个名为nav的导航菜单

<div class="nav">

<ul>

<li><a href="#">栏目一</a></li>

<li><a href="#">栏目二</a></li>

<li><a href="#">栏目三</a></li>

<li><a href="#">栏目四</a></li>

<li><a href="#">栏目五</a></li>

</ul>

</div>

如下图所示:

第二步:

现在我们为nav添加样式,首先去掉默认的margin和padding,

再去掉<ul>< li>标签的list-style样式和<a>标签的默认下划线。

接下来再添加适当的样式(根据实际需要添加)进行美化,如一下样式:

页面预览效果如图所示:

第三步: 

像这样,一个菜单横向菜单就建好了,下面我们给栏目一,栏目二,栏目三,添加二级下拉菜单

代码如下:

<div class="nav">
    <ul>
      <li><a href="#">栏目一</a>
       <ul>
              <li><a href="#">二级栏目</a></li>
              <li><a href="#">二级栏目</a></li>
              <li><a href="#">二级栏目</a></li>
              <li><a href="#">二级栏目</a></li>
          </ul>
      </li>
      <li><a href="#">栏目二</a>
        <ul>
              <li><a href="#">二级栏目</a></li>
              <li><a href="#">二级栏目</a></li>
              <li><a href="#">二级栏目</a></li>
              <li><a href="#">二级栏目</a></li>
          </ul>
      </li>
      <li><a href="#">栏目三</a>
       <ul>
           <li><a href="#">二级栏目</a></li>
              <li><a href="#">二级栏目</a></li>
              <li><a href="#">二级栏目</a></li>
              <li><a href="#">二级栏目</a></li>
              <li><a href="#">二级栏目</a></li>
          </ul>
      </li>
      <li><a href="#">栏目四</a></li>
      <li><a href="#">栏目五</a></li>
    </ul>
 </div>

第四步: 

添加完二级栏目后,现在我们开始添加css样式,

首先给<li>标签下的<ul>标签添加相对定位,

再去除之下<li>标签的做浮动样式,再适当修改<a>标签,如一下样式:

代码如下:

.nav ul li ul {

  position:absolute;

}

.nav ul li ul li {

  float:none;

}

.nav ul li ul li a {

  border-right:none;

  border-top:1px dotted #ccc;

  background:#f5f5f5;

}

页面刷新效果如图:

第五步: 

接下来我们隐藏掉二级下来菜单,并给它添加鼠标滑动效果,使得当鼠标滑动到主栏目时,二级下来菜单显示,样式如下:

.nav ul li ul {

  position:absolute;

  display:none;

}

.nav ul li ul li {

  float:none;

}

.nav ul li ul li a {

  border-right:none;

  border-top:1px dotted #ccc;

  background:#f5f5f5;

}

.nav ul li:hover ul{

  display:block;

}

再次预览效果,如下图所示:

第六步: 

至此,横向二级下拉菜单就制作完成了,这里附加上全部代码,以方便各位朋友参考,感谢各位朋友的浏览。

何使用CSS写出一个下拉菜单。的更多相关文章

  1. 怎样用css写出一个下拉菜单

    <style> 2 /* css*/ 3 #body{ 4 float: left; 5 } 6 #xialakuang{ 7 background-color:#f9f9f9; 8 bo ...

  2. 一个用css写出来的下拉菜单

    1 <style> 2 /* css*/ 3 #body{ 4 float: left; 5 } 6 #xialakuang{ 7 background-color:#f9f9f9; 8 ...

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

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

  4. CSS技巧分享:如何用css制作横排二级下拉菜单

    原文:CSS技巧分享:如何用css制作横排二级下拉菜单 导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢,下来小编就一步一步教大 ...

  5. css用hover制作下拉菜单

    首先我们的需求就是 制作一个鼠标移动到某个区域就会有下拉菜单的弹出,这样会有更多的子类内容,示例代码如下: <!DOCTYPE html> <html lang="en&q ...

  6. swift 第九课 用tableview 做一个下拉菜单Menu

    写到这里的时候,自己这个项目已经完成了一半左右,项目进度自己还是挺满意.今天又有一个新的布局,要实现个下拉菜单,刚开始写的时候,觉得会很容易,后来发现也是小错不断, 我想自己限制的自己属于写博客的初期 ...

  7. Css之导航栏下拉菜单

    Css: /*下拉菜单学习-2017.12.17 20:17 added by ldb*/ ul{ list-style-type:none; margin:; padding:; overflow: ...

  8. 纯css和js版下拉菜单

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. css实现hover显示下拉菜单

    原理比较简单,首先先隐藏下拉菜单即display:none,当鼠标hover后,设置display:block. <style> .menu-title { postion: relati ...

随机推荐

  1. cocos2dx 3.1从零学习(三)——Touch事件(回调,反向传值)

    第三讲 Touch 前面两篇我们学习的内容,足够我们做一款简单的小游戏.也能够说,我们已经入门了,能够蹒跚的走路了. 本篇将解说cocos2dx中非常重要的touch回调机制.你肯定记得第一章做定时器 ...

  2. HDUJ 1754 I Hate It

    I Hate It Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...

  3. Spting使用memcached

    applicationContext.xml配置文件: <?xml version="1.0" encoding="UTF-8"?> <bea ...

  4. android——ObjectAnimator动画

    在新的android sdk中谷歌为我们提供了新的动画实现方式.化繁为简.将以前的animation动画进一步封装,使用起来更加方便. 先来看XML文件: <RelativeLayout xml ...

  5. Cisco密码恢复

    1.利用超级终端连接路由器,重新启动路由器,按CTRL+BREAK进入ROM监控模式  注:配置寄存器(2B)第六位控制是否读取NVRAM中的配置文件 2.修改配置寄存器:2600系列:1): con ...

  6. InvokeRequired方法和Invoke函数

    c#中禁止跨进程直接访问控件,为了解决这个问题,出现了InvokeRequried属性,当一个控件的InvokeRequried属性值为真时,说明有控件外的线程想要访问它.这时便会调用到Invoke方 ...

  7. R - 一只小蜜蜂...(第二季水)

    Description          有一只经过训练的蜜蜂只能爬向右侧相邻的蜂房,不能反向爬行.请编程计算蜜蜂从蜂房a爬到蜂房b的可能路线数.         其中,蜂房的结构如下所示.     ...

  8. jquery操作session的方法

    jquery.session.js使用  //此方法在java中不能使用 // jquery.session.js 简单使用方法 添加数据    $.session.set('key', 'value ...

  9. struts2开发经验小结(method="{1}"等)

    这里的{1}表示接收前面action里通过通配符传来的值,例如你配置的是<action name="*Crud" class="example.Crud" ...

  10. php 函数之 )_each()list()implode()explode()in_array()

    <?php /* implode() 把数组组合成字符串 explode() 把字符串分割成数组 in_array() 检测内容是否在数组中 each()把数组元素拆分成新的数组 list() ...