下拉菜单悬停显示第一

我花了一些示例代码来创建一个下拉菜单，此网站：http://www.javascriptkit.com/script/script2/verticalmenu.shtml 下拉菜单悬停显示第一

我一直在编辑它，以便在主菜单会用我自己的形象（而不是他们反复绿色一个），然后下拉菜单将是一个大的灰色块（而不是他们重复的绿色块）。

我已经能够插入我自己的图像的主菜单，也有一个成功的灰色块翻转下拉菜单。

问题：当我测试页面，它开始与下拉菜单中打开。我认为这个问题是在我的CSS/HTML操作中的某个地方。我应该改变我的JavaScript中发生了什么？我注意到它正在调用UL标签。

这是当我打开我的页面图片：

http://imageshack.us/photo/my-images/850/hoverproblem.png/

这是它滑过后正常工作的图片：

http://imageshack.us/photo/my-images/152/hoverproblem2.png/

HTML：

<ul id="verticalmenu" class="glossymenu"> 
<li style="height:30px;"><a href="#" style="text-decoration:none;"></a> 
    <ul id="submenu"> 
    <li id="submenuli"><a href="#" style="color:white; font: bold 12px Verdana, Helvetica, sans-serif;">JavaScript Reference</a></li> 
    <li id="submenuli"><a href="#">DOM Reference</a></li> 
    <li id="submenuli"><a href="#">CSS Reference</a></li> 
    </ul> 
</li>

CSS：

.glossymenu, .glossymenu li ul { 
list-style-type: none; 
margin: 0; 
padding: 0; 
width: 276px; /*WIDTH OF MAIN MENU ITEMS*/ 
height: 30px; 
} 

.glossymenu li{ 
position: relative; 
} 

.glossymenu li ul{ 
background: url(../Kruger%20Optical/images/tacdriver/riflenav.png); 
font: bold 12px Verdana, Helvetica, sans-serif; 
color: white; 
display: block; 
width: 276px; 
height: 30px; 
text-decoration: none; 
}

/*子菜单，SUBMENULI是在下拉菜单中，保持当我加载的页面*/

#submenu { /*SUB MENU STYLE*/ 
position: absolute; 
background-color: #373737; 
height: 300px; 
width: 300px; /*WIDTH OF SUB MENU ITEMS*/ 
left: 0; 
top: 0; 
display: hidden; 
} 

#submenuli { 
position: relative; 
list-style-type: none; 
margin: 0; 
width: 300px; /*WIDTH OF MAIN MENU ITEMS*/ 
height: 20px; 
display: hidden; 
padding:15px; 
font: bold 12px Verdana, Helvetica, sans-serif; 
color: white; 
float: left; 
} 

.glossymenu li ul li{ 
float: left; 
}

JAVASCRIPT出现：

var menuids=new Array("verticalmenu") //Enter id(s) of UL menus, separated by commas 
var submenuoffset=-2 //Offset of submenus from main menu. Default is -2 pixels. 

function createcssmenu(){ 
for (var i=0; i<menuids.length; i++){ 
    var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul") 
    for (var t=0; t<ultags.length; t++){ 
    var spanref=document.createElement("span") 
    spanref.innerHTML="&nbsp;&nbsp;" 
    ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref) 
ultags[t].parentNode.onmouseover=function(){ 
this.getElementsByTagName("ul") [0].style.left=this.parentNode.offsetWidth+submenuoffset+"px" 
this.getElementsByTagName("ul")[0].style.display="block" 
} 
ultags[t].parentNode.onmouseout=function(){ 
this.getElementsByTagName("ul")[0].style.display="none" 
    } 
    } 
     } 
} 


if (window.addEventListener) 
window.addEventListener("load", createcssmenu, false) 
else if (window.attachEvent) 
window.attachEvent("onload", createcssmenu)

来源

2012-07-15 user1486934

你已经在#submenu上设置了display: block;。这告诉渲染引擎将其显示为块元素。当用户在悬停他们的鼠标

display: none;

然后，您会需要的JavaScript，这将使#submenu可见的一个片段：你想它时隐时现的第一次加载页面，让您的样式表应该包含这个规则#submenu主菜单栏中的<li>元素。

来源

2012-07-15 23:31:36

我编辑了#submenu和#submenuli的隐藏显示，但他们仍然显示在开始。 – user1486934 2012-07-15 23:34:13

哦对不起！我迷惑了'能见度'和'显示器'。尝试设置'display：none'而不是'display：hidden'。 – 2012-07-15 23:49:17

好的，可以工作！ – user1486934 2012-07-15 23:53:37

将#submenu的显示设置为none并且应该解决问题。

来源

2012-07-16 00:24:19

下拉菜单悬停显示第一

回答

相关问题