昨天和大瓶子一起学html,看到有个讲下拉菜单的视频,这让我第一印象是以为这个必须得用JS做,可是看到最后他竟然是这样做的,
CSS代码如下:
#menu dd{ display:none; } #menu li:hover dd{ display:block; }
HTML代码:
<div id="menu"><ul><li> <dt>项目一</dt> <dd>子项目一</dd> <dd>子项目二</dd> <dd>子项目三</dd> </li></ul></div>
解析:首先<dd>标签都是不可见的,当鼠标放在<li>标签上时(此时li可见的部分只有<dt>),<dd>标签就会出现,当鼠标移出 <li>所在的范围(此时已经是dt和dd所在的部分了)的时候,<dd>标签又重新不可见了。