9章 下拉菜单

本章内容*****

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>

 

3.对整体设置

(1)ul常规设置

#menu{

margin:0;

padding:0;

610px;

list-style-type:none;

font:14px arial;

}

(2)对每一个li项目进行设置，

#menu li{

float:left;

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;

}

 

  （5）对二级菜单进行设置

#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;

}