1. 程式人生 > >下拉菜單

下拉菜單

padding index alpha hid align style 20px ora -c

  下拉菜單,純css樣式的:

<style>

*{

margin:0px;

padding:0px;

}

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;

float:left;

width:100px;

padding:3px 5px 0px 5px;

}

a:visited{

color:#336601;

text-decoration:none;

float:left;

padding:3px 5px 0px 5px;

width:100px;

}

a:hover{

color:white;

float:left;

padding:3px 3px 0px 20px;

width:88px;

text-decoration:none;

background-color:#539D26;

}

a:active{

color:white;

float:left;

padding:3px 3px 0px 20px;

width:88px;

text-decoration:none;

background-color:#BD06B4;

}

#nav{

width:600px;

height:30px;

border-bottom:0px;

padding:0px 5px;

position:absolute;

z-index:1;

left: 198px;

top: 25px;

}

.list{

line-height:20px;

text-align:left;

padding:4px;

font-weight:normal;

}

.menu1{

width:120px;

height:auto;

margin:6px 4px 0px 0px;

border:1px solid #9CDD75;

background-color:#F1FBEC;

color:#336601;

padding:6px 0px 0px 0px;

cursor:pointer;

overflow-y:hidden;

filter:Alpha(opacity=70);

-moz-opacity:0.7;

}

.menu2{

width:120px;

height:18px;

margin:6px 4px 0px 0px;

background-color:#F5F5F5;

color:#999999;

border:1px solid #EEE8DD;

padding:6px 0px 0px 0px;

overflow-y:hidden;

cursor:pointer;

}

</style>

<body>

<div id="nav">

<ul>

<li class="menu2" onmouseover="this.className=‘menu1‘" onmouseout="this.className=‘menu2‘">我的首頁

<div class="list">

<a href="#">我的CHINAY</a><br />

<a href="#">我的首頁</a><br />

<a href="#">我的日誌</a><br />

<a href="#">我的日誌</a><br />

<a href="#">我的相冊</a><br />

<a href="#">我的收藏</a><br />

</div>

</li>

<li class="menu2" onmouseover="this.className=‘menu1‘" onmouseout="this.className=‘menu2‘">社區圈子

<div class="list">

<a href="#">我的CHINAY</a><br />

<a href="#">我的首頁</a><br />

<a href="#">我的日誌</a><br />

<a href="#">我的相冊</a><br />

<a href="#">我的收藏</a><br />

</div>

</li>

<li class="menu2" onmouseover="this.className=‘menu1‘" onmouseout="this.className=‘menu2‘">我的短信

<div class="list">

<a href="#">我的CHINAY</a><br />

<a href="#">我的相冊</a><br />

<a href="#">我的收藏</a><br />

</div>

</li>

<li class="menu2" onmouseover="this.className=‘menu1‘" onmouseout="this.className=‘menu2‘">賬戶管理

<div class="list">

<a href="#">我的CHINAY</a><br />

<a href="#">我的首頁</a><br />

<a href="#">我的日誌</a><br />

<a href="#">我的相冊</a><br />

<a href="#">我的收藏</a><br />

<a href="#">我的日誌</a><br />

<a href="#">我的相冊</a><br />

<a href="#">我的收藏</a><br />

</div>

</li>

</ul>

</div>

</body>

<div id="daohanglan">

下拉菜單