html下拉导航栏代码

html-css014

html下拉导航栏代码,第1张

这个是用JS实现的。你百度一下,JS实现二级导航源码就有了。

<!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">

<head>

<meta http-equiv="Content-Type" content="text/html charset=gb2312" />

<title>简洁的纯CSS下拉菜单代码</title>

<style>

#sddm

{ margin: 0 auto

padding: 0

z-index: 30

background-color:#F4F4F4

width: 480px

height:23px}

#sddm li

{ margin: 0

padding: 0

list-style: none

float: left

font: bold 12px arial}

#sddm li a

{ display: block

margin: 0 1px 0 0

padding: 4px 10px

width: 60px

background: #5970B2

color: #FFF

text-align: center

text-decoration: none}

#sddm li a:hover

{ background: #49A3FF}

#sddm div

{ position: absolute

visibility: hidden

margin: 0

padding: 0

background: #EAEBD8

border: 1px solid #5970B2}

#sddm div a

{ position: relative

display: block

margin: 0

padding: 5px 10px

width: auto

white-space: nowrap

text-align: left

text-decoration: none

background: #EAEBD8

color: #2875DE

font: 12px arial}

#sddm div a:hover

{ background: #49A3FF

color: #FFF}

</style>

<!-- dd menu -->

<script type="text/javascript">

<!--

var timeout = 100

var closetimer = 10

var ddmenuitem = 0

// open hidden layer

function mopen(id)

{

// cancel close timer

mcancelclosetime()

// close old layer

if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'

// get new layer and show it

ddmenuitem = document.getElementById(id)

ddmenuitem.style.visibility = 'visible'

}

// close showed layer

function mclose()

{

if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'

}

// go close timer

function mclosetime()

{

closetimer = window.setTimeout(mclose, timeout)

}

// cancel close timer

function mcancelclosetime()

{

if(closetimer)

{

window.clearTimeout(closetimer)

closetimer = null

}

}

// close layer when click-out

document.onclick = mclose 

// -->

</script>

</head>

<body style="text-align:center">

<ul id="sddm">

<li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">Home</a>

<div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">

<a href="#">HTML DropDown</a>

<a href="#">DHTML DropDown menu</a>

<a href="#">JavaScript DropDown</a>

<a href="#">DropDown Menu</a>

<a href="#">CSS DropDown</a>

</div>

</li>

<li><a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">Download</a>

<div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">

<a href="#">ASP Dropdown</a>

<a href="#">Pulldown menu</a>

<a href="#">AJAX dropdown</a>

<a href="#">DIV dropdown</a>

</div>

</li>

<li><a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()">Order</a>

<div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">

<a href="#">Visa Credit Card</a>

<a href="#">Paypal</a>

</div>

</li>

<li><a href="#" onmouseover="mopen('m4')" onmouseout="mclosetime()">Help</a>

<div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">

<a href="#">Download Help File</a>

<a href="#">Read online</a>

</div>

</li>

<li><a href="#" onmouseover="mopen('m5')" onmouseout="mclosetime()">Contact</a>

<div id="m5" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">

<a href="#">E-mail</a>

<a href="#">Submit Request Form</a>

<a href="http://www.codefans.net/" target="_blank">codefans.net</a>

</div>

</li>

</ul>

</body>

</html>

这个直接右击打开选择记事本打开,把里面的改成你的就行了。如果是想简单方便的,建议你下载个 味多美网址导航的源码程序做站,那个程序按来路自动排行,自动审核,修改广告和管理网址都是直接在后台修改,特别方便。