Change the top
on ul.menu li ul
to 33px
instead of 37, and add a padding-top
of 1px
. Updated Fiddle here.
The padding ensures that the hover effect remains active between the elements (padding is part of the element so also has hover).
Question
I have a submenu, the problem is my submenu must have more distance and should be visible on hover, so if i'm out of li the submenu goes closed.
Demonstration code on jsfiddle.
HTML code is:
<ul class="menu">
<li> <a href="#">submenu</a>
<ul>
<li><a href="#">sub item 1</a>
</li>
<li><a href="#">sub item 2</a>
</li>
<li><a href="#">sub item 3</a>
</li>
<li><a href="#">sub item 4</a>
</li>
<li><a href="#">sub item 5</a>
</li>
<li><a href="#">sub item 6</a>
</li>
<li><a href="#">sub item 7</a>
</li>
</ul>
</li>
</ul>
CSS is:
a {
text-decoration: none;
}
ul.menu {
}
ul.menu li {
list-style-type: none;
position: relative;
float: left;
display: inline;
margin: 0px 0px 1px 1px;
padding: 0px 0px 0px 0px;
height: 33px;
line-height: 33px;
}
ul.menu li a {
display: block;
color: #5b615b;
padding: 0px 7px 0px 7px;
background-color: #e1e1e1;
text-transform: uppercase;
}
ul.menu li a:hover {
color: #000000;
background-color: #e1e1e1;
}
ul.menu li ul {
display: none;
font-size: 10px;
width: 100%;
position: absolute;
top: 37px;
left: 0px;
margin: 0px;
padding: 0px;
}
ul.menu li:hover > ul {
display: block;
}
ul.menu li:hover > a {
color: #000000;
background-color: #e1e1e1;
}
ul.menu li:hover > ul {
display: block;
}
ul.menu li ul li {
position: relative;
float: none;
display: block;
height: 22px;
line-height: 22px;
border-bottom: 1px solid #ffffff;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
ul.menu li.active ul li a {
color: #5b615b;
background-color: #e1e1e1;
}
Solution
Change the top
on ul.menu li ul
to 33px
instead of 37, and add a padding-top
of 1px
. Updated Fiddle here.
The padding ensures that the hover effect remains active between the elements (padding is part of the element so also has hover).
OTHER TIPS
ul.menu li ul {
display: none;
font-size: 10px;
width: 100%;
position: absolute;
top: 34px;
left: 0px;
margin: 0px;
padding: 0px;
}
change top:37; to top:34; If you want to maintain the whitespace, you can add a 3px white border to the bottom of the top li.
jsfiddle showing this method http://jsfiddle.net/N23AM/4/
visualy identical, just allows the hover to be maintained by the border rather than losing focusing to the background.
The proper solutions would be to add padding-top:20px;
(your desired value would be there of course) put in ul li:hover ul
selector.
Another, maybe strange solution, that I could think of is to add in your ul
submenu a new div that looks like this:
<div style="height:20px; background:transparent; width:100%;"></div>