[求助]我想做css下拉水平菜单,但做出来的是下拉菜单不是水平的,请问我该怎么改.
下面是css代码BODY {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; FONT-FAMILY: "Verdana"
}
.menu_iframe {
BORDER-RIGHT: 0px; BORDER-TOP: 0px; Z-INDEX: -1; FILTER: Alpha(Opacity=0); LEFT: 0px; VISIBILITY: inherit; BORDER-LEFT: 0px; WIDTH: 172px; BORDER-BOTTOM: 0px; POSITION: absolute; TOP: 0px; HEIGHT: 260px
}
UL#nav {
PADDING-RIGHT: 0px; BORDER-TOP: #ffffff 1px solid; PADDING-LEFT: 0px; Z-INDEX: 100; BACKGROUND: #DFDFDF left 50%; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; BORDER-BOTTOM: #ffffff 1px solid; LIST-STYLE-TYPE: none
}
#nav LI {
DISPLAY: block; Z-INDEX: 100; FLOAT: left
}
#nav LI A {
PADDING-RIGHT: 14px; DISPLAY: block; PADDING-LEFT: 14px; Z-INDEX: 100; BACKGROUND: url( #000) no-repeat right 55%; PADDING-BOTTOM: 3px; BORDER-LEFT: #ffffff 1px solid; COLOR: #000; PADDING-TOP: 3px; BORDER-BOTTOM: 0px; TEXT-DECORATION: none
}
#nav LI LI A {
BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px
}
#nav UL {
BORDER-RIGHT: #ffffff 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #ffffff 1px solid; PADDING-LEFT: 0px; Z-INDEX: 99; BACKGROUND: #dfdfdf; LEFT: -999em; PADDING-BOTTOM: 0px; MARGIN: 0px 0px 0px -1px; BORDER-LEFT: #ffffff 1px solid; WIDTH: 35px; PADDING-TOP: 0px; BORDER-BOTTOM: #ffffff 1px solid; POSITION: absolute; HEIGHT: auto
}
#nav UL UL {
MARGIN: -1.3em 0px 0px 12em
}
#nav LI LI {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 2px; WIDTH: 12em; PADDING-TOP: 2px; BORDER-BOTTOM: #000000 1px solid
}
#nav UL A {
BORDER-RIGHT: 0px
}
#nav LI:hover UL UL {
LEFT: -999em
}
#nav LI:hover UL UL UL {
LEFT: -999em
}
#nav LI.sfhover UL UL {
LEFT: -999em
}
#nav LI.sfhover UL UL UL {
LEFT: -999em
}
#nav LI:hover UL {
LEFT: auto
}
#nav LI LI:hover UL {
LEFT: auto
}
#nav LI LI LI:hover UL {
LEFT: auto
}
#nav LI.sfhover UL {
LEFT: auto
}
#nav LI LI.sfhover UL {
LEFT: auto
}
#nav LI LI LI.sfhover UL {
LEFT: auto
}
#nav LI:hover {
}
#nav LI.sfhover {
}
#nav UL LI:hover {
}
#nav UL UL LI:hover {
}
#nav UL LI.sfhover {
}
#nav UL UL LI.sfhover {
}
#nav UL LI A {
BACKGROUND: none transparent scroll repeat 0% 0%
}
#nav UL UL LI A {
BACKGROUND: none transparent scroll repeat 0% 0%
}
#nav UL LI A:hover {
}
#nav UL UL LI A:hover {
}
下面是函数
<SCRIPT language=JavaScript>
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
if (!document.getElementById)
document.getElementById = function() { return null; }
function initializeMenu(menuId, actuatorId) {
var menu = document.getElementById(menuId);
var actuator = document.getElementById(actuatorId);
if (menu == null || actuator == null) return;
actuator.parentNode.style.background = "url( ) 20% 10px no-repeat";
actuator.onclick = function() {
var display = menu.style.display;
this.parentNode.style.background =
(display == "block") ? "url( ) 20% 10px no-repeat" : "url( ) 20% 10px no-repeat";
menu.style.background = "url( )";
menu.style.display = (display == "block") ? "none" : "block";
return false;
}
}
function Preload() {
var args = simplePreload.arguments;
document.imageArray = new Array(args.length);
for(var i=0; iargs.length; i++) {
document.imageArray[i] = new Image;
document.imageArray[i].src = args[i];
}
}
</SCRIPT>
