当前位置：科普知识站>IT科技>

怎么用div+css制作导航下拉菜单

IT科技阅读(1.2W)

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

方法

打看dreamweaver或其它编辑器，创建一个名为nav的导航菜单

现在为nav添加样式,首先去掉默认的margin和padding，再去掉<ul>< li>标签的list-style样式和<a>标签的默认下划线。

像这样，一个菜单横向菜单就建好了，下来给栏目一，栏目二，栏目三，添加二级下拉菜单

添加完二级栏目后，现在开始添加css样式，首先给<li>标签下的<ul>标签添加相对定位，再去除之下<li>标签的做浮动样式，再适当修改<a>标签

接下来隐藏掉二级下来菜单，并给它添加鼠标滑动效果，使得当鼠标滑动到主栏目时，二级下来菜单显示。完成编辑

扩展阅读，以下内容您可能还感兴趣。

如何使用HTML和CSS制作下拉菜单

使用HTML和CSS制作下拉菜单的方法如下：

1、编写带有div导航的html代码：

2、使用class=“nav”属性的‘div’标签作为菜单的容器。在截图中，在图示的HTML代码中，一个简单的无序列表（ul）来表示主菜单项。

3、在主菜单区域中添加链接。在本步骤中，在无序列表（ul）每一项上添加链接。

4、在“关于我们（About Us）”下方LI标签内添加一个无序列表，它代表其子菜单的链接。

5、制作导航css：

如何用DIV+CSS做漂亮的横排导航栏

先码好导航栏所需要的基本的HTML代码

这个就不必多说具体的代码如下：

<html>

<head>

<title>横向导航栏</title>

<style>

</style>

</head>

<body>

<ul>

</ul>

</div>

</body>

</html>

下面我们通过CSS 来改变他的样式。

首先我们先让导航在浏览器的中间。不过在让他居中前得先设置一个宽度，没有宽度就没法居中，这个的原因我就不用赘述了吧！

现在常用的网站宽度为960或980（当然也有其他的，一些网站会根据访客的显示器大小有不同宽度的样式，原因我就不在这多废话了）我们在这就用980吧。

方法是在<style></style>之间加入如下代码来改变他的宽度。为了让结果明显，我们给它又加了一个边框。

<style>

<!--

.nav ul{

width:980px;/*设置元素宽度为980px*/

border:1px solid #000;/*设置一个颜色为#000，宽度为1px的边框*/

}

-->

</style>

接下来我们让他居中。我们在样式中加入以下代码。

.nav ul{

width:980px;/*设置元素宽度为980px*/

border:1px solid #000;/*设置一个颜色为#000，宽度为1px的边框*/

margin:0px auto 0px auto;/*也可以简写为margin:0 auto*/

}

因为我们要做的是横向的导航栏，所以现在我们要把它变成横向排列。我们在样式中加入以下代码。

.nav ul li{

float:left;/*让li元素左浮动*/

}

我们看到测试结果如图4。

边框之所以挤到一起了是因为浮动以后 li就变成了联级元素，就没有宽和高了，所以也就没法把边框撑起来了啊。（具体的原因想知道可以百度）当然稍后我们可以给ul或.nav加上高度。

接下来，我们通过给元素<a>添加样式，让他更美观。加入以下代码。

.nav ul li a{

width:80px;/*设置元素宽为80px*/

height:28px;/*设置高度为28px*/

line-height:28px;/*设置行距为28px，让文字在每行的中间位置*/

background:red;/*设置元素的背景为红色*/

color:#FFF;/*文字颜色是白色*/

margin:5px 10px;

font-size:12px;/*用12号字*/

display:block;/*这个比较关键，因为a本身就是联级元素，本身不具有宽高，用这个把它变成块级元素，这样前面设置的宽和高就能起作用了*/

text-align:center;/*让文本居中*/

text-decoration:none; /*去掉下划线*/

}

我们再加入点互动，当访客鼠标放到某个元素上的时候，这个元素要有别于其他元素。要实现这个我们就要用到:hover这个伪类。在样式中加入以下代码。

.nav ul li a:hover{ /*这个大概的意思就是当鼠标放到这个a元素的上面时，这个a元素的样式就按下面的代码执行*/

width:78px;

height:26px;

line-height:28px;

border:1px solid red;

color:red;

background:#FFF;

}

最后稍微整理一下代码

.nav ul{

width:980px;

margin:0px auto;

height:38px;

padding:0;

}

.nav ul li{

float:left;

}

.nav ul li a{

width:80px;

height:28px;

line-height:28px;

background:red;

color:#FFF;

margin:5px 10px;

font-size:12px;

display:block;

text-align:center;

text-decoration:none;

}

.nav ul li a:hover{

width:78px;

height:26px;

line-height:28px;

border:1px solid red;

color:red;

background:#FFF;

}

看看效果，成功没？

思路就是这样的，其中还可以再加一些自己的元素，比如背景图片之类，效果就更好了。

用 DIV+CSS+JQuery 实现导航条垂直下拉效果

.navgation{marign:0;padding:0;list-style-type:none;}

.navgation li {display:inline;}

.nvagation a{padding:3px 6px;background-color:blue;color:white;text-decoration:none;}

.nvagation a:hover {background-color:white;color:blue;text-decoration:underline;}

.nvagation div{display:none;}

</style>

$(document).ready(function(){

$(".navgation a").each(function(){

var this_div = $(".navgation div");

var _inx = $(".navgation a").index(this);

$(this).hover(

function(){this_div.eq(_inx).slideToggle();},

function(){this_div.eq(_inx).slideToggle();}

);

});

</script>

<li><a href="#">链接1</a><div>这里放下拉内容</div></li>

</ul>

哈哈，深夜了，写得真是烂。。。追问对不起我是菜鸟用你写的这个预览居然是空白页不知道为什么

您能不能把总个代码写出来= =追答

.navgation{marign:0;padding:0;list-style-type:none;position:relative;}

.navgation li {float:left;}

.navgation a{padding:3px 6px;background-color:orange;color:white;text-decoration:none;float:left;height:24px;}

.navgation a:hover {background-color:white;color:blue;text-decoration:underline;}

.navgation div{display:none;position:absolute;top:30px;l}

$(document).ready(function(){

$(".navgation a").each(function(){

var this_div = $(".navgation div");

var _inx = $(".navgation a").index(this);

$(this).hover(

function(){this_div.eq(_inx).slideToggle();},

function(){this_div.eq(_inx).slideToggle();}

);

});

链接1这里放下拉内容1

链接2这里放下拉内容2

链接3这里放下拉内容3

链接4这里放下拉内容4

链接5这里放下拉内容5

哈哈，不好意思，之前写的标签闭合有问题。

如何用div+css做漂亮的横排导航栏

看你是直接在div里面做css格式还是额外调用css，建议是后者,这样看着比较简洁。

html引入外部css:

比如你的html文件里有一个div模块

</div>

在另外一个css文件里布置格式

#daohang{

height: 30px;

background-color: white;

border: solid 1px yellow;

margin: 2px 0;

line-height: 30px;

.........

}

依次类推设置3个子div的格式。class用于设置3个子div的共同格式；

比如设置共同字体：

.geshi{

font-family: 微软雅黑;

}

需要什么样的排版格式百度下怎么设置就行了上面这个主要是框架,具体的格式就在css文件里面设置,什么颜色\背景\字体\位置等等都在css里设置就行,html的div里面不需做什么操作

用div+css做多级下拉菜单怎么做

给你个源码作为参考用纯CSS+HTML编写而成

____________________________________

Suckerfish下拉菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Untitled Page</title>

ul.nav,ul.nav ul

{

margin:0;

padding:0;

list-style-type:none;

font:left;

}

ul.nav li

{

float: left;

width: 8em;

background-color: #8BD400;

}

ul.nav li ul

{

width: 8em;

position: absolute;

left: -999em;

}

.nav li:hover ul

{

left: auto;

}

ul.nav a

{

display: block;

color: #2B3F00;

text-decoration: none;

padding: 0.3em 1em;

border-right: 1px solid #486B02;

border-left: 1px solid #E4FFD3;

}

ul.nav li li a

{

border-bottom: 1px solid #486B02;

border-top: 1px solid #486B02;

border-right: 0;

border-left: 0;

}

ul.nav li:last-child a

{

border-right: 0;

border-bottom: 0;

}

ul a:hover, ul a:focus

{

color: #E4FFD3;

background-color: #6DA203;

}

</style>

</head>

<body>

<li><a href="#">Product</a>

<ul>

<li><a href="#">SilverBack</a></li>

</ul>

</li>

<li><a href="#">Services</a>

<ul>

<li><a href="#">Design</a></li>

<li><a href="#">Development</a></li>

<li><a href="#">Consultancy</a></li>

</ul>

</li>

<li><a href="#">Contact Us</a></li>

</ul>

</body>

</html>

标签：下拉菜单 divcss 导航

图文推荐