ul {margin:0padding:0}
ul li {list-style-type:none}
</style>
<ul>
<li>一</li>
<li>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li>二</li>
<li>三</li>
<ul>
为dl标签设置浮动即可啊
范例代码如下（在实际开发当中，记得先引入CSS重置文件，此处只给出的是核心功能代码）
<style>.list {
width: 800px
height: 400px
border: 4px solid black
}
.list dl {
float: left
width: 300px
height: 200px
border: 2px solid red
}
</style>
<div class="list">
<dl>
<dt>自定义列表的标题</dt>
<dd>自定义列表的内容</dd>
</dl>
<dl>
<dt>码匠</dt>
<dd>h5course</dd>
</dl>
</div>
做网页布局之前建议先掌握盒模型、浮动等相关知识。可以借助《HTML5布局之路》等书籍进行系统化的学习。
参考一下这个<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--定义过渡型DOCTYPE-->
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312"><!--定义名字空间-->
<head>
<title>二级菜单</title><!--标题栏-->
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" /><!--定义语言编码-->
<meta http-equiv="Content-Language" content="gb2312" /><!--针对老版浏览器定义语言编码-->
<<meta name="description" content="下拉菜单,CSS,布局" /><!--简介-->
<meta content="下拉,菜单,CSS,布局" name="keywords" /><!--关键词-->
<!--CSS样式开始-->
<style type=text/css>
*{
margin:0
padding:0
border:0
}
html{
background:#bfc4c7/*背景颜色*/
}
body{
font:12px/150% '宋体'
margin:0 auto
width:770px
text-align:center
}
#menu,#nav,#footer{
clear:both
}
#nav{
padding-left:20px
text-align:left
background:#a60
}
#footer{
background:#a30
}
#logo,#banner,#mail,#left,#middle,#right{
float:left
width:180px
background:#f00
}
#logo,#banner,#mail{
height:60px
}
#banner{
width:468px
background:#f60
}
#mail{
width:122px
background:#f90
}
#left,#right{
width:200px
}
#left{
background:#093
}
#middle{
width:370px
background:#063
}
#right{
background:#033
}
/*menu部分*/
#menu{
margin:0
position:relative
width:770px!important
}
#menu ul{
list-style:none
}
#menu li {
float:left
position:relative
}
#menu ul ul {
visibility:hidden
position:absolute
left:0px
top:30px
}
#menu table{
position:absolute
left:0
top:0
}
#menu ul li:hover ul,#menu ul a:hover ul{
visibility:visible
}
#menu a{
display:block
text-align:center
text-decoration:none
width:77px
height:30px
color:#000
line-height:30px
background:#c9c9a7
}
#menu a:hover{
color:#fff
background:#b3ab79
}
#menu ul ul li {
clear:both
text-align:left
}
#menu ul ul li a{
display:block
width:77px
height:30px
background:#faeec7
color:#000
}
#menu ul ul li a:hover{
background:#dfc184
color:#000
}
</style><!--CSS样式结束-->
</head><!--网页头部结束-->
<body><!--网页主体开始-->
<div id="menu">
<ul>
<li>
<a href="">第一分类<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]>
<table>
<tr>
<td><![endif]-->
<ul>
<li><a href="">XHTML</a></li>
<li><a href="">CSS</a></li>
<li><a href="">PHP</a></li>
<li><a href="">MySQL</a></li>
<li><a href="">Fireworks</a></li>
<li><a href="">Photoshop</a></li>
<li><a href="">Flash</a></li>
<li><a href="">Illustrator</a></li>
</ul><!--[if lte IE 6]>
</td>
</tr>
</table>
</a><![endif]-->
</li>
<li>
<a href="">第一分类<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]>
<table>
<tr>
<td><![endif]-->
<ul>
<li><a href="">XHTML</a></li>
<li><a href="">CSS</a></li>
<li><a href="">PHP</a></li>
<li><a href="">MySQL</a></li>
<li><a href="">Fireworks</a></li>
<li><a href="">Photoshop</a></li>
<li><a href="">Flash</a></li>
<li><a href="">Illustrator</a></li>
</ul><!--[if lte IE 6]>
</td>
</tr>
</table>
</a><![endif]-->
</li>
<li>
<a href="">第一分类<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]>
<table>
<tr>
<td><![endif]-->
<ul>
<li><a href="">XHTML</a></li>
<li><a href="">CSS</a></li>
<li><a href="">PHP</a></li>
<li><a href="">MySQL</a></li>
<li><a href="">Fireworks</a></li>
<li><a href="">Photoshop</a></li>
<li><a href="">Flash</a></li>
<li><a href="">Illustrator</a></li>
</ul><!--[if lte IE 6]>
</td>
</tr>
</table>
</a><![endif]-->
</li>
<li>
<a href="">第一分类<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]>
<table>
<tr>
<td><![endif]-->
<ul>
<li><a href="">XHTML</a></li>
<li><a href="">CSS</a></li>
<li><a href="">PHP</a></li>
<li><a href="">MySQL</a></li>
<li><a href="">Fireworks</a></li>
<li><a href="">Photoshop</a></li>
<li><a href="">Flash</a></li>
<li><a href="">Illustrator</a></li>
</ul><!--[if lte IE 6]>
</td>
</tr>
</table>
</a><![endif]-->
</li>
<li>
<a href="">第一分类<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]>
<table>
<tr>
<td><![endif]-->
<ul>
<li><a href="">XHTML</a></li>
<li><a href="">CSS</a></li>
<li><a href="">PHP</a></li>
<li><a href="">MySQL</a></li>
<li><a href="">Fireworks</a></li>
<li><a href="">Photoshop</a></li>
<li><a href="">Flash</a></li>
<li><a href="">Illustrator</a></li>
</ul><!--[if lte IE 6]>
</td>
</tr>
</table>
</a><![endif]-->
</li>
<li>
<a href="">第一分类<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]>
<table>
<tr>
<td><![endif]-->
<ul>
<li><a href="">XHTML</a></li>
<li><a href="">CSS</a></li>
<li><a href="">PHP</a></li>
<li><a href="">MySQL</a></li>
<li><a href="">Fireworks</a></li>
<li><a href="">Photoshop</a></li>
<li><a href="">Flash</a></li>
<li><a href="">Illustrator</a></li>
</ul><!--[if lte IE 6]>
</td>
</tr>
</table>
</a><![endif]-->
</li>
<li>
<a href="">第一分类<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]>
<table>
<tr>
<td><![endif]-->
<ul>
<li><a href="">XHTML</a></li>
<li><a href="">CSS</a></li>
<li><a href="">PHP</a></li>
<li><a href="">MySQL</a></li>
<li><a href="">Fireworks</a></li>
<li><a href="">Photoshop</a></li>
<li><a href="">Flash</a></li>
<li><a href="">Illustrator</a></li>
</ul><!--[if lte IE 6]>
</td>
</tr>
</table>
</a><![endif]-->
</li>
<li>
<a href="">第一分类<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]>
<table>
<tr>
<td><![endif]-->
<ul>
<li><a href="">XHTML</a></li>
<li><a href="">CSS</a></li>
<li><a href="">PHP</a></li>
<li><a href="">MySQL</a></li>
<li><a href="">Fireworks</a></li>
<li><a href="">Photoshop</a></li>
<li><a href="">Flash</a></li>
<li><a href="">Illustrator</a></li>
</ul><!--[if lte IE 6]>
</td>
</tr>
</table>
</a><![endif]-->
</li>
<li>
<a href="">第一分类<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]>
<table>
<tr>
<td><![endif]-->
<ul>
<li><a href="">XHTML</a></li>
<li><a href="">CSS</a></li>
<li><a href="">PHP</a></li>
<li><a href="">MySQL</a></li>
<li><a href="">Fireworks</a></li>
<li><a href="">Photoshop</a></li>
<li><a href="">Flash</a></li>
<li><a href="">Illustrator</a></li>
</ul><!--[if lte IE 6]>
</td>
</tr>
</table>
</a><![endif]-->
</li>
<li>
<a href="">第一分类<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]>
<table>
<tr>
<td><![endif]-->
<ul>
<li><a href="">XHTML</a></li>
<li><a href="">CSS</a></li>
<li><a href="">PHP</a></li>
<li><a href="">MySQL</a></li>
<li><a href="">Fireworks</a></li>
<li><a href="">Photoshop</a></li>
<li><a href="">Flash</a></li>
<li><a href="">Illustrator</a></li>
</ul><!--[if lte IE 6]>
</td>
</tr>
</table>
</a><![endif]-->
</li>
</ul>
</div>
</body><!--网页主体结束-->
</html>
