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

html-css09

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 type="text/css" >    

body{    

margin:0px    

padding:0px    

}    

    

li{    

list-style:url(1.jpg)    

}    

a{    

display:block    

}    

a:link,a:visited  {    

text-decoration: none    

color:#000000    

}    

.menu{    

margin:0px auto    

width:404px    

height:21px    

}    

.menu ul{    

margin:0px    

padding:0px    

}    

.menu ul li{    

position:relative    

float:left    

list-style:none    

padding:2px    

border:1px dotted    

font-size:14px    

width:95px    

text-align: center    

margin:0px

    

background:#999999    

}    

.menu ul li ul{    

display:none    

}    

.menu ul li:hover ul{    

display:block    

position: absolute left: 0px top: 21px    

}    

.menu a:link{    

background:url(2.png) -137px -10px    

}    

.menu a:hover{    

background:url(2.png) -26px -10px    

}    

    

    

</style>    

<body>       

<p>下面是一个导航条</p>    

<div class="menu">    

 <ul>    

   <li><a href="#">首页</a></li>    

   <li><a href="#">新闻中心</a>    

<ul>    

<li><a href="1#">新手入门</a></li>    

<li><a href="2#">视频教程</a></li>    

<li><a href="3#">常见问题</a></li>    

</ul>    

</li>    

   <li><a href="#">学习课程</a>    

<ul>    

<li><a href="1#">新手入门</a></li>    

<li><a href="2#">视频教程</a></li>    

<li><a href="3#">常见问题</a></li>    

</ul>    

</li>    

   <li><a href="#">联系我们</a></li>    

 </ul>    

</div>    

</body>    

</html>

我简单的说一下思路:

首先用ul下面嵌套一个ul。。外面的是第一层栏目列表,嵌套的是第二个。

首先定义嵌套的ul不显示

.menu ul li ul{    

display:none   

}  

当鼠标划过li的时候下面的ul显示出来

.menu ul li:hover ul{    

display:block   

}  

这样就可以了,但是我们发现显示出来的二级栏目不是我们想要的位置,那么对它进行绝对定位

.menu ul li:hover ul{    

display:block   

position: absoluteleft: 0pxtop: 21px   

}  

因为绝对定位的元素的位置相对于最近的已定位祖先元素。所以它外面的li设置一个相对定位

.menu ul li{    

position:relative

}

这样效果就出来了。其他的属性都是一些调整了,在一些低版本的浏览器中会失效,(特别低级的)

是链接按钮吧,只需要更换下背景就行了

a{background:#fff} 正常状态下

a:hover{ background:url("image/bg.jpg") #000} 鼠标在菜单上的颜色,没使用图片做背景就直接写颜色

点击后停留状态停留,点击后给该链接按钮加个class或id 如<a class='home'></a>然后写下该类的css样式和鼠标停留在上面的一样就行了,如

a.home{ background:url("image/bg.jpg") #000}

至于怎么加个class类就根据你代码实际情况了