html - 如何修复 CSS 菜单错误

标签 html css

我有一个 CSS3 菜单。当菜单项文本太长时，设计就会中断。我希望文字简单地向上移动以适合 文本。例如:在 www.casa.gov.au 上，菜单项文本 REGULATIONS AND POLICY 的开头高于其余部分 的元素。这可以防止菜单宽度和高度发生变化以适应较大的文本。

我将如何使用 JS FIDDLE 中附带的菜单来执行此操作:http://jsfiddle.net/UU4rm/

问题与#css li a { } 处的行高有关

CSS 代码

/* MENU */
 #cssmenu {
    border:none;
    border:0px;
    margin:0px;
    padding:0px;
    font-size:12px;
    font-weight:bold;
    border-bottom: solid 1px rgb(77,77,77);
}
#cssmenu ul {
    background:#333333;
    height:39px;
    list-style:none;
    margin:0;
    padding:0;
    display: table;
    width: 100%;
}
#cssmenu li {
    padding:0px;
    display: table-cell;
    width: 115px;
}
#cssmenu li a {
    background:#333333 url('../images/seperator.gif') bottom right no-repeat;
    color:#FFF;
    display:block;
    font-weight:normal;
    line-height:39px;
    margin:0px;
    padding:0px 0px;
    text-align:center;
    text-decoration:none;
    width: 115px;
}
#cssmenu li a:hover, 
#cssmenu ul li:hover a,
#cssmenu li a:focus, 
#cssmenu ul li:focus a{
    background: #2580a2;
    color:#FFFFFF;
    text-decoration:none;
    float: none;
}
#cssmenu li ul {
    background:#333333;
    display:none;
    height:auto;
    padding:0px;
    margin:0px;
    border:0px;
    position:absolute;
    width:230px;
    z-index:200;
    /*top:1em;
    /*left:0;*/
}
#cssmenu li.force-show ul,
#cssmenu li:hover ul,
#cssmenu li a:focus + ul{
    display:block;
}
#cssmenu li li {
    background:url('../images/sub_sep.gif') bottom left no-repeat;
    display:block;
    float:none;
    margin:0px;
    padding:0px;
    width:230px;
}
#cssmenu li:hover li a, 
#cssmenu li:focus li a {
    background:none;
}
#cssmenu li ul a {
    display:block;
    height:35px;
    font-size:11px;
    font-style:normal;
    margin:0px;
    padding:0px 10px 0px 15px;
    text-align:left;
    width: 205px;
}
#cssmenu li ul a:hover, 
#cssmenu li ul li:hover a,
#cssmenu li ul a:focus, 
#cssmenu li ul li:focus a{
    background:#2580a2 url('../images/hover_sub.gif') center left no-repeat;
    border:0px;
    color:#ffffff;
    text-decoration:none;
    width: 205px;
}
#cssmenu p {
    clear:left;
}
:focus {
    outline:none;
}
::-moz-focus-inner {
    border:0;
}

HTML代码

<div id="cssmenu">                                  <ul>                <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:HOMEPAGE:1017433626:pc=PC_90001">Home</a></li>         
                    <li class="has-sub">                <a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_90002">Operations</a>                <ul>            
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_90003">Individuals</a>                       
      </li>
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_90123">Aircraft owners</a>                       
      </li>
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_90276">Aircraft operators</a>                        
      </li>
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_90389">Flight training</a>                       
      </li>
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_90405">Aerodromes</a>                        
      </li>
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_90447">Office of airspace regulation</a>                     
      </li>
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_93439">Sport aviation</a>                        
      </li>
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_93379">Class D</a>                       
      </li>
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_100058">Non-towered aerodromes</a>                       
      </li>
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_90385">Dangerous goods</a>                       
      </li>
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_100808">Ground operations</a>                        
      </li>
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_100847">Non-compliance notice</a>                        
      </li>
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_100374">Unmanned Aircraft Systems (UAS)</a>                      
      </li>
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_100705">General Aviation (GA) task force </a>                        
      </li>
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_100852">Regional Aviation Safety Forum (RASF)</a>                        
      </li>
                    <li><a href="http://casa.gov.au/aod" target="_top">Drug and Alcohol Management Plans</a>                        
      </li>
                    </ul></li>          
                    <li class="has-sub">                <a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_90473">Airworthiness</a>             <ul>            
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_100610">Maintenance regulations</a>                      
      </li>
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_90474">Personnel</a>                     
      </li>
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_90496">Certification and design</a>                      
      </li>
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_90507">Manufacturing</a>                     
      </li>
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_90515">Continuing airworthiness</a>                      
      </li>
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_90822">Airworthiness directives</a>                      
      </li>
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_90821">Maintenance organisations</a>                     
      </li>
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_101038">Flight test and evaluation</a>                       
      </li>
                    </ul></li>          
                    <li class="has-sub">                <a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_90900">Regulations &amp; Policy</a>              <ul>            
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_90902">Current rules</a>                     
      </li>
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:PWA:1017433626:pc=PC_91070">Changing the rules</a>                     
      </li>
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_91181">Enforcement action</a>                        
      </li>
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:PWA:1017433626:pc=PC_91190">Policy notices</a>                     
      </li>
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_100396">Australia's state safety program</a>                     
      </li>
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_101078">Performance based navigation (PBN)</a>                       
      </li>
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_101326">Licensing regulations</a>                        
      </li>
                    </ul></li>          
                    <li class="has-sub">                <a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_91263">Manuals &amp; forms</a>               <ul>            
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_91264">Manuals</a>                       
      </li>
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_91308">Forms</a>                     
      </li>
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_91316">CASA online store</a>                     
      </li>
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_101402">Temporary Management Instructions (TMIs)</a>                     
      </li>
                    </ul></li>          
                    <li class="has-sub">                <a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_91314">Education</a>             <ul>            
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_101349">AviationWorx</a>                     
      </li>
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_100101">eLearning catalogue</a>                      
      </li>
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_91346">Flight Safety Australia</a>                       
      </li>
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_90006"> Pilot guides and information </a>                        
      </li>
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_100138">OnTrack</a>                      
      </li>
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_100994">Human factors</a>                        
      </li>
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_91430">Safety management systems</a>                     
      </li>
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_91329">Seminars and workshops</a>                        
      </li>
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_91317">Aviation safety advisers</a>                      
      </li>
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_91455">Advice for air travellers</a>                     
      </li>
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_91316">CASA online store</a>                     
      </li>
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_101317">Out-n-Back</a>                       
      </li>
                    </ul></li>          
                    <li class="has-sub">                <a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_91488">Services</a>              <ul>            
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_91489">Licences &amp; registrations</a>                      
      </li>
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:SSP:1017433626:pc=PC_91499">Self Service Portal</a>                        
      </li>
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_91510">Service standards &amp; fees</a>                      
      </li>
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_91517">Permission application centre (PAC)</a>                       
      </li>
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_91521">Aviation medicals</a>                     
      </li>
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_100450">Delegates and authorised persons</a>                     
      </li>
                    </ul></li>          
                    <li class="has-sub">                <a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_91621">About CASA</a>                <ul>            
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_91622">Contact CASA</a>                      
      </li>
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_93342">CASA board</a>                        
      </li>
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_91668">CASA's Director</a>                       
      </li>
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_91703">Recent media releases</a>                     
      </li>
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_92568">Corporate publications</a>                        
      </li>
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_100448">CASA on Twitter</a>                      
      </li>
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_92918">Corporate policy</a>                      
      </li>
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_92936">Careers at CASA</a>                       
      </li>
                    <li><a href="HTTP://wcmstest/scripts/nc.dll?WCMS:STANDARD:1017433626:pc=PC_92956">Research and statistics</a>                       
      </li>
                    </ul></li>          
</ul>
</div>

最佳答案

在我看来(在 FF 中)是底部边框属性导致菜单下出现一条愚蠢的黑线。

#cssmenu {
    border-bottom: solid 1px rgb(77,77,77);
}

消除底部边框属性，并向菜单项添加附加文本(导致换行/第二行)按预期运行。

关于html - 如何修复 CSS 菜单错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16409729/

上一篇：html - Firefox 特定的 css 填充

下一篇：使用固定宽度的容器时，HTML/CSS(Twitter Bootstrap)页脚无法正确显示？

相关文章：

javascript - JS/CSS : how to animate a circle to pill shape?

jquery - 根据数字的值在 div 中设置样式数字

html - 在 Mac 上垂直对齐 div 中的表情符号

标题中的 jQuery Mobile 按钮图标位于下方

javascript - 使用选项卡切换按钮

html - Materializecss - 垂直对齐表单/集合

javascript - 不能为子元素的字体大小设置动画？

javascript - 当输入字段中名称以 "#"符号开头时，如何使我的搜索字段按标签名称过滤图像

html - 使图片位于文章的左侧

jquery - 使用 jQuery closest 或 next 切换选择列表？

©2024 IT工具网  联系我们