不用script僅用css編寫無限分級彈出菜單_Web標(biāo)準(zhǔn)教程
一直以來,我們大多使用js來實現(xiàn)彈出菜單,可是根據(jù) w3c 的css標(biāo)準(zhǔn),根本就沒有這個必要。只需要簡單得使用css+html就可以做出一個無限分級的彈出菜單。
沒錯,就是利用 Element:hover 這個偽類。
注意,瀏覽這個例子,你必須使用標(biāo)準(zhǔn)瀏覽器,例如 Mozilla Firefox/ Opera 7.5
IE 不行!!
以下為引用的內(nèi)容:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>css menu</title>
<style type="text/css">
/*<![CDATA[*/
ul.menu
{
width:180px;
cursor:hand;
list-style-type:none;
border:1px solid #cccccc;
padding:0px;
margin:0px;
}
ul.menu li
{
width:100%;
display:block;
position:relative;
}
ul.menu li a
{
background-color:#06829C;
color:#ffffff;
width:100%;
display:block;
font-size:9pt;
padding:2px;
padding-left:10px;
}
ul.menu li ul.menu
{
display:none;
width:190px;
position:absolute;
z-index:1000;
left:80%;
top:-10px;
}
ul.menu li:hover > a
{
width:100%;
background-color:#64ACF8;
color:#ffffff;
}
ul.menu li:hover > ul.menu
{
display:block;
}
/*]]>*/
</style>
</head>
<body>
<ul class="menu">
<li><a href="#">Item 1</a></li>
<li>
<a href="#">Menu Item ></a>
<ul class="menu">
<li><a href="#">item</a></li>
<li>
<a href="#">item ></a>
<ul class="menu">
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
<li>
<a href="#">item ></a>
<ul class="menu">
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
<li>
<a href="#">item ></a>
<ul class="menu">
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html><script language="Javascript">
var now = new Date();
document.write("<img src='/upimg/allimg/080423/1051040.jpg" target="_blank">
- Web標(biāo)準(zhǔn):需要正確的使用H1~ H6標(biāo)簽
- 五個WEB標(biāo)準(zhǔn)中必須注意的地方
- 做到結(jié)構(gòu)(XHTML),表現(xiàn)(CSS),行為(JavaScript)的分離
- CSS標(biāo)準(zhǔn):HTML標(biāo)簽元素的關(guān)閉
- Web標(biāo)準(zhǔn)之路 勿使用W3C廢棄的元素
- CSS布局 聲明文檔類型描述(DTD)
- DIV CSS\讓搜索引擎蜘蛛不再累
- 用XHTML+CSS創(chuàng)建基于Web標(biāo)準(zhǔn)的網(wǎng)頁
- XHTML+CSS創(chuàng)建基于Web標(biāo)準(zhǔn)的網(wǎng)站
- DIV+CSS對SEO的幫助
- 淺析什么是Web標(biāo)準(zhǔn) 及其前景
- CSSer新手寄語:開始標(biāo)準(zhǔn)之路
Web標(biāo)準(zhǔn)教程Rss訂閱Div+Css教程搜索
Web標(biāo)準(zhǔn)教程推薦
- 網(wǎng)頁標(biāo)準(zhǔn)化-CSS命名規(guī)劃整理
- CSS+DIV設(shè)計實例:多個DIV排列時居中
- CSSEditer適合編輯CSS的幾款編輯器簡介
- WEB標(biāo)準(zhǔn)使我們的思維模式進(jìn)行轉(zhuǎn)變!
- CSS標(biāo)準(zhǔn)系列CSS樣式切換技巧
- WEB標(biāo)準(zhǔn)教程第4天:調(diào)用樣式表
- CSS網(wǎng)頁布局語義化探討
- 標(biāo)準(zhǔn)的DIV CSS布局對SEO的影響
- WEB2.0標(biāo)準(zhǔn)教程:第十天 自適應(yīng)高度
- Web2.0網(wǎng)站十五個顯著的流行風(fēng)格
- 相關(guān)鏈接:
- 教程說明:
Web標(biāo)準(zhǔn)教程-不用script僅用css編寫無限分級彈出菜單。