下拉菜單懸停顯示第一

我花了一些示例代碼來創建一個下拉菜單，此網站：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

下拉菜單懸停顯示第一

回答

相關問題