为什么我的下拉菜单无法点击并且我的页面选项卡无法始终正常运行？

Question

所以我看到了我们提出的问题的一些变体，但没有一个解决方案适用于我的博客。 http://icantaffordmylifestyle.blogspot.com/

所以我这几天一直在搞乱完善这段代码，这让我发疯了，我无法弄清楚。如果我先单击其他选项卡之一，“关于”、“联系方式”、“生活方式”和“Om-Nomnom”页面都不会打开。我必须先单击主页链接才能刷新。所以它只有在它是第一个被点击或者我在点击新链接之前回家时才有效。然后下拉框也不起作用！当我仍然试图让链接正常工作并将它放在我的页面底部时，它们工作得很好，但是现在我已经将它移到它所属的页面顶部它停止工作了。下拉框消失得太快，无法单击任何内容，除非我将其移动得足够快且位于正确的位置。如何让我的链接更一致地工作并使下拉菜单更好地工作？

这里是html：

<div id='mbtnavbar'> 
<ul id='mbtnav'> 
  <li>   <a href=/ >| HOME/</a> 
  </li> 
  <li>
  <a href="p/about_12.html"> | ABOUT </a> 
         </li> 
 <li>
  <a href="p/pradvertising.html"> |  CONTACT/ SERVICES</a> 
         </li> 
<li> 
  <a href= "search/label/Lifestyle">| LIFESTYE LOOKS</a> 
</li> 
<li> 
  <a href="search/label/Daily%20Look%20Book">| OOTD FASHIONS</a> 
</li>
    <li><a href="p/Lifestyle_9.htm">| LIFESTYLE</a>
        <ul>
            <li><a href="search/label/Music">| MUSIC</a></li>
            <li><a href="search/label/DIY">| DIY</a></li>
            <li><a href="search/label/My%20Art">| MY ART</a></li>
            <li><a href="search/label/Nail%20Art">| NAIL ART</a></li>
            <li><a href="search/label/Life">| LIFE</a></li>
        </ul>
    </li>

    <li><a href="p/nom.html">| OM-NOMNOM </a>
        <ul>
            <li><a href="search/label/Nom%20Diaries">| NOM DIARIES</a></li>
            <li><a href="search/label/Nomventure">| NOM-ventures</a></li>
            <li><a href="search/label/Beverage%20Adventures">| LINKS TO MY DRINKS</a></li>
            <li><a href="search/label/Healthy%20Nom">| HEALTHY NOMS</a></li>

        </ul>
    </li>

    <!-- etc. -->

</ul></div>

& CSS 在这里：

/*----- MBT Drop Down Menu ----*/ 
<center>
#mbtnavbar { 
/* background: #ffffff; */ 
width: 100%; 
color: #3cd0b6; 
margin: 0px; 
padding: 0; 
position: relative; 
border-top:0px solid #ffffff; 
height: 41px; 
vertical-align: text-middle;
} 

#mbtnav { 
background: #ffffff; 
margin: 0; 
padding: 0; 
} 

#mbtnav ul { 
float: center; 
list-style: none; 
margin: 0; 
padding: 0; 
} 

#mbtnav li { 
list-style: none; 
margin: 0; 
padding: 0; 
/* border-left:1px solid#ffffff; 
border-right:1px solid #ffffff; */ 
height:41px;
vertical-align: text-middle;
}  

#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited { 
color: #3cd0b6; 
display: block; 
font:bold 24px sue ellen francisco; 
margin: 0; 
padding: 9px 12px 10px 12px; 
text-decoration: none; 
} 

#mbtnav li a:hover, #mbtnav li a:active { 
background: #ffffff; 
color: #3cd0b6; 
display: block; 
text-decoration: none; 
margin: 0; 
padding: 9px 12px 10px 12px; 
} 

#mbtnav li { 
float: left; 
padding: 0; 
} 

#mbtnav li ul { 
z-index: 9999; 
position: absolute; 
left: -999em; 
height: auto; 
width: 200px; 
margin: 0; 
padding: 0; 
} 

#mbtnav li ul a { 
width: 180px; 
} 

#mbtnav li ul ul { 
margin: -35px 0 0 161px; 
} 

#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul { 
left: -999em; 
} 

#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul { 
left: auto; 
} 

#mbtnav li:hover, #mbtnav li.sfhover { 
position: static; 
} 

#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited { 
background: #ffffff; 
/* width: 140px; */ 
color: #3cd0b6; 
display: block; 
font:bold 16px sue ellen francisco; 
margin: 0; 
padding: 9px 12px 10px 12px; 
text-decoration: none; 
z-index:9999; 
border-bottom:1px dotted #333; 
} 

#mbtnav li li a:hover, #mbtnavli li a:active { 
background: #ffffff; 
color: #FC9F35; 
display: block; 
margin: 0; 
padding: 9px 12px 10px 12px; 
text-decoration: none; 
} 

.tabs-inner .widget #mbtnavbar li a { 
border-left:none; 
} 

.tabs-outer .widget, .section { 
margin:0; 
} 

.tabs-inner { 
padding: 0px; 
}

Answer 1

删除您的li 高度：

#mbtnav li {
    list-style: none;
    margin: 0;
    padding: 0;
    height: 41px; <-this one
    vertical-align: text-middle;
}