用CSS制作下拉菜单

昨天和大瓶子一起学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>标签又重新不可见了。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注