导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用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改变select的下拉菜单

    select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px #000; /*很关键:将默认的select选择框样式清除*/ appe ...

随机推荐

  1. GPU深度发掘(一)::GPGPU数学基础教程

    作者:Dominik Göddeke                 译者:华文广 Contents 介绍 准备条件 硬件设备要求 软件设备要求 两者选择 初始化OpenGL GLUT OpenGL ...

  2. jquery基本选择器(.class选择器)

    //通过class属性值匹配元素<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...

  3. PL/SQL 中查询CLOB字段内容

    oracle中的clob类型字段不能直接显示出来,需要借助Oracle系统dbms_lob中substr方法处理,如select dbms_lob.substr(clobField) from tab ...

  4. VS中修改站点运行方式(集成 Or 经典)

    以前写过一篇博客使用HttpHander截取用户请求. 写进Web.Config时..运行会报 在集成环境下不能使用站点配置 就想改成经典..但是不会改..还修改过Framework配置什么的.. 那 ...

  5. ural 1269. Obscene Words Filter

    1269. Obscene Words Filter Time limit: 0.5 secondMemory limit: 8 MB There is a problem to check mess ...

  6. 使用mysql_query()方法操纵数据库以及综合实例

    1.利用insert 语句添加记录 <? require('conn.php'); mysql_query( "insert into lyb ( title, content, au ...

  7. VectorDrawable与AnimatedVectorDrawable

    VectorDrawable  Android L开始提供了新的API VectorDrawable 可以使用SVG类型的资源,也就是矢量图.先来一个例子吧. <?xml version=&qu ...

  8. vs2015启动崩溃,wpfgfx_v0400.dll加载D3DCompiler_47.dll失败

    有一段时间没有用vs2015,今天一启动就crash,尝试了以下办法: 1. 卸载掉这段时间安装的一些软件和vs插件 2. 修复安装 3. 卸载.重新安装vs2015 sp2版本 4. devenv. ...

  9. etcd-v2第四集

    coreos把etcd的image放到自家的quay.io,而不是hub.docker,或许是竞争关系,但国内下载quay.io容器极难,反正shadowsocks是下载不了. 幸好有热心爱好者搬运到 ...

  10. CF 24 D. Broken robot

    D. Broken robot 链接. 题意: 一个方格,从(x,y)出发,等价的概率向下,向左,向右,不动.如果在左右边缘上,那么等价的概率不动,向右/左,向下.走到最后一行即结束.求期望结束的步数 ...