li{list-style-type:none; } a{text-decoration:none; } .lanmu{ width:980px; height:120px; border:1px #993399 solid; margin:0 auto; } .lanmu ul { width:900px; height:60px; margin:0 auto; border:1px #9900CC solid; margin-top:30px;
导航菜单是每个网站所必备的功能，也是每个学习制作网站的朋友所必须接触的，如何用css样式制作一个简单漂亮的二级下拉菜单呢
方法
打看dreamweaver或其它编辑器，创建一个名为nav的导航菜单
ie的臭虫而已，swf或select会始终出现在页面最上层，解决方法很简单，给要显示的div加个iframe的背景，如： content 或者你也可以用jquery的bgiframe插件。
现在为nav添加样式,首先去掉默认的margin和padding，再去掉<ul>< li>标签的list-style样式和<a>标签的默认下划线。
*{padding:0;margin:0;}li,ol{list-style-type:none}.nav{margin:20px}li{width:120px;float:left;cursor:pointer;height:30px;line-height:30px;border:1px solid red;margin:10px -1px 5px 10px;text-align:center}li ul{display:none}li:hov
像这样，一个菜单横向菜单就建好了，下来给栏目一，栏目二，栏目三，添加二级下拉菜单
div+CSS自制导航条，简单的小例子： * {margin:0; padding:0; list-style:none;} #ul1 {width:954px; margin:10px auto;} #ul1 li {width:104px; height:36px; border:1px solid #999; float:left; position:relative;} #ul1 li span {position:
添加完二级栏目后，现在开始添加css样式，首先给<li>标签下的<ul>标签添加相对定位，再去除之下<li>标签的做浮动样式，再适当修改<a>标签
不要设置高度就可以了。 无标题文档 #container{margin:0px auto;width:800px;} #header{width:800px;background:url(fj/bg.gif) repeat-x;} #daoh{width:800px;} #nav{ } #nav ul{margin:0;padding:0;list-style:none;text-align:center;} #nav
接下来隐藏掉二级下来菜单，并给它添加鼠标滑动效果，使得当鼠标滑动到主栏目时，二级下来菜单显示。完成编辑
CSS中设置li中设置display:none。然后设置hover:display:block;就可以实现滑动时出现。方法是这样的，自己写出来比较有成就感。
扩展阅读，以下内容您可能还感兴趣。
如何使用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>
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">导航1</a></li>
<li><a href="#">导航2</a></li>
<li><a href="#">导航3</a></li>
<li><a href="#">导航4</a></li>
<li><a href="#">导航5</a></li>
<li><a href="#">导航6</a></li>
</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 实现导航条垂直下拉效果
<style type="text/css">
.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>
<script type="javascript/text'>
$(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>
<ul class="navgation">
<li><a href="#">链接1</a><div>这里放下拉内容</div></li>
<li><a href="#">链接1</a><div>这里放下拉内容</div></li>
<li><a href="#">链接1</a><div>这里放下拉内容</div></li>
<li><a href="#">链接1</a><div>这里放下拉内容</div></li>
<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:
<link rel="stylesheet" href="文件路径/文件名.css">
比如你的html文件里有一个div模块
<div id ="daohang">
<div id = "daohang1" class =“geshi”>导航1</div>
<div id ="daohang2" class =“geshi”>导航2</div>
<div id ="daohang3" class =“geshi”>导航3</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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<style type="text/css">
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>
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Product</a>
<ul>
<li><a href="#">SilverBack</a></li>
<li><a href="#">Font Deck</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>
声明：本文由用户 CHENGJIANBIN 上传分享，本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:0731-84117792 E-MAIL:11247931@qq.com
