导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用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. 让你的javascript函数拥有记忆功能,降低全局变量的使用

    考虑例如以下场景:假如我们须要在界面上画一个圆,初始的时候界面是空白的.当鼠标移动的时候,圆须要尾随鼠标移动.鼠标的当前位置就是圆心.我们的实现方案是:假设界面上还没有画圆,那么就新创建一个:假设已经 ...

  2. Esper学习之六:EPL语法(二)

    中秋三天,说闲也不闲,调调工作的代码,倒还解决不少问题.不过也是因为最近工作忙的缘故,Esper被我冷落不少日子了,趁着今天最后一天,赶紧写一篇出来. 从上一篇开始说EPL的语法,主要是关于注解的.今 ...

  3. react redux 相关技术

    React全都是围绕着组件的, 所以React基础也就是:写组件的jsx.组件的生命周期以及组件的属性和状态.jsx,只要是用过html模板的分分钟就能写了: 所谓生命周期就是组件在创建.销毁.更新阶 ...

  4. C# 调用存储过程传入表变量作为参数

    首先在SQLServer定义一个自定义表类型: USE [ABC] GO CREATE TYPE [ABC].[MyCustomType] AS TABLE( ) NOT NULL, ) NULL, ...

  5. SCII码表 键盘常用ASCII码

    ASCII码对照表   在Web开发时,如下的ASCII码只要加上&#和;就可以变成Web可以辨认的字符了在处理特殊字符的时候特别有用,如:' 单引号在数据库查询的时候是杀手,但是如果转换成' ...

  6. spring 配置和实例

    Spring 是一个开源框架.Spring 为简化企业级应用开发而生. 使用 Spring 可以使简单的 JavaBean 实现以前只有 EJB 才能实现的功能.Spring 是一个 IOC(DI) ...

  7. VS2010编译时出现错误1 error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏

    需要下载VS2010的补丁包

  8. [Linked List]Insertion Sort List

    Total Accepted: 59422 Total Submissions: 213019 Difficulty: Medium Sort a linked list using insertio ...

  9. ado.net实现一个通知公告功能

    一.建立相应的数据库,此处就不多说了,相信大家都非常了解

  10. asp.net后台向前端输出js脚本的三种方法

    //这个方法最快,因为它会输出到html标签之前 Response.Write("<script type='text/javascript'>alert('这个最快')< ...