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


导航菜单是每个网站所必备的功能，也是每个学习制作网站的朋友所必须接触的，如何用css样式制作一个简单漂亮的二级下拉菜单呢，下来小编就一步一步教大家来制作横排二级下拉菜单，让我共同来学习吧。
首页我们打看dreamweaver或其它编辑器，创建一个名为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>

如下图所示：

CSS技巧分享：如何用css制作横排二级下拉菜单
现在我们为nav添加样式,首先去掉默认的margin和padding，再去掉



<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技巧分享：如何用css制作横排二级下拉菜单
添加完二级栏目后，现在我们开始添加css样式，首先给


  • 标签下的

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
<html xmlns="http://www.w3.org/1999/xhtml">
    
<head>
    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
<title>横排二级下拉菜单</title>
    
<style type="text/css">
    
* { margin:0; padding:0;}
    
ul, li { list-style:none;}
    
a { text-decoration:none;}
    
.nav { border:2px solid #ccc; border-right:none; overflow:hidden; float:left; margin:100px 0 0 300px;}
    
.nav ul li { float:left;}
    
.nav ul li a { width:120px; height:40px; text-align:center; line-height:40px; display:block; border-right:2px solid #ccc; background:#eee; color:#666;}
    
.nav ul li a:hover{ color:#f00; }
    
.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; }
    
</style>
    
</head>
    
<body>
    
<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>
    
</body>
    
</html>

    • CSS技巧分享：如何用css制作横排二级下拉菜单的更多相关文章

    1. 推荐10个 CSS3 制作的创意下拉菜单效果

      下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

    2. Excel应用----制作二级下拉菜单【转】

      应用: 原始数据源是两列的源数据,那该如何制作二级下拉菜单, 当然可以将这两列的数据源,转换成上面的那种格式,再用上面的方法来制作. 今天教大学的方法是直接通过这种两列式的数据源来制作下拉菜单,如果A ...

    3. HTML+CSS实现导航栏二级下拉菜单完整代码

      工具是vs code 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

    4. jQuery制作水平多级下拉菜单

      本篇体验使用jQuery制作水平的.多级的.下拉菜单. 下拉菜单的html部分如下. <body> <nav class="main-nav"> <u ...

    5. css中overflow:hidden的属性 可能会导致js下拉菜单无法显示

      css中overflow:hidden属性导致ExtJS中无法显示下拉滚动条 overflow属性: visible 默认.内容不会被修剪,会呈现在元素之外. hidden 内容会被修剪,但是浏览器不 ...

    6. jQuery制作一个多彩下拉菜单按钮

      最终效果图: html代码: <div id="list"> <div id="btn"> <div class="ic ...

    7. 何使用CSS写出一个下拉菜单。

      导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢? 下面为大家分享一下我的经验 方法步骤: 第一步  : 首页我们打开Subli ...

    8. Web前端开发实战1：二级下拉式菜单之CSS实现

      二级下拉式菜单在各大学校站点.电商类站点.新闻类站点等大型?站点非经常见,那么它的实现原理是什么呢? 学习了Web前端开发的知识后,我们是能够实现这种功能的.复杂的都是从基础效果上加入做出来的.原理和 ...

    9. Web前端开发实战6：CSS实现导航菜单结合二级下拉式菜单的简单变换

      前面几篇博文都在讲导航菜单和二级下拉式菜单,事实上有非常多方法都能够实现的.详细的情况还要视情况而定. 在后面学习到jQuery框架之后,会有更丰富的动画效果.因为在学习Ajax和jQuery的初步阶 ...

    随机推荐

    1. 与Boss大雷探讨JavaWeb开发、电商与网络安全

      最近几个月,与公司Boss大雷交流得比较多,也学习到了很多新的东西,了解到了一些没有接触和实践的业界做法. 简要介绍下Boss,姓雷,定居武汉好几年了,之前在一号店.UC.支付宝干过,有丰富的电商-支 ...

    2. 【U014】热浪(前向星存储方法)

      Time Limit: 1 second Memory Limit: 128 MB [问题描述] 德克萨斯纯朴的民眾们这个夏天正在遭受巨大的热浪!!!他们的德克萨斯长角牛吃起来不错,可是他们并不是很擅 ...

    3. sqlserver中的存储过程 函数 事物 索引及视图

                                             存储过程和函数具体的区别: 核心提示:本质上没区别.只是函数有限制只能返回一个标量,而存储过程可以返回多个.并且函数是可以 ...

    4. Spring4+Springmvc+quartz实现多线程动态定时调度

      scheduler定时调度系统是大多行业项目都需要的,传统的spring-job模式,个人感觉已经out了,因为存在很多的问题,特别是定时调度的追加.修改.删除等,需要修改xml,xml的配置生效无非 ...

    5. win10 uwp 线程池

      原文:win10 uwp 线程池 如果大家有开发 WPF 或以前的程序,大概知道线程池不是 UWP 创造的,实际上在很多技术都用到线程池. 为什么需要线程池,他是什么?如何在 UWP 使用线程池,本文 ...

    6. .net remoting 使用事件

      原文:.net remoting 使用事件 在RPC如果需要使用事件,相对是比较难的.本文告诉大家如何在 .net remoting 使用事件. 目录 使用 Channel 序列化 开发建议 修复异常 ...

    7. ActiveReports 报告应用程序教程 (2)---上市类报告

       大多数数字在报告中系统类报告列表.实例:客户名单.产品列表.设备清单.采购清单.优惠券.商品发票.工作人员清点等..根据报告,查看类别列表相对简单.但,分丰富,在清单类报表中能够增加数据统计.数 ...

    8. 简单几步教你实现移动硬盘PE、装win7/vista! 一盘在手，系统无忧！

      第一步:格式化u盘成为ntfs格式.(以下同样适用于移动硬盘)提供两个方法:,方法一是格式化成fat32,再到命令提示符即俗称的dos窗口运行convert.方法二在xp下,点击u盘所在盘符,选择属性 ...

    9. lua--从白开始（2）

      眼下lua最新的版本号,5.2.3. 这个例子是一个简单lua分析器,来源自<Lua游戏开发实践指南>. 测试程序的功能:解决简单lua说明,例如:print("Hello wo ...

    10. 阐述php(五岁以下儿童) 注意事项和使用功能

      1.函数声明 <?php /** * function 函数名(參数1, 參数2.... ){ * 函数体; * 返回值; * } */ $sum = sum(3, 4); echo $sum; ...