如何用div写首页的导航下拉菜单？在线等阿

zrkoreyoshi 2010-10-21 10:25:11
如何用div写首页的导航下拉菜单阿？(就是鼠标放在首页的导航上，会显示下拉的选项)
通过样式写可以吗？跪求---
...全文
338 18 打赏 收藏 转发到动态 举报
写回复
用AI写文章
18 条回复
切换为时间正序
请发表友善的回复…
发表回复
Cfei_Zone 2010-10-21
  • 打赏
  • 举报
 回复
学习了----
beyond_me21 2010-10-21
  • 打赏
  • 举报
 回复
楼主要懂得自己思考。算了，给你完整代码


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>no title</title>

<style type="text/css">

body{

margin:0px;

padding:0px;

font-size:12px;

color:#666666;

}

a{

color:#910E04;

text-decoration:none;

}

a:hover{

text-decoration:underline;

}

dl,ul{

list-style-type:none;

}



#nav{

margin:0px auto;

padding:0px 0px 0px 24px;

width:730px;

height:37px;

background:#910E04;

display:block;

}

#nav li{

display:inline;

float:left;

margin:0px;

padding:0px;

position:relative;

}

#nav li a{

display:block;

margin:0px;

color:#FFFFFF;

padding:8px 25px 0px 25px;

line-height:29px;

font-weight:bold;

font-size:12px;

background:#910E04;

}

#nav li.current a,#nav li a:hover,#nav li:hover a{

color:#910E04;

text-decoration:none;

background:#EFEFEF;

}

#nav li ul{

display:none;

}

#nav li:hover ul{

display:block;

position:absolute;

top:37px;

left:0px;

margin:0px;

padding:3px;

width:160px;

background:#EFEFEF;

}

#nav li:hover ul li{

display:block;

float:none;

margin:0px;

padding:0px;

overflow:hidden;

}

#nav li:hover ul li a{

display:block;

margin:0px;

padding:0px 10px 0px 10px;

line-height:24px;

background:#D3D3D3;

color:#910E04;

font-weight:normal;

font-size:12px;

}

#nav li:hover ul li a:hover{

background:#910E04;

color:#fff;

}

</style>



<!--[if lte IE 6]>

<style type="text/css">

table {border-collapse:collapse; margin:0; padding:0;}

#nav li a.hide{

display:none;

}

#nav li a ul{

display:none;

}

#nav li a:hover ul{

display:block;

position:absolute;

top:37px;

left:0px;

margin:0px;

padding:3px;

width:160px;

background:#EFEFEF;

}

#nav li a:hover ul li{

display:block;

margin:0px;

padding:0px;

overflow:hidden;

height:24px;

}

#nav li a:hover ul li a{

display:block;

margin:0px;

padding:0px 10px 0px 10px;

line-height:24px;

background:#D3D3D3;

color:#910E04;

font-weight:normal;

font-size:12px;

}

#nav li a:hover ul li a:hover{

background:#910E04;

color:#fff;

}

</style>

<![endif]-->

</head>



<body>

    <ul id="nav">

        <li >

		    <a href="index.htm">公司</a>

            <!--[if lte IE 6]>

            <a href="Product-1.htm">产品<table><tr><td>

            <![endif]-->

            <ul>

                <li><a href="#">关于我们</a></li>

                <li><a href="#">联系我们</a></li>

            </ul>

            <!--[if lte IE 6]>

            </td></tr></table></a>

            <![endif]-->

	   </li>

        <li>

            <a class="hide" href="Technical-Overview.htm">技术</a>

            <!--[if lte IE 6]>

            <a href="Technical-Overview.htm">技术<table><tr><td>

            <![endif]-->

            <ul>

                <li><a href="Technical-Overview.htm">技术介绍</a></li>

                <li><a href="Technology-Mechanism.htm">技术机理</a></li>

            </ul>

            <!--[if lte IE 6]>

            </td></tr></table> </a>

            <![endif]-->

        </li>

        <li>

            <a class="hide" href="Product-1.htm">产品</a>

            <!--[if lte IE 6]>

            <a href="Product-1.htm">产品<table><tr><td>

            <![endif]-->

            <ul>

                <li><a href="Product-1.htm">工业环境使用产品</a></li>

                <li><a href="Product-2.htm">市政或天然环境使用产品</a></li>

            </ul>

            <!--[if lte IE 6]>

            </td></tr></table></a>

            <![endif]-->

        </li>

    </ul>

</body>

</html>
beyond_me21 2010-10-21
  • 打赏
  • 举报
 回复
只有白色是因为你没有背景图片，给你这个代码是给你参考让你怎么写css，你访问http://www.puhao-tec.com这个网站看看下拉有没有显示
[Quote=引用 5 楼 zrkoreyoshi 的回复:]
引用 3 楼 beyond_me21 的回复:
css(主样式表)
CSS code

body{
margin:0px;
padding:0px;
font-size:12px;
color:#666666;
}
a{
color:#910E04;
text-decoration:none;
}
a:hover{
text-decoration:underline;……
[/Quote]
zrkoreyoshi 2010-10-21
  • 打赏
  • 举报
 回复
[Quote=引用 3 楼 beyond_me21 的回复:]
css(主样式表)
CSS code

body{
margin:0px;
padding:0px;
font-size:12px;
color:#666666;
}
a{
color:#910E04;
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
.c{
clear:both;
}
……
[/Quote]

这个不行阿，只有白色的样式，下拉也没显示阿
wwfgu00ing 2010-10-21
  • 打赏
  • 举报
 回复
http://www.open-open.com/ajax/Menu.htm
这个也行啊
beyond_me21 2010-10-21
  • 打赏
  • 举报
 回复
css(主样式表)


body{

margin:0px;

padding:0px;

font-size:12px;

color:#666666;

}

a{

color:#910E04;

text-decoration:none;

}

a:hover{

text-decoration:underline;

}

.c{

clear:both;

}

dl,ul{

list-style-type:none;

}

#headder-wrap{

background:url(../image/bg_top.png) repeat-x 0 0;

padding:0px;

margin:0px;

overflow:hidden;

}

#header{

background:#fff;

width:754px;

height:129px;

position:relative;

margin:0px auto;

border-left:10px solid #efefef;

border-right:10px solid #efefef;

}

#header h1{

display:block;

padding:0px;

margin:0px;

position:absolute;

font-size:18px;

font-weight:normal;

top:30px;

left:15px;

}

#header #logo{

display:block;

padding:0px;

margin:0px;

position:absolute;

right:20px;

bottom:15px;

}

#logo a{

   text-indent:-9999em;   

   background: url(../image/logo.png) no-repeat 0 0; 

   display:block;  

   width: 167px;   

   height: 44px;   

   font-size:0;  

   border: 0 !important;   

   border-bottom: 0;   

   margin:0px;

}

#nav{

margin:0px auto;

padding:0px 0px 0px 24px;

width:730px;

height:37px;

background:url(../image/bg_nav.png) repeat-x 0 0;

display:block;

border-left:10px solid #ccc;

border-right:10px solid #ccc;

}

#nav li{

display:inline;

float:left;

margin:0px;

padding:0px;

position:relative;

}

#nav li a{

display:block;

margin:0px;

color:#FFFFFF;

padding:8px 25px 0px 25px;

line-height:29px;

font-weight:bold;

font-size:12px;

background:url(../image/nav_li.gif) no-repeat right bottom;

}

#nav li.current a,#nav li a:hover,#nav li:hover a{

color:#910E04;

text-decoration:none;

background:#EFEFEF;

}

#nav li ul{

display:none;

}

#nav li:hover ul{

display:block;

position:absolute;

top:37px;

left:0px;

margin:0px;

padding:3px;

width:160px;

background:#EFEFEF;

}

#nav li:hover ul li{

display:block;

float:none;

margin:0px;

padding:0px;

overflow:hidden;

}

#nav li:hover ul li a{

display:block;

margin:0px;

padding:0px 10px 0px 10px;

line-height:24px;

background:#D3D3D3;

color:#910E04;

font-weight:normal;

font-size:12px;

}

#nav li:hover ul li a:hover{

background:#910E04;

color:#fff;

}



IE6.CSS(针对ie6及以下浏览器不支持hover的伪类问题)


table {border-collapse:collapse; margin:0; padding:0;}

#nav li a.hide{

display:none;

}

#nav li a ul{

display:none;

}

#nav li a:hover ul{

display:block;

position:absolute;

top:37px;

left:0px;

margin:0px;

padding:3px;

width:160px;

background:#EFEFEF;

}

#nav li a:hover ul li{

display:block;

margin:0px;

padding:0px;

overflow:hidden;

height:24px;

}

#nav li a:hover ul li a{

display:block;

margin:0px;

padding:0px 10px 0px 10px;

line-height:24px;

background:#D3D3D3;

color:#910E04;

font-weight:normal;

font-size:12px;

}

#nav li a:hover ul li a:hover{

background:#910E04;

color:#fff;

}

html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>no title</title>

<link href="css/main.css" rel="stylesheet" type="text/css">

<!--[if lte IE 6]>

<link href="css/IE6.css" rel="stylesheet" type="text/css">

<![endif]-->

</head>



<body>

<div id="headder-wrap">

    <div id="header"><h1>网站标题</h1><div id="logo"><a href="/">网站标题</a></div></div>

	<ul id="nav">

	    <li class="current"><a href="index.htm">公司</a></li>

		<li>

		    <a class="hide" href="Technical-Overview.htm">技术</a>

			<!--[if lte IE 6]>

			<a href="Technical-Overview.htm">技术<table><tr><td>

			<![endif]-->

			<ul>

			    <li><a href="Technical-Overview.htm">技术介绍</a></li>

				<li><a href="Technology-Mechanism.htm">技术机理</a></li>

			</ul>

			<!--[if lte IE 6]>

            </td></tr></table> </a>

            <![endif]-->

		</li>

		<li>

		    <a class="hide" href="Product-1.htm">产品</a>

			<!--[if lte IE 6]>

			<a href="Product-1.htm">产品<table><tr><td>

			<![endif]-->

			<ul>

			    <li><a href="Product-1.htm">工业环境使用产品</a></li>

				<li><a href="Product-2.htm">市政或天然环境使用产品</a></li>

			</ul>

			<!--[if lte IE 6]>

            </td></tr></table></a>

            <![endif]-->

		</li>

		<li><a href="Applications.htm">应用领域</a></li>

		<li><a href="Contact.htm">联系我们</a></li>

	</ul>

</div>
zrkoreyoshi 2010-10-21
  • 打赏
  • 举报
 回复
[Quote=引用楼主 zrkoreyoshi 的回复:]
如何用div写首页的导航下拉菜单阿？(就是鼠标放在首页的导航上，会显示下拉的选项)
通过样式写可以吗？跪求---
[/Quote]
我看见了，非常感谢您，
那有没有精简点的？
virgin222 2010-10-21
  • 打赏
  • 举报
 回复
<html>
<head>
<title>无标题文档</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<SCRIPT language=JavaScript>
<!--
function MM_goToURL() { //v3.0
var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}
function JM_cc(ob){
var obj=MM_findObj(ob); if (obj) {
obj.select();js=obj.createTextRange();js.execCommand("Copy");}
}
function MM_findObj(n, d) { //v4.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && document.getElementById) x=document.getElementById(n); return x;
}
//-->
</SCRIPT>
<SCRIPT language=JavaScript>
<!--
menuPrefix = 'menu'; // Prefix that all menu layers must start with
// All layers with this prefix will be treated
// as a part of the menu system.
var menuTree, mouseMenu, hideTimer, doHide;
function init() {
ie4 = (document.all)?true:false;
ns4 = (document.layers)?true:false;
document.onmousemove = mouseMove;
if (ns4) { document.captureEvents(Event.MOUSEMOVE); }
}
function expandMenu(menuContainer,subContainer,menuLeft,menuTop) {
// Hide all submenus thats's not below the current level
doHide = false;
if (menuContainer != menuTree) {
if (ie4) {
var menuLayers = document.all.tags("DIV");
for (i=0; i<menuLayers.length; i++) {
if ((menuLayers[i].id.indexOf(menuContainer) != -1) && (menuLayers[i].id != menuContainer)) {
hideObject(menuLayers[i].id);
}
}
}
else if (ns4) {
for (i=0; i<document.layers.length; i++) {
var menuLayer = document.layers[i];
if ((menuLayer.id.indexOf(menuContainer) != -1) && (menuLayer.id != menuContainer)) {
menuLayer.visibility = "hide";
}
}
}
}
// If this is item has a submenu, display it, or it it's a toplevel menu, open it
if (subContainer) {
if ((menuLeft) && (menuTop)) {
positionObject(subContainer,menuLeft,menuTop);
hideAll();
}
else {
if (ie4) {
positionObject(subContainer, document.all[menuContainer].offsetWidth + document.all[menuContainer].style.pixelLeft - 10, mouseY);
}
else {
positionObject(subContainer, document.layers[menuContainer].document.width + document.layers[menuContainer].left + 50, mouseY);
}
}
showObject(subContainer);
menuTree = subContainer;
}
}
function showObject(obj) {
if (ie4) { document.all[obj].style.visibility = "visible"; }
else if (ns4) { document.layers[obj].visibility = "show"; }
}
function hideObject(obj) {
if (ie4) { document.all[obj].style.visibility = "hidden"; }
else if (ns4) { document.layers[obj].visibility = "hide"; }
}
function positionObject(obj,x,y) {
if (ie4) {
var foo = document.all[obj].style;
foo.left = x;
foo.top = y;
}
else if (ns4) {
var foo = document.layers[obj];
foo.left = x;
foo.top = y;
}
}
function hideAll() {
if (ie4) {
var menuLayers = document.all.tags("DIV");
for (i=0; i<menuLayers.length; i++) {
if (menuLayers[i].id.indexOf(menuPrefix) != -1) {
hideObject(menuLayers[i].id);
}
}
}
else if (ns4) {
for (i=0; i<document.layers.length; i++) {
var menuLayer = document.layers[i];
if (menuLayer.id.indexOf(menuPrefix) != -1) {
hideObject(menuLayer.id);
}
}
}
}
function hideMe(hide) {
if (hide) {
if (doHide) { hideAll(); }
}
else {
doHide = true;
hideTimer = window.setTimeout("hideMe(true);", 2000);
}
}
function mouseMove(e) {
if (ie4) { mouseY = window.event.y; }
if (ns4) { mouseY = e.pageY; }
}
function itemHover(obj,src,text,style) {
if (ns4) {
var text = '<nobr><a href="' + src + '" class="' + style + '">' + text + '<\/a><\/nobr>'
obj.document.open();
obj.document.write(text);
obj.document.close();
}
}
onload = init;
//-->
</SCRIPT>
<style type=text/css>
<!--
.menu { position: absolute; left: 0; top: 2;
visibility: hidden; background: #FFFFFF;
width: 100px; margin: 0px 0px; padding: 0px 0px;
border: 1px silver solid;
overflow: visible; ; clip: rect( )}
.menu a:visited { font-family: "Tahoma"; font-size: 11px;
text-decoration: none; font-weight: normal;
color: black; background: #E2E2E2;
width: 108px; padding-left: 8px; ; line-height: 22px; border-color: #FFFFFF #666666 #333333 #999999; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; clip: rect( )}
.menu a:hover { font-family: "Tahoma"; font-size: 11px;
text-decoration: none; font-weight: normal;
color: #FFFFFF; background: #009900;
width: 108px; padding-left: 8px; ; line-height: 22px; clip: rect( )}
.menu .border { border: 1px solid #F4F4F4;
border-bottom: 1px solid #808080;
border-right: 1px solid #808080; }
.menu .text { overflow: hidden;
width: 125px; height: 15px; }
.menu .arrow { overflow: hidden;
width: 15px; height: 12px;
padding-left: 5px; padding-top: 3px; }
.menu .arrow img { width: 6px; height: 7px;
border: 0px; } .menu a { font-family: "Tahoma"; font-size: 11px;
text-decoration: none; font-weight: normal;
color: black; background: #E2E2E2;
width: 108px; padding-left: 8px; ; clip: rect( ); border-color: #FFFFFF #666666 #333333 #999999; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; line-height: 22px} .menu a:link { color: #000000; text-decoration: none}
.a { font-size: 12px; text-decoration: none}
a:link { color: #FFFFFF; text-decoration: none}
a:hover { text-decoration: underline}
a:visited { color: #FFFFFF; text-decoration: none}
-->
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0">
<table border="0" cellpadding="0" cellspacing="1" bgcolor="#333333" width="778" class="a">
<tr bgcolor="#009830" align="center" valign="bottom">
<td width="10" height="18"> </td>
<td width="74"><a href="#;" onMouseOver="expandMenu(null,'menu1',getPos(this,'Left'),getPos(this,'Top')+this.offsetHeight);" class="a" >第一项</a></td>
<td width="58"><a href="#;" onMouseOver="expandMenu(null,'menu2',getPos(this,'Left'),getPos(this,'Top')+this.offsetHeight);" class="a" >第二项</a></td>
<td width="58"><a href="#;" onMouseOver="expandMenu(null,'menu3',getPos(this,'Left'),getPos(this,'Top')+this.offsetHeight);" class="a" >第三项</a></td>
<!--可以复制上面的做出menu4 menu5 menu6....-->
<td width="40"><a href="#;" class="a" >首页</a></td>
<td width="18" height="18"> </td>
</tr>
</table>
<script language="JavaScript">
function getPos(el,sProp) {
var iPos = 0
while (el!=null) {
iPos+=el["offset" + sProp]
el = el.offsetParent
}
return iPos
}
</script>
<!-- 第一开始 -->
<div id="menu1" class="menu" onMouseOut="hideMe();" style="">
<a href="#;" onMouseOver="expandMenu('menu1');">第一项</a><br>
<a href="#;" onMouseOver="expandMenu('menu1');">第一项</a><br>
<a href="#;" onMouseOver="expandMenu('menu1');">第一项</a><br>
<a href="#;" onMouseOver="expandMenu('menu1');">第一项</a><br>
</div>
<!-- 第二开始 -->
<div id="menu2" class="menu" onMouseOut="hideMe();">
<a href="#;" onMouseOver="expandMenu('menu2');">第二项</a><br>
<a href="#;" onMouseOver="expandMenu('menu2');">第二项</a><br>
<a href="#;" onMouseOver="expandMenu('menu2');">第二项</a><br>
<a href="#;" onMouseOver="expandMenu('menu2');">第二项</a><br>
</div>
<!-- 第三开始 -->
<div id="menu3" class="menu" onMouseOut="hideMe();">
<a href="#;" onMouseOver="expandMenu('menu3');">第三项</a><br>
<a href="#;" onMouseOver="expandMenu('menu3');">第三项</a><br>
<a href="#;" onMouseOver="expandMenu('menu3');">第三项</a><br>
<a href="#;" onMouseOver="expandMenu('menu3');">第三项</a><br>
</div>
<!--可以复制上面的做出menu4 menu5 menu6....-->
<p class="a"> </p>
</body>
</html>
种草德鲁伊 2010-10-21
  • 打赏
  • 举报
 回复
div是什么，能吃么
lz00728 2010-10-21
  • 打赏
  • 举报
 回复
哇，对我有帮助，学习一下
beyond_me21 2010-10-21
  • 打赏
  • 举报
 回复
完整的代码


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>no title</title>

<style type="text/css">

body{

margin:0px;

padding:0px;

font-size:12px;

color:#666666;

}

a{

color:#910E04;

text-decoration:none;

}

a:hover{

text-decoration:underline;

}

dl,ul{

list-style-type:none;

}



#nav{

margin:0px auto;

padding:0px 0px 0px 24px;

width:730px;

height:37px;

background:#910E04;

display:block;

}

#nav li{

display:inline;

float:left;

margin:0px;

padding:0px;

position:relative;

}

#nav li a{

display:block;

margin:0px;

color:#FFFFFF;

padding:8px 25px 0px 25px;

line-height:29px;

font-weight:bold;

font-size:12px;

background:#910E04;

}

#nav li.current a,#nav li a:hover,#nav li:hover a{

color:#910E04;

text-decoration:none;

background:#EFEFEF;

}

#nav li ul{

display:none;

}

#nav li:hover ul{

display:block;

position:absolute;

top:37px;

left:0px;

margin:0px;

padding:3px;

width:160px;

background:#EFEFEF;

}

#nav li:hover ul li{

display:block;

float:none;

margin:0px;

padding:0px;

overflow:hidden;

}

#nav li:hover ul li a{

display:block;

margin:0px;

padding:0px 10px 0px 10px;

line-height:24px;

background:#D3D3D3;

color:#910E04;

font-weight:normal;

font-size:12px;

}

#nav li:hover ul li a:hover{

background:#910E04;

color:#fff;

}

</style>



<!--[if lte IE 6]>

<style type="text/css">

table {border-collapse:collapse; margin:0; padding:0;}

#nav li a.hide{

display:none;

}

#nav li a ul{

display:none;

}

#nav li a:hover ul{

display:block;

position:absolute;

top:37px;

left:0px;

margin:0px;

padding:3px;

width:160px;

background:#EFEFEF;

}

#nav li a:hover ul li{

display:block;

margin:0px;

padding:0px;

overflow:hidden;

height:24px;

float:none;  /*------------请注意这里,这里是新增加的-------------*/

}

#nav li a:hover ul li a{

display:block;

margin:0px;

padding:0px 10px 0px 10px;

line-height:24px;

background:#D3D3D3;

color:#910E04;

font-weight:normal;

font-size:12px;

}

#nav li a:hover ul li a:hover{

background:#910E04;

color:#fff;

}

</style>

<![endif]-->

</head>



<body>

    <ul id="nav">

        <li >

            <a href="index.htm">公司</a>

            <!--[if lte IE 6]>

            <a href="Product-1.htm">产品<table><tr><td>

            <![endif]-->

            <ul>

                <li><a href="#">关于我们</a></li>

                <li><a href="#">联系我们</a></li>

            </ul>

            <!--[if lte IE 6]>

            </td></tr></table></a>

            <![endif]-->

       </li>

        <li>

            <a class="hide" href="Technical-Overview.htm">技术</a>

            <!--[if lte IE 6]>

            <a href="Technical-Overview.htm">技术<table><tr><td>

            <![endif]-->

            <ul>

                <li><a href="Technical-Overview.htm">技术介绍</a></li>

                <li><a href="Technology-Mechanism.htm">技术机理</a></li>

            </ul>

            <!--[if lte IE 6]>

            </td></tr></table> </a>

            <![endif]-->

        </li>

        <li>

            <a class="hide" href="Product-1.htm">产品</a>

            <!--[if lte IE 6]>

            <a href="Product-1.htm">产品<table><tr><td>

            <![endif]-->

            <ul>

                <li><a href="Product-1.htm">工业环境使用产品</a></li>

                <li><a href="Product-2.htm">市政或天然环境使用产品</a></li>

            </ul>

            <!--[if lte IE 6]>

            </td></tr></table></a>

            <![endif]-->

        </li>

    </ul>

</body>

</html>
beyond_me21 2010-10-21
  • 打赏
  • 举报
 回复
在IE6的css下的#nav li a:hover ul li{
display:block;
margin:0px;
padding:0px;
overflow:hidden;
height:24px;
}
加一句float:none变成
#nav li a:hover ul li{
display:block;
margin:0px;
padding:0px;
overflow:hidden;
height:24px;
float:none;
}
我已经测试通过了，IE6 IE7 IE8和ff都兼容

zrkoreyoshi 2010-10-21
  • 打赏
  • 举报
 回复
[Quote=引用 11 楼 anheiguoke 的回复:]
有个东西叫 jquery jquery 有个东西叫slideup slidedown 几个东西可以非常简单实现你要那个效果
[/Quote]
我知道，现在就想用css+div
zrkoreyoshi 2010-10-21
  • 打赏
  • 举报
 回复
[Quote=引用 12 楼 wangxiaofeiwuqiao 的回复:]
引用 9 楼 zrkoreyoshi 的回复:
引用 7 楼 beyond_me21 的回复:
楼主要懂得自己思考。算了，给你完整代码
HTML code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<he……
[/Quote]
我是ie6 ，真的没效果，就是显示两排文字-----我没骗你们---
wangxiaofeiwuqiao 2010-10-21
  • 打赏
  • 举报
 回复
[Quote=引用 9 楼 zrkoreyoshi 的回复:]
引用 7 楼 beyond_me21 的回复:
楼主要懂得自己思考。算了，给你完整代码
HTML code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Co……
[/Quote]

它的代码我测试过，在IE8下是可以正常使用的。
itrefer 2010-10-21
  • 打赏
  • 举报
 回复
有个东西叫 jquery jquery 有个东西叫slideup slidedown 几个东西可以非常简单实现你要那个效果
itrefer 2010-10-21
  • 打赏
  • 举报
 回复
有个东西叫 jquery jquery 有个东西叫slideup slidedown 几个东西可以非常简单实现你要那个效果
zrkoreyoshi 2010-10-21
  • 打赏
  • 举报
 回复
[Quote=引用 7 楼 beyond_me21 的回复:]
楼主要懂得自己思考。算了，给你完整代码
HTML code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text……
[/Quote]
大哥，还是不对--
基于jQuery的在线商城设计与实现
#1 网站需求分析 1.1 主体说明 该网页包括了十一个页面，具体如下： Index.html（首页）、reg.html（注册页面）、login.html(登录页面)、about.html(关于页面)、info.html(提交订单信息)、member.html(个人信息)、message.html（留言页面）、payply.html(付款页面)、shopcar.html(购物车页面)、Product.html(商品列表页)、pwd.html(管理密码页面)， 图1.1 网页HTML文件 网站中Css文件夹为
HTML+CSS实现导航条及下拉菜单
html+css实现下拉菜单
网页设计下拉菜单栏css代码,HTML+CSS实现导航条下拉菜单的示例代码
效果代码中的图片可以自己换的下拉菜单HTML代码 首页成功案例品牌设计网页设计平面设计电子商城空间/建筑我要设计在线咨询会员注册会员登录下拉菜单CSS代码.header{height: 120px;width: 1046px;margin: 0 auto;}.header_left{float: left;line-height: 12...
HTML引入公共导航栏及导航栏下拉框被覆盖的解决方法
html中引入导航栏可以使用 iframe 内联框架首先制作一个公用头部文件 head.html ,在需要引入头部文件的开始位置增加以下代码： <iframe MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 VSPACE=0 FRAMEBORDER=0 SCROLLING=no src="head.html" height=“auto” width="100%...
可控制导航下拉方向的jQuery下拉菜单代码
可控制导航下拉方向的jQuery下拉菜单代码： 可控制导航下拉方向的jQuery下拉菜单代码 *{ margin:0; padding:0; list-style:none;} .nav{ width:700px; height:30px; line-height:30px; margin:200px auto;} .nav li a{ color:#fff; text-decora
.NET社区

62,271

社区成员

668,980

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧

+ 用AI写文章