CODEWITHSUNDEEP
htmlcssnavigationhtml-lists
sol_keys
sol_keys

Reputation: 13

White space before sub menu, what's wrong?

In this site I have a problem with the submenu that appears in the main navigation, there's a space before the list with the links I don't know why it changed but it appeared fine before, I really don't have an idea of what happened

#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);
}

Upvotes: 0

Views: 99

Answers (3)

Ramiz Wachtler
Ramiz Wachtler

Reputation: 5683

Seems like the top attribute value is just to high, change it to 93px

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

Here is an another possible option from Bart:

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

Upvotes: 1

Bioto
Bioto

Reputation: 1117

Or....... Just remove:

top: -999em;

from: 

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

Upvotes: 0

Arber Braja
Arber Braja

Reputation: 445

This seems to work too.

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

In situations like this, i suggest you to use Firebug or Developer Tools integrated on your browser. A very little check using the Inspector tool (found in all developer tools and on Firebug) could have shown you how to resolve this problem very easily.

Upvotes: 0

Related Questions