html下拉导航栏下面内容会动怎么解决

html-css08

html下拉导航栏下面内容会动怎么解决,第1张

先定位ul再去层级定位li中的link。html是超文本标签语言。html下拉导航栏下面内容会动先定位ul再去层级定位li中的link即可解决。导航栏是指位于页面顶部或者侧边区域的，在页眉横幅图片上边或下边的一排水平导航按钮，它起着链接站点或者软件内的各个页面的作用。

这个是用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>