本章内容*****
1.dl dt dd标记 块级元素
dl定义列表
dt和dd定义标题
<dl>
<dt>北京市的大学</dt>
<dd>清华大学</dd>
<dd>北京大学</dd>
<dd>人民大学</dd>
<dd>北京航天</dd>
<dt>北京市的大学</dt>
<dd>asdf</dd>
<dd>addddf</dd>
</dl>
2.菜单的html结构
<ul id=“menu”>
<li>
<dl>
<dt><a href="#">主目录</a></dt>
<dd><a href="#">二级目录</a></dd>
<dd><a href="#">二级目录</a></dd>
<dd><a href="#">二级目录</a></dd>
<dd class="last"><a href="#">二级目录</a></dd>
</dl>
</li>
<li>
<dl>
<dt><a href="#">主目录二</a></dt>
<dd><a href="#">二级目录二</a></dd>
<dd><a href="#">二级目录二</a></dd>
<dd><a href="#">二级目录二</a></dd>
<dd class="last"><a href="#">二级目录二</a></dd>
</dl>
</li>
......
</ul>
（5）对二级菜单进行设置
3.对整体设置
(1)ul常规设置
#menu{
margin:0;
padding:0;
width:610px;
list-style-type:none;
font:14px arial;
}
(2)对每一个li项目进行设置，
#menu li{
float:left;
width:150px;
padding:0;
margin:0 1px 0 0;
}
设置为相对定位后，下级对象dl能够以li为基准进行绝对定位
（3）对dl的css设置 即设置菜单项
#menu li dl{
margin:0;
padding:0 0 10px 0;
background:#cb6 url(images/bottom.gif) no-repeat bottom left;
}
其中最后一句设置中有#cb6 和url的意思是背景图像覆盖的地方显示背景图像，没有背景图像的地方显示#cb6的背景 色
其中斜线部分是透明的会显示背景颜色
注意：dl中设置中，下端有10px的padding圆角图像就在padding中。扩大菜单鼠标选择范围
目的是不至于在鼠标稍稍超出范围时 菜单就会隐藏。
（4）对主菜单项dt进行设置
#menu li dt{
margin:0;
padding:5px;
text-align:center;
border-bottom:1px solid #b00;//主菜单和二级菜单的边界即分割线
background:#ed8 url(image/top.gif) no-repeat top left;//同理查看上面的bottom.gif
}
对文字进行设置
#menu li dt a ,#menu li dt a:visited{
display:block;
color:#333;
text-decoration:none;
}
#menu li dd{
margin:0;
padding:0;
color:#fff;
background:#47a;
}
dd和dl下面的padding边框设置为暗红色
#menu li dd.last{
border-bottom:1px solid #b00;
}
(6)设置子菜单链接的样式，小三角型作为背景
#menu li dd a,#menu li dd a:visited{
display:block;
color:#fff;
text-decoration:none;
padding:4 5 4 20;
background:#47a url(images/arrow.gif) no-repeat 10 10;//padding左侧设置为20 即显示arrow.gif三角形
}
3.鼠标的响应
先隐藏dd二级菜单
#menu li dd{
display:none;
}
对li使用:hover伪类
#menu li:hover dd{
display:block;
}
子菜单样式
#menu li dd a:hover{
background:#147;
color:#9cf;
}
4.主菜单项不同颜色
<dl>
<dt class="orange"><a href="#">主菜单</a></dt>
</dl>
设置菜单项的dt
#menu li dt{
margin:0;
padding:5;
text-align:center;
border-bottom:1px solid #b00;
}
对4个新增的类别设置其背景色的css样式
#menu li dt.orange{
background：#fa5 url(images/top.gif） no-repeat top left;
}
