                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /形形色色的下拉菜单

不懂啊,怎么设置怎么设置

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
*{ padding:0; margin:0;}
ul{list-style:none}
div{ width:475px; height:40px; background:#eeeeee; margin:auto;  }
li,ul{ float:left;  }
a{ text-decorat

ion:none; display:block;width:95px;line-height:40px;  text-align:center}
a:hover{ color:#FFF; background:#666; }
.t_1 a:hover{ background:#666;color:#FFF}
.t_1{ display:none;float:none;position:absolute; width:50px;padding:40px 0  0 95px; }
.t_1 a{ background:#eee; color:#000; margin-top:2px}
?:hover .t_1{display:block}
</style>
</head>
<div>
<ul id="a">
  <li ><a href="#">首&nbsp;&nbsp;&nbsp;&nbsp;页</a></li>
  <li ><a href="#">课程大厅</a></li>
     <ul>
<li><a href="#">javaScript</a></li>
<li><a href="#">JQuery</a></li>
</ul>
<li><a href="#">学习中心</a></li>
  <li><a href="#">经典案例</a></li>
  <li><a href="#">关于我们</a></li>
</ul>
</div>
</body>
</html>

qq_慕UI9367020

2016-06-04

源自：形形色色的下拉菜单 1-3

关注问题我要回答

898

操作

收起

3 回答

掐了烟来骚回答被采纳 +3 积分
2016-06-04

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		a{
			text-decoration: none;
		}
		div {
			width:475px;
			background:#eeeeee;
			margin:auto;
			text-align: center;
		}
		#main {			
			display: block;			
			margin:auto;
		}
		#main li {
			display: inline;
		}
		li:nth-child(2){
			position: relative;
		}
		#child {
			position: absolute;
			top: 100%;
			left: 0;
			display: none;
		}

		li:nth-child(2):hover #child{
			display: block;
			background:#eeeeee; 
		}
		</style>
	</head>
	<div>
		<ul id="main">
			<li >
				<a href="#">首页</a>
			</li>
			<li>
				<a href="#">课程大厅</a>
				<ul id="child">
					<li><a href="#">javaScript</a></li>
					<li><a href="#">JQuery</a></li>
				</ul>
			</li>
			
			<li><a href="#">学习中心</a></li>
			<li><a href="#">经典案例</a></li>
			<li><a href="#">关于我们</a></li>
		</ul>
	</div>
</body>
</html>