css导航栏鼠标hover的时候就出现下拉菜单是怎么做的?

html-css017

css导航栏鼠标hover的时候就出现下拉菜单是怎么做的?,第1张

程序输入如下:

<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) 的右下角位置。

<style>

a{display:blockwidth:120pxheight:35pxbackground:#cccccccolor:#fffffffloat:left}

a:hover{background:#000000}

</style>

<a href="#">home</a>

<a href="#">about</a>

<a href="#">issues</a>

<a href="#">sssss</a>

<a href="#">XXXXX</a>