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

html-css015

CSS技巧分享：如何用css制作横排二级下拉菜单,第1张

工具/材料

notepad++

浏览器

打开Notepad++，先输入个页面框架

<！DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<hade>

</hade>

<body>

</body>

框架好了，那么就该定义页面的title，关键词keyword，和描述description

<meta charset="UTF-8" content="text/html" http-equiv="content-type">

<title>纯css二级导航下拉菜单</title>

<meta name="keyword" content="搜狗略懂">

<meta name="description" content="描述">

这些内容只能在<head></head>中完成。

定义页面使用的css样式，也是需要在<head>里定义的。

<style type="text/css">

* {

margin:0

padding:0

}

.jiao ul li a:hover{

color:#red

}

ul, li {

list-style:none

}

a {

text-decoration:none

}

.jiao {

border:5px solid #pink

border-right:none

overflow:hidden

float:left

margin:200px 0 0 600px

}

.jiao ul li ul li a {

border-right:solid

border-top:2px dotted #666

background:#black

}

.jiao>ul>li { float:left}

.jiao ul li a { width:150pxheight:80pxtext-align:centerline-height:100pxdisplay:blockborder-right:5px solid #redbackground:#redcolor:#red}

.jiao ul li ul { position:absolutedisplay:none}

.jiao ul li:hover ul{ display:block}

.jiao>ul>li>ul>li { float:none}

<!--nav>ul只选择nav下一级里面的ul元素

nav ul选择nav内所包含的所有ul元素

nav>ul比nav ul限定更严格，必须后面的元素只比前面的低一个级别。

这里根据你的需求来自己定义。

-->

</style>

添加一个DIV标签，在页面中划分出一个块来，用来显示。

div中所用的样式为刚才咱们声明的样式“jiao”这个盒子来描述

然后使用无序标签<ul>+样式<li>来实现模块。

<div class="jiao">

<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>

</div>

放上全部的代码吧，可以参考一下啊，

<!DOCTYPE html >

<html xmlns="http://www.w3.org/1999/xhtml">//允许你通过一个网址来识别你的标记

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<meta name="keyword" content="利用css实现下拉菜单">

<meta name="description" content="搜狗略懂、css分享">

<title>css实现下拉导航栏菜单</title>

<style type="text/css">

* {

margin:0

padding:0

}

.jiao ul li a:hover{

color:#red

}

ul, li {

list-style:none

}

a {

text-decoration:none

}

.jiao {

border:5px solid #pink

border-right:none

overflow:hidden

float:left

margin:200px 0 0 600px

}

.jiao ul li ul li a {

border-right:solid

border-top:2px dotted #666

background:#black

}

.jiao>ul>li { float:left}

.jiao ul li a { width:150pxheight:80pxtext-align:centerline-height:100pxdisplay:blockborder-right:5px solid #redbackground:#redcolor:#red}

.jiao ul li ul { position:absolutedisplay:none}

.jiao ul li:hover ul{ display:block}

.jiao>ul>li>ul>li { float:none}

<!--nav>ul只选择nav下一级里面的ul元素

nav ul选择nav内所包含的所有ul元素

nav>ul比nav ul限定更严格，必须后面的元素只比前面的低一个级别。

这里根据你的需求来自己定义。

-->

</style>

</head>

<body>

<div class="jiao">

<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>

</ul>

</div>

</body>

</html>

如果要添加更多的菜单，只需要后边继续添加<ul>/<li>即可

特别提示

写代码过程中一定要记得换行，开头留空，否则过后找东西，连你自己都不知道写的是什么。何谈从哪里找起？

一、首先，打开dreamweaver或其它编辑器（注：Ctrl+N  新建）

二、接着，写代码

<!doctype html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta 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>

三、最后，效果图

四、注意：这种写法不支持IE6浏览器，IE6只支持a下的hover，所以无法实现正确的显示，但是微软已经将IE6浏览器淘汰了，但是如果您还在使用，那么请添加相应的js实现。

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

<title>竖排菜单</title>

<style>

*{margin:0padding:0}

li{list-style:none}

.nav{height:200pxwidth:400px}

.nav>ul{height:200px}

.nav>ul>li:nth-child(1){width:80pxdisplay:inline}

.nav>ul>li{width:320pxfloat:left}

.nav>ul>li>ul>li{float:leftpadding:0 5px}

</style>

</head>

<body>

<!--nav>ui加高度是清楚浮动，可以自行调整-->

<div class="nav">

<ul>

<li><a href="#">菜单</a></li>

<li>

<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>

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

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

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

</ul>

</ul>

</ul>

</div>

</body>

</html>