欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js左側(cè)三級(jí)菜單導(dǎo)航實(shí)例代碼

 更新時(shí)間：2013年09月13日 18:16:20   作者：  
在左側(cè)三級(jí)菜單導(dǎo)航想必大家都見(jiàn)到過(guò)吧，它的實(shí)現(xiàn)過(guò)程也并不復(fù)雜，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以了解下
效果演示：
 
實(shí)例代碼：
復(fù)制代碼 代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>demo</title>
<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
#nav, #nav ul {
list-style: none;
background: #F9F9F9;
font-weight: bold;
padding: 0px;
margin: 0px;
border: solid 1px #CCCCCC;
border-bottom: 0px;
width: 150px;
text-align: left;
}
#nav ul ul{
border: solid 1px #CCCCCC;
border-bottom: 0px;
}
#nav a {
display: block;
width: 150px;
w\idth: 140px;
color: #333333;
text-decoration: none;
text-align: center;
border-bottom: solid 1px #CCCCCC;
text-align: left;
padding-left: 10px;
}
#nav a:hover{
color: #336666;
}
#nav a.selected{
background: url(http://bbs.blueidea.com/images/common/bb_expand.gif) no-repeat right 50%;
}
#nav li {
line-height: 22px;
position: relative;
}
#nav li ul {
position: absolute;
left: -999em;
width: 150px;
font-weight: normal;
margin: 0px;
padding: 0px;
}
#nav li li {
width: 150px;
}
#nav li ul a {
width: 150px;
w\idth: 126px;
padding: 0px 12px;
line-height: 22px;
text-align: left;
}
#nav li ul ul {
margin: 0px 0 0 150px;
}
#nav li:hover ul ul,#nav li.sfhover ul ul{
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul,#nav li.sfhover ul, #nav li li.sfhover ul{
left: auto;
}
#nav li:hover ul,#nav li.sfhover ul{
left: 150px;
top: 0px;
}
#nav li:hover, #nav li.sfhover {
background: #F5E3C0;
}
* html #nav li {
float: left;
height: 1%;
}
* html #nav li a {
height: 1%;
}
-->
</style>
</head>
<body>
<p><a href="javascript:history.back()">Back</a></p>
<ul id="nav">
<li><a href="">Home</a></li>
<li><a href="/aboutme.html">About Me</a></li>
<li><a class="selected" href="/tutorials.html">Tutorials</a>
<ul>
<li><a href="#">Sub Menu 31</a></li>
<li><a class="selected" href="#">Sub Menu 32</a>
<ul>
<li><a href="#">Sub Menu 321</a></li>
<li><a href="#">Sub Menu 322</a></li>
<li><a href="#">Sub Menu 323</a></li>
<li><a href="#">Sub Menu 324</a></li>
</ul>
</li>
<li><a href="#">Sub Menu 33</a></li>
<li><a href="#">Sub Menu 34</a></li>
</ul>
</li>
<li><a class="selected" href="/gallery/gallery.html">Gallery</a>
<ul>
<li><a href="#">Sub Menu 41</a></li>
<li><a class="selected" href="#">Sub Menu 42</a>
<ul>
<li><a href="#">Sub Menu 421</a></li>
<li><a href="#">Sub Menu 422</a></li>
<li><a href="#">Sub Menu 423</a></li>
<li><a href="#">Sub Menu 424</a></li>
</ul>
</li>
<li><a href="#">Sub Menu 43</a></li>
<li><a href="#">Sub Menu 44</a></li>
</ul>
</li>
<li><a href="#">Contact Me</a></li>
</ul>
</body>
</html>

相關(guān)文章

  • 微信小程序?qū)崿F(xiàn)短信驗(yàn)證碼倒計(jì)時(shí)

    微信小程序?qū)崿F(xiàn)短信驗(yàn)證碼倒計(jì)時(shí)

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)短信驗(yàn)證碼倒計(jì)時(shí)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2022-05-05
  • 微信小程序?qū)崿F(xiàn)計(jì)時(shí)器開始和結(jié)束功能

    微信小程序?qū)崿F(xiàn)計(jì)時(shí)器開始和結(jié)束功能

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)計(jì)時(shí)器開始和結(jié)束功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2022-07-07
  • javascript中setTimeout使用指南

    javascript中setTimeout使用指南

    本文給大家通過(guò)3個(gè)方法向大家展示了javascript中的setTimeout的使用，非常的簡(jiǎn)單，有需要的小伙伴可以參考下。
    2015-07-07
  • 微信域名檢測(cè)接口調(diào)用演示步驟（含PHP、Python）

    微信域名檢測(cè)接口調(diào)用演示步驟（含PHP、Python）

    這篇文章主要介紹了微信域名檢測(cè)接口調(diào)用演示步驟（含PHP、Python），文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-12-12
  • JavaScript實(shí)現(xiàn)九宮格抽獎(jiǎng)

    JavaScript實(shí)現(xiàn)九宮格抽獎(jiǎng)

    這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)九宮格抽獎(jiǎng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2022-06-06
  • 輕量級(jí)JS Cookie插件js-cookie的使用方法

    輕量級(jí)JS Cookie插件js-cookie的使用方法

    js-cookie插件是一個(gè)JS操作cookie的插件，源文件只有3.34 KB，非常輕量級(jí)，js-cookie也支持npm和Bower安裝和管理，下面看看js-cookie的具體用法
    2018-03-03
  • javascript preload&lazy load

    javascript preload&lazy load

    最近需要用到預(yù)加載和延遲加載的東東，就參考寫了一個(gè)。支持跨頁(yè)面，支持超時(shí)設(shè)置與依賴設(shè)置。
    2010-05-05
  • javascript容錯(cuò)處理代碼(屏蔽js錯(cuò)誤)

    javascript容錯(cuò)處理代碼(屏蔽js錯(cuò)誤)

    本文主要介紹了javascript的容錯(cuò)處理代碼。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧
    2017-01-01
  • JS.getTextContent(element,preformatted)使用介紹

    JS.getTextContent(element,preformatted)使用介紹

    JS.getTextContent獲取標(biāo)簽的文字想必大家并不陌生吧，下面為大家介紹下具體的使用方法，感興趣的朋友可以參考下
    2013-09-09
  • JS實(shí)現(xiàn)點(diǎn)擊button按鈕切換圖片

    JS實(shí)現(xiàn)點(diǎn)擊button按鈕切換圖片

    這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)點(diǎn)擊button按鈕切換圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2022-07-07

最新評(píng)論