Submenu with distance, on hover is closed

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

Answer 1

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).

Answer 2

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.

Answer 3

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>