html - CSS 下拉菜单消失

Question

所以我有一个下拉菜单，它按原样工作得很好，但是当我尝试更改下面找到的字体大小时:

#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
background: #897768;
/* width: 140px; */
color: #FFF; 
display: block; 
font:bold 13px Futura, Impact, Helvetica, Arial, sans-serif; 
margin: 0; 
padding: 9px 12px 10px 12px; 
text-decoration: none; 
z-index:9999; 
border-bottom:0px; 
}  

从 15px 到任何更大的值，它都会导致下拉菜单消失 - 每当您将鼠标从静态对象上向下移动以选择其中一个选项时。 我不确定我需要更改什么才能使菜单使用更大的文本。

下面是完整的 CSS 代码和 HTML 示例:

.Header h1 {text-shadow: 2px 2px #FFFFFF; } 
/*----- MBT Drop Down Menu ----*/ 

#mbtnavbar { 
/* background: #897768; */ 
width: 100%; 
color: #897768; 
margin: 0px; 
padding: 0; 
position: relative; 
border-top:0px solid #FFF; 
height: auto; 
} 

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

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

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

#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited { 
color: #4F4F4F; 
display: block; 
font:bold 15px Crushed, sans-serif; 
margin: 0; 
padding:9px 12px 10px 12px; 
text-decoration: none; 
} 

#mbtnav li a:hover, #mbtnav li a:active { 
background: #FFFFFF; 
color: #65a5b2; 
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: 200px; 
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: #897768; 
/* width: 140px; */ 
color: #FFF; 
display: block; 
font:bold 13px Futura, Impact, Helvetica, Arial, sans-serif; 
margin: 0; 
padding: 9px 12px 10px 12px; 
text-decoration: none; 
z-index:9999; 
border-bottom:0px; 
} 

#mbtnav li li a:hover, #mbtnavli li a:active { 
background: #897768; 
color: #000000; 
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; 
}

HTML:

    <div id="mbtnavbar">
    <ul id="mbtnav">

    <li>
    <a href="URL">Home</a>
    </li>


    <li>
     <a href="URL">About</a>
      <ul>
          <li><a href="URL">#1</a></li>  
          <li><a href="URL">#2</a></li>
          <li><a href="URL">#3</a></li>
        </ul>
    </li>


    </ul>
    </div>

Answer 1

我给了这个，它的工作原理..你想要这样的东西吗？

 #mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited { 
background: #897768; 
/* width: 140px; */ 
color: #FFF; 
display: block; 
font:bold 13px Futura, Impact, Helvetica, Arial, sans-serif; 
margin: 0; 
padding: 9px 12px 10px 12px; 
text-decoration: none; 
z-index:9999; 
border-bottom:0px; 
font-size:20px;
}