CODEWITHSUNDEEP
htmlcss
TheConclusion
TheConclusion

Reputation: 11

Space between menu and submenu

I have been try to make this dropdown menu work. I want to space to be between the menus. Tried padding and also the ::after selector.

HTML:

<div id="menu">
    <div id="wrapper">
        <ul class="navbar">
            <li><a href="#">Menu</a>
              <ul>
                <li><a href="#">Hej 1</a></li>
                <li><a href="#">Hej 2</a></li>
                <li><a href="#">Hej 3</a></li>
             </ul>         
            </li> 
        </ul>
    </div>
</div>

CSS:

body {
    background-color: #efefef;
}

#menu{
    height:auto;
    position: absolute;
    margin: 0px;
}

#wrapper{
    position:absolute;
    top: 0px;
    left:0px;
    height: auto;
    margin: 0px;

}

#wrapper ul{
    margin:0px;
    padding: 0px;
    height: auto;
    width: auto;
    background-color: #fff;
    border-radius: 8px;    
}

#wrapper ul li,#wrapper ul li a, #wrapper ul li ul li, #wrapper li ul li a{
    position: relative;
    list-style: none;
    display: inline-block;
    font-size: 14px;
    font-family: sans-serif;
    text-decoration: none;
    color: #808285;
    padding: 3px 10px 3px 10px;
    transition: all 0.3s ease 0s;
}

#wrapper ul li ul{
    display: none;
    position: absolute;
    top: 20px;
    margin-top: 20px;
    right: -30px;
    width: 150px;
    background-color: #FFFFFF;
    border-radius: 0px;
    transition: all 0.3s ease 0s;
    border-radius: 8px;
    left: 5px;
}

#wrapper ul li ul li{
    position: relative;
    top: auto;
    left: 0px;
    height: auto;
    width: 150px;
    list-style: none;
    display: list-item;
    padding: 3px 5px 3px 5px;
    margin-top: 5px;
}

#wrapper ul li a:hover, #wrapper ul li ul li a:hover{
    color: #ba141a;
}

#wrapper ul li:hover ul{
    display: block;
}

#wrapper ul li ul li:hover{ 
    width: 132px;
}

Here is a fiddle: http://jsfiddle.net/yMvg9/1/

Does sombebody knows what the problem is?

Upvotes: 1

Views: 393

Answers (6)

sumgeek
sumgeek

Reputation: 76

You have a Top Margin of 20px to { #wrapper ul li ul }

#wrapper ul li ul{
display: none;
position: absolute;
top: 20px;
margin-top: 20px; // Remove of Lessen this one...
right: -30px;
width: 150px;
background-color: #FFFFFF;
border-radius: 0px;
transition: all 0.3s ease 0s;
border-radius: 8px;
left: 5px;
}

This would probably solve your problem....

working Fiddle

Upvotes: 1

x&#39;tian
x&#39;tian

Reputation: 734

maybe because the margin is set to 0. try this working fiddle : http://fiddle.jshell.net/DNQH9/

Upvotes: 0

SKeurentjes
SKeurentjes

Reputation: 1878

There is a margin-top: 20px; on #wrapper ul li ul wich breaks your hover.

Try this next fiddle: http://jsfiddle.net/skeurentjes/yMvg9/3/

Upvotes: 1

Howli
Howli

Reputation: 12469

Removing/reducing the margin:20px from #wrapper ul li ul should fix that

#wrapper ul li ul{
display: none;
position: absolute;
top: 20px;
margin-top: 20px;
right: -30px;
width: 150px;
background-color: #FFFFFF;
border-radius: 0px;
transition: all 0.3s ease 0s;
border-radius: 8px;
left: 5px;
}

Would!d become

#wrapper ul li ul{
display: none;
position: absolute;
top: 20px;
margin-top:0px; /* or some other value which suits */
right: -30px;
width: 150px;
background-color: #FFFFFF;
border-radius: 0px;
transition: all 0.3s ease 0s;
border-radius: 8px;
left: 5px;
}

Upvotes: 1

shyammakwana.me
shyammakwana.me

Reputation: 5752

Put this code in your stylesheet

#wrapper ul li ul{ 
     background: none;
}

#wrapper ul li ul li{
     background-color: #FFFFFF;
}

Upvotes: 0

Uttara
Uttara

Reputation: 2534

reduce margin on #wrapper ul li ul

#wrapper ul li ul {
   margin-top: 9px;
}

working fiddle

Upvotes: 1

Related Questions