CSS用hover做下拉菜单，滑上去效果出来了，但是弹出来的下拉菜单还没滑上去就不见了。怎么解决啊

html-css041

CSS用hover做下拉菜单，滑上去效果出来了，但是弹出来的下拉菜单还没滑上去就不见了。怎么解决啊,第1张

这个你要加个钩子 就是你要加多一个层，这个层放在菜单的后边，菜单放到这个层上面，当鼠标进入这个层时，将这个层的高变长就可以了当鼠标移出这个层时，这个层的高度回到默认。

类似下面 自己试着琢磨，其实也可以先将ul隐藏 鼠标进入div时显示

<div id="menu">

体育<br/>

<ul>

<li>..</li>

<li>..</li>

<li>..</li>

</ul>

</div>

#menu{

overflow:hidden

height:20px

}

#menu:hover {

height:100px

}

1、输入代码，其中button是鼠标要滑动的地方，滑过button时，class为content的内容就要显示出来，鼠标滑出去的时候，这块内容就需要重新隐藏起来。

2、把黑色内容的部分初始状态写成隐藏。只需要在class为content里写上display:none,即可。

3、来看下代码和浏览器中的效果。可以看到黑色内容部分已经不见了。

4、把onmouseover和onmouseout两个事件作用在button上面，再写overShow()和overHide()两个 函数。可以看到在函数中通过改content的display属性来实现显示隐藏的效果。

5、在浏览器中就可以看到效果了。

程序输入如下：

<div id="menu">

<br/>

<ul>

<li>..</li>

<li>..</li>

<li>..</li>

</ul>

</div>

#menu{

overflow:hidden

height:20px}

#menu:hover {

height:100px}

选择鼠标指针浮动在其上的元素，并设置其样式：

a:hover{

background-color:yellow}

对于HTML 部分：

可以使用任何的 HTML 元素来打开下拉菜单，如：<span>, 或 a <button>元素。使用容器元素 (如： <div>) 来创建下拉菜单的内容，并放在任何你想放的位置上。使用 <div>元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式。

对于CSS 部分：

.dropdown 类使用 position:relative, 这将设置下拉菜单的内容放置在下拉按钮 (使用 position:absolute) 的右下角位置。