/* 1. 清除ul默认样式 */ ul { padding: 0;margin: 0;list-style: none;} /* 2. 设置水平方向主菜单, 设置子菜单弹出位置相对于当前父菜单项 */ li { float: left; /* 产生水平菜单 */ position: relative; /* position为非static时才能让子菜单弹出位置相对当前菜单项 */ width: 10...
<!DOCTYPE html PUBLIC >
<html>
<head>
<style>
/* 1. 清除ul默认样式 */
ul {
padding: 0;
margin: 0;
list-style: none;
}
/* 2. 设置水平方向主菜单, 设置子菜单弹出位置相对于当前父菜单项 */
li {
float: left; /* 产生水平菜单 */
position: relative; /* position为非static时才能让子菜单弹出位置相对当前菜单项 */
width: 10em; /* 给菜单项设置宽度 */
}
/* 3. 设置二级菜单默认为隐藏状态, 设置弹出时的位置position值很重要 */
li ul {
display: none; /* 默认隐藏 */
position: absolute; /* 弹出后布局相对于最近一个position值为非static的父节点, 第2步设置position就是这个作用*/
}
/* 4. 设置鼠标滑过父节点时显示子菜单 */
li:hover ul {
display: block;
}
/*5. IE不支持<a>以外的元素hover,添加class,加上部分javascript解决
* 如果不需要支持ie,可以忽略此处以及下面的javascript*/
li.over ul {
display: block;
}
</style>
<script>
window.onload = function ()
{
var navRoot = document.getElementById("nav");
var items = navRoot.children;
for (var i = 0; i < items.length; ++i)
{
items[i].onmouseover = function (){
this.className += " over";
};
items[i].onmouseout = function ()
{
this.className = this.className.replace(" over", "");
}
} // end for
};
</script>
</head>
<body>
<div id="menu">
<ul id="nav">
<li><a href="#">标题</a></li>
<li><a href="#">标题</a></li>
<li><a href="#">标题</a>
<ul>
<li><a href="#">下拉</a></li>
<li><a href="#">下拉</a></li>
<li><a href="#">下拉</a></li>
</ul>
</li>
<li><a href="#">标题</a></li>
<li><a href="#">标题</a></li>
<li><a href="#">标题</a></li>
<li><a href="#">标题</a></li>
<li><a href="#">标题</a></li>
</ul>
</div>
</body>
</html>
核心的就是上面这些了.需要颜色背景什么的你可以看着加. 可以自己跟着1 2 3 4 5一步一步添加样式,然后刷新看看效果.
2013-10-17
按照你的结构，考虑到ie6不支持li:hover伪类写法，所以用jQuery解决了。<style type="text/css">*{margin:0;padding:0;font-size:14px;line-height:35px;}a{color:#0099cc;text-decoration:none;}ul,li{list-style:none;}#menu{width:800px;height:35px;background:#333333;}#menu ul li{float:left;width:100px;margin-left:1px;position:relative;}#menu ul li ul li{margin-left:0;}#menu ul li a{width:100%;height:100%;text-align:center;display:block;background:#666666;}/*二级栏目*/#menu ul li ul{display:none;position:absolute;left:0;top:35px;}#menu ul li ul a{background:#333333;}</style><div id="menu"> <ul> <li><a href="#">一级栏目1</a></li> <li><a href="#">一级栏目1</a></li> <li><a href="#">一级栏目3</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="#">一级栏目4</a> <ul> <li><a href="#">二级栏目4</a></li> <li><a href="#">二级栏目5</a></li> <li><a href="#">二级栏目6</a></li> </ul> </li> <li><a href="#">一级栏目5</a></li> </ul></div><script type="text/javascript" src="js/jq.js"></script><!--这里要引入jQuery库--><script type="text/javascript">$(function(){$("#menu ul > li").hover(function(){$(this).find("ul").stop(true,true).show(100);},function(){$(this).find("ul").stop(true,true).hide(100);})})</script>2013-10-16
怎样用 CSS + JS 美化网页中的 select 下拉框? 
