程序输入如下:
<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类就根据你代码实际情况了