垂直子菜單佈局和行爲不正確

垂直子菜單位置正確，但鏈接相互重疊。在主菜單中懸停時，它不會隱藏。在菜單外部懸停時隱藏。我不知道在CSS中添加/更改什麼。垂直子菜單佈局和行爲不正確

nav { 
    padding-top: 183px; 
    margin-left: auto; 
    margin-right: auto; 
} 
    ul { 
    padding: 0; 
    margin: 0; 
} 
nav ul { 
    list-style: none; 
    font-weight: bold; 
    font-size: 20px; 
    margin: 5px; 
    width: 200px; 
} 
nav ul ul { 
    display: none; 
    margin: 0px; 
    padding: 0px; 
} 
nav ul li { 
    float: left; 
} 
nav ul a { 
    display: block; 
    width: 145px; 
    text-align: center; 
    text-decoration: none; 
    color: #fff; 
    border: 1px solid #004c99; 
    border-radius: 8px; 
    margin-right: auto; 
    margin-left: auto; 
    padding-top: 5px; 
    padding-right: 9px; 
    padding-bottom: 5px; 
    padding-left: 9px; 
} 
nav ul a:active  { 
    background: rgba(255,255,255,0.4); 
    color: #FFF; 
} 
nav ul li a:hover, ul a:focus { 
    text-decoration: none; 
    background-color: #6699cc; 
    color: #FFFFFF; 
} 
nav ul a:link, nav ul a:visited { 
    background: rgba(255,255,255,0.2); 
    color: #FFFFFF; 
} 
nav ul li a { 
    display: block; 
    margin-top: 0px; 
} 
nav ul ul li { 
    float: none; 
    position: relative; 
} 
nav ul ul li a { 
    color: #fff; 
    margin-top: -35px; 
    position: relative; 
    margin-left: 165px; 
} 
nav ul ul li a:hover { 
    background: #6699cc; 
} 
nav ul ul li a:active, ul ul li a:link , ul ul li a:visited{ 
    background-color: #3370AD; 
} 
nav ul li:hover { 
    margin-top: 0px; 
} 
nav ul li:hover > ul{ 
    display: block; 
    position: absolute; 
} 
nav ul:after { 
    content: ""; 
    clear: both; 
    display: block; 
}

提前感謝！

來源

2013-01-15 Jatara

您可以包括屏幕截圖或鏈接？剛剛看到鏈接對不起 –

更改導航欄顯示：塊; margin-top：0px;} to ... margin-top：5px，看看是否能完成這項工作。這將解決問題的間距反正

來源

2013-01-15 15:34:30

謝謝！但不幸的是，它並沒有幫助。它只在父菜單中添加空間。 – Jatara

nav ul li a display：block; margin-top：0px; } nav ul li ul li { float：none; 位置：相對; } nav ul li ul li a {*} text-align：left; */ color：#fff; width：230px; 位置：相對; margin-left：165px; } nav ul li ul li a：hover { background：＃6699cc; } navi li li li a：active，ul li li li：link，ul li li li：visited {background} color：＃3370AD; } nav ul li：hover { margin-top：0px; } 我改變了上述和它改善。 –

這發生在我身上時，我嵌套子菜單錯誤：

<ul id="main menu"> 

    <li> 
     <a>Menu item</a> 
     <!-- DO NOT CLOSE THIS LI TAG YET! --> 

     <ul> 
      <li>Submenu item</li> 
     </ul> 

    </li> <!-- NOW YOU CAN CLOSE IT --> 

</ul>

來源

2013-03-28 15:36:00 Kate

垂直子菜單佈局和行爲不正確

回答

相關問題