我以为我已经在 Code Pen 中完善了我的 CSS 导航栏,但是当我在实际布局中实现它时,我的布局中的其他 div 似乎破坏了下拉菜单(出现下拉菜单,但是当我移动鼠标选择其中一个孩子,下拉菜单消失)。
这是代码笔:http ://codepen.io/anon/pen/cKJlu
它在我的网站上实现:http ://www.onedirectionconnection.com/tester
这是CSS:
.main-navigation {
clear: both;
display: block;
width: 90%;
margin: 0 auto 20px auto;
}
.main-navigation ul {
list-style: none;
margin: 0;
padding-left: 0;
}
.main-navigation li {
float: left;
position: relative;
margin-right: 15px;
}
.main-navigation li:last-of-type{
margin-right:0;
}
.main-navigation a {
text-align: center;
font-size: 14px;
text-transform: uppercase;
display: block;
text-decoration: none;
font-weight: bold;
border-radius: 3px;
background-color: #269BA9;
width: 130px;
color: #fff;
}
.main-navigation ul ul {
display: none;
float: left;
position: absolute;
top: 1.5em;
left: 0;
z-index: 99999;
}
.main-navigation ul ul ul {
left: 100%;
top: 0;
}
.main-navigation ul ul a {
margin-top: 3px;
}
.main-navigation ul ul li {
}
.main-navigation li:hover > a {
background-color: #DA5969;
}
.main-navigation ul ul :hover > a {
}
.main-navigation ul ul a:hover {
}
.main-navigation ul li:hover > ul {
display: block;
}
.main-navigation li.current_page_item a,
.main-navigation li.current-menu-item a {
}
/* Small menu */
.menu-toggle {
display: none;
cursor: pointer;
}
如果有人可以帮助我找出问题所在,将不胜感激。