使用CSS+XHTML制作的下拉菜單(代碼)

2020-03-24 17:20:09

字體：大中小

來源：轉載

供稿：網友

樣式部分:
* {
margin:0;
padding:0;
}
body {
font:12px Verdana, Geneva, sans-serif #444;
line-height:1.5;
}
ul li {
list-style:none;
}
.menu {
width:660px;
margin:20px auto;
}
.menu li {
display:inline;
float:left;
margin:0 5px;
background:#f2f2f2;
border:1px #39c solid;
text-align:center;
font-size:14px;
font-weight:700;
line-height:30px;
cursor:hand;
}
.tuckUp {
display:inline;
width:120px;
height:30px;
overflow:hidden;
background:#f2f2f2;
}
.pullDown{
display:inline;
height:auto;
}
.item a:link, .item a:visited {
display:inline;
float:left;
width:110px;
background:#ccc;
text-align:center;
color:#444;
font-size:12px;
font-weight:normal;
text-decoration:none;
line-height:25px;
margin:0 5px 5px 5px;
}
.item a:hover {
display:inline;
float:left;
background:#39c;
width:100px;
color:#FFF;
text-decoration:none;
text-align:center;
font-size:12px;
font-weight:700;
font-weight:normal;
line-height:25px;
padding:0 0 0 10px;
margin:0 5px 5px 5px;
}
下面是HTML代碼部分:
ul
li onmousemove="this.html' target='_blank'>className='pullDown'" onmouseout="this.className='tuckUp'" MenuOne
div a href="/" ITEM01 /a /a br /
a href="/" ITEM02 /a /a br /
a href="/" ITEM03 /a br /
a href="/" ITEM04 /a br /
a href="/" ITEM05 /a br /
a href="/" ITEM06 /a br / /div
/li
li onmouseout="this.className='tuckUp'" MenuTwo
div a href="/" ITEM01 /a br /
a href="/" ITEM02 /a br /
a href="/" ITEM03 /a br /
a href="/" ITEM04 /a br / /div
/li
li onmouseout="this.className='tuckUp'" MenuThree
div a href="/" ITEM01 /a br /
a href="/" ITEM02 /a br /
a href="/" ITEM03 /a br /
a href="/" ITEM04 /a br /
a href="/" ITEM05 /a br / /div
/li
li onmouseout="this.className='tuckUp'" MenuFour
div a href="/" ITEM01 /a br /
a href="/" ITEM04 /a br /
a href="/" ITEM05 /a br / /div
/li
li onmouseout="this.className='tuckUp'" MenuFive
div a href="/" ITEM01 /a br /
a href="/" ITEM02 /a br /
a href="/" ITEM03 /a br /
a href="/" ITEM04 /a br /
a href="/" ITEM05 /a br / /div
/li
/ulhtml教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：CSS 外邊距合并

下一篇：html以及css的常用用法