以下是代码实例:
html代码:
<div id=”nav”>
<ul>
<li class=”menu2″ onMouseOver=”this.className=’menu1′” onMouseOut=”this.className=’menu2′”>Home Page
<div class=”list”>
<a href=”https://www.Vevb.com/”>软件开发网</a>
<a href=”#”>我的首页</a>
<a href=”#”>我的日志</a>
<a href=”#”>我的日志</a>
<a href=”#”>我的相册</a>
<a href=”#”>我的收藏</a>
</div>
</li>
<li class=”menu2″ onMouseOver=”this.className=’menu1′” onMouseOut=”this.className=’menu2′”>Connection
<div class=”list”>
<a href=”https://www.Vevb.com/”>软件开发网</a>
<a href=”#”>我的首页</a>
<a href=”#”>我的日志</a>
<a href=”#”>我的相册</a>
<a href=”#”>我的收藏</a>
</div>
</li>
<li class=”menu2″ onMouseOver=”this.className=’menu1′” onMouseOut=”this.className=’menu2′”>My Files
<div class=”list”>
<a href=”https://www.Vevb.com/”>软件开发网</a>
<a href=”#”>我的相册</a>
<a href=”#”>我的收藏</a>
</div>
</li>
<li class=”menu2″ onMouseOver=”this.className=’menu1′” onMouseOut=”this.className=’menu2′”>Management
<div class=”list”>
<a href=”https://www.Vevb.com/”>软件开发网</a>
<a href=”#”>我的首页</a>
<a href=”#”>我的日志</a>
<a href=”#”>我的相册</a>
<a href=”#”>我的收藏</a>
<a href=”#”>我的日志</a>
<a href=”#”>我的相册</a>
<a href=”#”>我的收藏</a>
</div>
</li>
</ul>
</div>
下面是css代码:
body{
background-color:white;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
margin:0px;
padding:0px;
color:white;
}
ul,li{
margin:0px;
padding:0px;
}
li{
display:inline;
list-style:none;
list-style-position:outside;
text-align:center;
font-weight:bold;
float:left;
}
a:link{
color:#336601;
text-decoration:none;
新闻热点
疑难解答