html - 如何在菜单和下拉子菜单之间添加空间

Question

我正在制作一个 CSS3 全 Angular 下拉菜单，但有些细节我不太清楚。 :-(

我试图实现的是:

您可以看到主菜单和子菜单之间有一点 20px 的空间。在这个例子中，我为 ul 子菜单使用了 top-margin:20px。但这并没有真正起作用，因为您将使用光标离开悬停区域，子菜单将消失。只有当子菜单的 ul-container“触及”悬停区域时，下拉菜单才有效。

它确实尝试使用 ul:before 技巧在子菜单 ul 之前添加一个空 block ，但不知何故不起作用。 :( 它不像 block 那样占用空间。它只是在 ul 元素上添加内容。

我在这里忽略或做错了什么？ :( 为什么 ul ul:after 不起作用？有没有更好的方法在子菜单上方添加一点空的“悬停空间”？

你的帮助会很有帮助 :-)。

现场演示: http://jsfiddle.net/JeroenGerth/hDmxd/

HTML:

<nav>
    <ul id="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">Tutorials &gt;</a>
            <ul class="submenu">
                <li><a href="#">Photoshop 1</a></li>
                <li><a href="#">Dreamweaver 2</a></li>
                <li><a href="#">Photoshop 3</a></li>
                <li><a href="#">InDesign 4</a></li>
                <li><a href="#">Bridge 5</a></li>
                <li><a href="#">Lightroom 6</a></li>
                <li><a href="#">After Effects 7</a></li>
                <li><a href="#">Premiere 8</a></li>
                <li><a href="#">Motion 9</a></li>
                <li><a href="#">Aperture 10</a></li>
                <li><a href="#">iPhoto 11</a></li>
            </ul>
        </li>
        <li><a href="#">Downloads &gt;</a>
        <ul class="submenu">
                <li><a href="#">Wallpapers 1</a></li>
                <li><a href="#">PSD files 2</a></li>
                <li><a href="#">Video's 3</a></li>
                <li><a href="#">Soundeffects 4</a></li>
                <li><a href="#">Icons 5</a></li>
                <li><a href="#">Maps 6</a></li>
            </ul>
        </li>
        <li><a href="#">About me</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

CSS:

body {background-color: #E9E9E9;}

nav ul { /*Main menu container*/
margin: 0px;
padding: 0px 20px; 
background-color:#444;
color: #fff; 
list-style: none; 
position:relative; 
display:inline-table; 
border-radius: 5px; 
}

nav ul:after {
    content: ""; clear: both; display: block;
}

nav ul li { /*Main menu-items*/ float:left;}

nav ul li a {
    padding: 10px 20px; 
    color: #fff; 
    font-family: Calibri, Verdana, sans-serif; 
    text-decoration:none; 
    display: block; 
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    }

    nav ul li a:hover {color: #66D1D3;}

nav ul ul { /*Submenu container*/
display:block; 
border-radius:0px; 
padding: 0px; 
position: absolute; 
background-color:#fff;
color: #000; 
visibility:hidden;
opacity:0;
transition:all ease-in-out 0.4s;
left: 0px;
top: 100%;
width: 100%;
columns:100px 3;
-webkit-columns:100px 3; /* Safari and Chrome */
-moz-columns:100px 3; /* Firefox */
}

        nav ul li:hover > ul { /*Show submenu*/
                visibility:visible;
                opacity:1;
                transition-delay:0s;
                }

nav ul ul:before { /*Why doesn't this work :( */
content: "";
display: block;
height: 20px;
position: absolute;
width: 100%;}

nav ul ul li { /*Submenu items*/
    float: none; 
    border-bottom: 1px #CCCCCC dotted; 
    position:relative; 
            }

    nav ul ul li a {
        color: #000; 
         -webkit-transition: all 1s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
        }
    nav ul ul li a:hover { 
        color: #66D1D3;
        background-color: #444;
        }

Answer 1

将 margin-top 添加到 nav ul li:hover > ul:

nav ul li:hover > ul { 
    visibility:visible;
    opacity:1;
    transition-delay:0s;
    margin-top: 20px; /* new */
}

更新 fiddle :http://jsfiddle.net/hDmxd/3/

注意:它不会消失，因为缓和淡出为用户的鼠标提供了足够的时间离开菜单并进入子菜单。