首页 > 开发 > CSS > 正文

不用JS只用CSS制作的网页下拉菜单

2024-07-11 08:39:19
字体:
来源:转载
供稿:网友

以下是代码实例:

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;

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表