Question

In this site我对主导航中出现的子菜单有疑问，在列表前面有一个空格我的链接我不知道它为什么会改变但之前显得很好，我真的不知道发生了什么

#navigation {
float: right;
}

#navigation li {
float: left;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.1em;
display: block;
}

#navigation li strong {
font-weight: 400;
border-right: #e8e8e8 1px solid;
display: block;
padding: 10px 20px;
}

#navigation li a {
padding: 20px 0;
color: #1c1c1c;
text-decoration: none;
display: block;
}

#navigation li:last-child strong {
border-right: none;
}

#navigation li span {
display: block;
color: #a09d9d;
text-transform: lowercase;
letter-spacing: 0.01em;
margin: 5px 0 0 0;
}

#navigation li a:hover span,
#navigation li:hover span,
#navigation li.current-menu-item a span {
color: #1c1c1c;
}

#navigation li li.current-menu-item,
#navigation li li.current_page_item,
#navigation li li:hover {
border-bottom: none;
}

#navigation li li,
#navigation li li:hover {
text-transform: none;
letter-spacing: 0;
border-bottom: #e8e8e8 1px solid;
}

#navigation li li a.sf-with-ul:after {
background: url(../images/arrows2.png) no-repeat;
width: 8px;
height: 8px;
content: '';
position: absolute;
top: 36%;
right: 1em;
}

#navigation li li a {
padding: 15px 20px;
background: #fff;
font-size: 13px;
}

#navigation li li a:hover {
background: #fafafa;
}

#navigation .current-menu-item,
#navigation .current_page_item,
#navigation li:hover {
border-bottom: 4px solid;
}

#navigation li ul {
box-shadow: 0 0 4px rgba(136, 136, 136, 0.6);
}

Answer 1

似乎top属性值只是为高，将其更改为93px

#navigation li:hover ul, #navigation li.sfHover ul {
    left: 0.01em;
    top: 93px;
    z-index: 99;
}

以下是Bart的另一个可能选项：

#navigation li:hover ul, #navigation li.sfHover ul {
    left: 0.01em;
    top: 100%;
    z-index: 99;
}

Answer 2

这似乎也有效。

#navigation ul {
    position: absolute;
    width: 19em;
    top: -999em;
    margin-top: -39px;
}

在这种情况下，我建议您使用浏览器中集成的Firebug或开发者工具。使用Inspector工具进行的一点检查（可在所有开发人员工具和Firebug中找到）可以向您展示如何轻松解决此问题。

Answer 3

或者....... 只需删除：

top: -999em;

来自：

#navigation ul {
   position: absolute;
   /* top: -999em; */
   width: 19em;
}

子菜单前的空白区，有什么不对？

3 个答案: