CSS下拉菜单的问题

我使用CSS构建了一个下拉菜单。所有的定位都是对的，而且看起来很棒。但是无法点击子菜单选项。子菜单出现在光标位于导致下拉的按钮上方，但是一旦光标向下移动，尝试点击链接，菜单就会消失。我试过改变z-index和定位，但它似乎没有工作。CSS下拉菜单的问题

（有两个下拉子菜单，一个接一个，但网站不会让我发布html代码。#navigation指的是整个导航栏，menu是包含submenus和sub_menu的div都是每个单独的子菜单） CSS代码是：

#navigation { width: 100%; background: #1C140D; /*BUTTONS*/ } 
#navigation ul { margin: 0; padding: 0; width: 100%; } 
#navigation ul li { list-style-type: none; display: inline; color:#1C140D; } 
#navigation li a { display: block; float: left; padding: 5px 10px; color: #FFFFFF; text-decoration: none; border-right: 1px solid #FFFFFF; border-left: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF; } 
#navigation li a:hover { background: #000000; color: #FFFFFF; } 
#content-container { float: left; width: 100%; height: 175px; background: #FFFFFF url(/wp-content/uploads/layout-three-fixed-background.gif) repeat-y 100% 0; color: #F2E9E1; } 
ul { font-family: Arial, Verdana; font-size: 14px; margin:0; padding:0; list-style:none; } 
ul li { display: block; position: relative; float: left; color: #1C140D; } 
li ul {display:none; } 
ul li a { display: block; text-decoration: none; color: #1C140D; border-top: 1px solid #FFFFFF; padding: 15px 15px 15px 15px; background: #1C140D; /*BUTTONS*/ margin-left: 1px; white-space: nowrap; } 
ul li a:hover { background:#1C140D; } 
li:hover ul { display: block; } 
ul.sub_menu { position:absolute; border-bottom: 1px solid #FFFFFF; color: #1C140D; top: 30px; } 
li:hover li { float: none; font-size: 14px; color: #1C140D; } 
li:hover a { background: #1C140D; color: #FFFFFF; } 
li:hover li a:hover { background: #1C140D; color: #FFFFFF; }

来源

2012-03-11 Lily Evans

中试放大铅BUTTOM并在其中添加的子菜单列表。或尝试移动导航按钮下的几个像素子菜单，然后将其悬停{display}。

来源

2012-03-11 11:58:57 Thoniorf

ul.sub_menu { 
    position:absolute; 
    border-bottom: 1px solid #FFFFFF; 
    color: #1C140D; 
    top: 30px; 
}

你的问题是这条线，你推你的子菜单下拉从父菜单项太远，所以要修复它只是改变top:30px到top:100%你究竟子100％，从你的菜单项和定位它应该是固定的。

ul.sub_menu { 
    position:absolute; 
    border-bottom: 1px solid #FFFFFF; 
    color: #1C140D; 
    top: 100%; 
}

来源

2012-03-11 12:39:50

CSS下拉菜单的问题

回答

相关问题