CSS下拉菜單

我想弄清楚爲什麼下拉下來後，你試圖翻轉它。有人可以在我的代碼中看到問題嗎？謝謝。

這裏是我的HTML菜單

<div id="menu"> 
    <ul> 

    <li><a href="/usa/discoversimulation/needs/"><span>Needs Assessment</span></a> </li> 
    <li><a href="/usa/discoversimulation/knowledge/"><span>Knowledge Acquisition</span></a> 
     <ul> 
      <li><a href="/usa/discoversimulation/knowledge/pre_test.asp">Administer Knowledge<br>Pre-Test</a></li> 
      <li><a href="/usa/discoversimulation/knowledge/assign_asthma.asp">Assign Asthma<br>Article </a></li> 
      <li><a href="/usa/discoversimulation/knowledge/post_test.asp">Administer Knowledge<br>Post-Test</a></li> 
      <li><a href="/usa/discoversimulation/knowledge/discuss_asthma.asp">Discuss Asthma<br>Case Study</a></li> 

     </ul> 
    </li> 
    <li><a href="/usa/discoversimulation/skills/"><span>Skills Proficiency</span></a> </li> 
    <li><a href="/usa/discoversimulation/simulation/"><span>Simulation in Teams</span></a> 
     <ul> 
      <li><a href="/usa/discoversimulation/simulation/asthma.asp">Perform Asthma<br>Simulation</a></li> 
      <li><a href="/usa/discoversimulation/simulation/debrief.asp">Facilitate<br>Debriefing</a></li> 
     </ul> 
    </li> 
    <li><a href="/usa/discoversimulation/performance/"><span>Performance</span></a></li> 
    <li><a href="/usa/discoversimulation/resources/"><span>Resources</span></a></li> 
    </ul> 
</div>

這裏是我的CSS

#menu { 
position: relative; 
top: 10px; 
left: 0px; 
width: 940px; 
height: 47px; 

} 

#menu ul { 
position: relative; 
top: -15px; 
left: 0px; 
margin-left: 0px; 
padding-left: 0px; 
list-style: none; 
} 

#menu ul li { 
position: relative; 
display: inline; 
float: left; 
list-style: none; 
margin-right: 0px; 
border: solid 0px #4981a8; 
width: 156px; 
background-image: url  ('http://www.laerdal.com/Laerdal/usa/discoversimulation/images/button.png'); 
background-repeat: no-repeat; 
} 

#menu ul li a { 
display: block; 
width: 156px; 
padding: 12px 0px 10px 0px; 
border: solid 0px #fff; 
font-family: 'Cabin', sans-serif; 
font-size: 14px; 
font-weight: lighter; 
text-align: center; 
text-decoration: none; 
} 

#menu a span { 
float: left; 
display: block; 
padding: 3px 5px 4px 6px; 
color:#fff; 
float: none; 
} 

#menu a:hover span { 
color:#ffdd00; 
} 

#menu li ul { 
position: absolute; 
top: 47px; 
left: 0px; 
background-color:#4981a8; 
border: solid 1px #4981a8; 
display: none; 
} 

#menu li:hover ul { 
display: block; 
z-index: 999; 

} 

#menu li li a { 
font-family: 'Cabin', sans-serif; 
font-size: 14px; 
color: #000; 
font-weight: lighter; 
height: 38px; 
background-color:#eee; 
margin-bottom: -9px; 
} 

#menu li li a:hover { 
color: #065389; 
}

來源

2012-02-09 stevenpepe

不是一個真正的解決方案，但你可以嘗試使用這個教程，我幾個月前寫道http://www.onextrapixel.com/2011/06/03/how-to-create-a-horizontal-dropdown-menu-與-html-css和jquery/ – elclanrs 2012-02-09 20:26:03

http://stackoverflow.com/questions/8422123/css-dropdown-menu-add-delay-on-mouse-out – 2012-02-09 20:31:00

你有你的頁面上的其他元素多數民衆贊成部分覆蓋了導航：

#textbox { 
    position: relative; 
    top: -30px; 
}

這是阻止:hover。要解決這個問題，請給你的#header一個z-index:1。任何正值都可以工作，您只需將其設置爲某個元素，以便元素保持在最前面。

來源

2012-02-09 20:48:15

就是這樣。我知道這很簡單，但我只是看不到它。謝謝。 – stevenpepe 2012-02-09 20:54:26

CSS下拉菜單

回答

相關問題