1.行内式，就是直接在网页中加入css样式表，在标记的后面加上style属性来设定css样式。
如：
<p style="font-size:12pxcolor:#000">行内式测试</p>
注：读取速度最快，但维护最麻烦
2.嵌入式,在页面的<head>和</head>之间。
如：
<style type="text/css">
p{margin: 0padding: 0color:red}
</style>
注：读取速度居中，但维护也居中
3.连接式
<link href="style.css" rel="stylesheet" type="text/css"/>
注：读取速度不及上面2种，但维护较方便；网页设计师最常用~
一、首先，打开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实现。
这是我写的一个导航，你自己看吧。li并列应该定义其float属性为left。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>menu </TITLE>
</HEAD>
<style>
body{
padding-top:200px
text-align:center
font-size:13px
}
#content{
margin:0 auto
text-align:left
width:720px
background:orange
background-color:black
}
ul{
margin-top:1px
list-style:none
}
#father li{
float:left
position:relative
margin-right:10px
width:120px
text-align:center
border:1px solid black
border-bottom:none
}
#father li a:link,#father li a:visited{
line-height:30px
color:darkred
font-weight:bold
}
#father li ul *{
float:none
margin-right:0px
padding:0
color:none
width:90px
background-color:orange
border:none
}
.child{
position:absolute
top:29px
right:0px
display:none
}
#father li ul li a:link,#father li ul li a:visited{
margin:1px
color:blue
text-decoration:none
font-weight:normal
line-height:20px
}
#father li ul li a:hover{
background-color:white
}
</style>
<script>
function showMenu(emt,id1,id2){
document.getElementById(id1).style.textDecoration = "none"
document.getElementById(id1).style.color = "white"
document.getElementById(id2).style.display = "block"
emt.style.backgroundColor = "orange"
emt.style.borderColor = "white"
}
function hiddenMenu(emt,id1,id2){
document.getElementById(id1).style.textDecoration = "underline"
document.getElementById(id1).style.color = "darkred"
document.getElementById(id2).style.display = "none"
emt.style.backgroundColor = "black"
emt.style.borderColor = "black"
}
</script>
<BODY>
</table>
<div id="content">
<ul id="father">
<li onmouseover="showMenu(this,'a1','ul1')" onmouseout="hiddenMenu(this,'a1','ul1')">
<a id="a1" href="#">主页</a>
<ul id="ul1" class="child">
<li><a href="#">文字测试</a></li>
<li><a href="#">使用中文字符</a></li>
<li><a href="#">你看可以吗</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
<li><a href="#">Item 6</a></li>
<li><a href="#">Item 7</a></li>
</ul>
</li>
<li onmouseover="showMenu(this,'a2','ul2')" onmouseout="hiddenMenu(this,'a2','ul2')">
<a id="a2" href="#">程序设计</a>
<ul id="ul2" class="child">
<li><a href="#">JAVA</a></li>
<li><a href="#">C/C++</a></li>
<li><a href="#">C#.NET</a></li>
<li><a href="#">游戏开发</a></li>
<li><a href="#">汇编</a></li>
</ul>
</li>
<li onmouseover="showMenu(this,'a3','ul3')" onmouseout="hiddenMenu(this,'a3','ul3')">
<a id="a3" href="#">网页技术</a>
<ul id="ul3" class="child">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">XML</a></li>
<li><a href="#">ASP</a></li>
<li><a href="#">JSP</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Perl</a></li>
</ul>
</li>
<li onmouseover="showMenu(this,'a4','ul4')" onmouseout="hiddenMenu(this,'a4','ul4')">
<a id="a4" href="#">动态网页</a>
<ul id="ul4" class="child">
<li><a href="#">ASP</a></li>
<li><a href="#">JSP</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Perl</a></li>
</ul>
</li>
<li onmouseover="showMenu(this,'a5','ul5')" onmouseout="hiddenMenu(this,'a5','ul5')">
<a id="a5" href="#">关于我</a>
<ul id="ul5" class="child">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
</li>
</ul>
<div>
</BODY>
</HTML>
