下拉菜單不顯示

我無法得到這個菜單的下拉菜單來顯示 - 我確定這是一個簡單的修復 - 我只是沒有看到它。菜單本身沒什麼特別，沒有子菜單 - 只需簡單的拖放選項。我已經檢查了幾個教程，它們都是不同的，所以如果我能夠在調整工作方面得到幫助，那麼我已經做到了這一點，這將是最好的方案。感謝您提前提供任何幫助！下拉菜單不顯示

#headernav { 
    float: right; 
    width: 555px; 
    padding: 0px; 
    text-align:center; 
    margin:0; 
    list-style-type:none; 

} 

#headernav li { 
    float:left; 
} 

#headernav li a { 
    display: block; 
    text-decoration: none; 
    width:6em; 
    height:35px; 
    text-decoration:none; 
    color:#161616; 
    background:url(../images/linkbg2.png); 
    background-repeat:no-repeat; 
    padding:0.2em 0.6em; 
    padding-top:20px; 
    margin-left:3px; 
    font-size:14px; 
    letter-spacing:1px; 
    font-weight:500; 
} 


#headernav li a:hover { 
    text-decoration: none; 
    height:35px; 
    color: #161616; 
    position: relative; 
    width: 6em; 
    text-align: center; 
    padding:0.2em 0.6em; 
    display: inline; 
    float:left; 
    padding-top:20px; 
    margin-left:3px; 
    cursor:pointer; 
} 

#headernav li ul { 
    display:none; 
} 

#headernav li hover:ul { 
    display:block; 
    position:absolute; 
    width:150px; 
    background:#03C; 
    list-style:none; 
} 

#headernav ul li { 
    float: none; 
} 

#headernav ul li a { 
    display: block; 
    border-top: 1px solid #666; 
}

HTML：

<ul id="headernav"> 
<li><a href="donate.html">Donate</a></li> 
<li><a href="answers.html">Answers</a></li> 
<li><a style="width:8.5em;" href="news.html">News & Events</a></li> 

<li><a href="about.html">About Us</a> 
<ul> 
     <li><a href="mission.html">Mission</a></li> 
</ul> 
</li> 

<li><a href="contact.html">Contact</a></li> 
</ul>

來源

2013-01-13 user1913714

你是否反對使用JavaScript或jQuery？ –

不 - jquery是好的，但我真的想讓我已經有工作 - 我正在學習 – user1913714

我想你的意思是寫

#headernav li:hover ul {

，而不是#headernav li hover:ul {

而且很可能需要添加像top: 60px;這一類。

來源

2013-01-13 01:01:08 subarachnid

哦......就是這樣 - 謝謝！我想要在主li上添加一個小箭頭來展開下一個li，而不是將鼠標懸停在整個鏈接上......是否有一種簡單的方法可以執行此操作？ – user1913714

我會再添加一個答案 – subarachnid

謝謝！另外，當我添加多個鏈接到第二節，鏈接顯示並排而不是一個在另一個之上...如何解決？ – user1913714

一個非常簡單的方法來添加箭頭將是：

#headernav li { 
    float:left; 
    position:relative; <-- add this 
}

那麼這個類添加到您的CSS

#headernav li a.hasdropdown:after { 
    content: " "; 
    width: 0px; 
    height: 0px; 
    border-style: solid; 
    border-width: 7px 6px 0 6px; 
    border-color: #000000 transparent transparent transparent; 
    position:absolute; 
    left: 90px; 
    top: 24px; 
}

的「hasdropdown」類添加到每個錨標記，應顯示一個箭頭：

<li><a href="about.html" class="hasdropdown">About Us</a>

希望這會有所幫助。

來源

2013-01-13 01:35:36 subarachnid

沒有做任何事情 - 什麼也沒有出現。我不知道這是因爲我使用鏈接的背景圖像？ – user1913714

這是可能的，如果背景圖像是純黑色:)很難說沒有看到完整的HTML代碼發生了什麼。 – subarachnid

下拉菜單不顯示

回答

相關問題