垂直子菜单布局和行为不正确

垂直子菜单位置正确，但链接相互重叠。在主菜单中悬停时，它不会隐藏。在菜单外部悬停时隐藏。我不知道在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

垂直子菜单布局和行为不正确

回答

相关问题