<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<style type="text/css">
*{ margin:0; padding:0; }
#nav{ background-color:#eee; width:600px; height:40px; margin:0 auto;}
ul{list-style:none;}
ul li{ float:left; line-height:40px; text-align:center; position:relative;}
a{padding:0 15px; text-decoration:none; color:#000; display:block; }
a:hover{ color:#fff; background:#666; }
ul li ul li{ float:none; background-color:#eee; margin-top:2px;}
ul li ul{ position:absolute; left:0; top:40px; display:none;}
ul li ul li a:hover{ background-color:blue;}
ul li:hover ul{ display:block;}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">top</a></li>
<li><a href="#">課程</a>
<ul>
<li><a href="#">css中心</a></li>
<li><a href="#">java中心</a></li>
<li><a href="#">html中心</a></li>
</ul>
</li>
<li><a href="#">中心</a>
<ul>
<li><a href="#">css中心</a></li>
<li><a href="#">java中心</a></li>
<li><a href="#">html中心</a></li>
</ul>
</li>
<li><a href="#">経典案例</a></li>
<li><a href="#">会社に関して</a></li>
</ul>
</div>
</body>
</html>
woshiajuana
相关分类