62,272
社区成员
发帖
与我相关
我的任务
分享如何用div写首页的导航下拉菜单？在线等阿
如何用div写首页的导航下拉菜单阿？(就是鼠标放在首页的导航上，会显示下拉的选项)
通过样式写可以吗？跪求---
通过样式写可以吗？跪求---
...全文
请发表友善的回复…
发表回复
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]
[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]
这个不行阿，只有白色的样式，下拉也没显示阿
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
- 打赏
- 举报
beyond_me21 2010-10-21
- 打赏
- 举报
css(主样式表)
IE6.CSS(针对ie6及以下浏览器不支持hover的伪类问题)
html
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]
我看见了，非常感谢您，
那有没有精简点的？
如何用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>
<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都兼容
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
有个东西叫 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 ，真的没效果，就是显示两排文字-----
我没骗你们---
引用 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下是可以正常使用的。
引用 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]
大哥，还是不对--
楼主要懂得自己思考。算了，给你完整代码
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]
大哥，还是不对--
