如何在菜單和下拉菜單之間添加空格

我正在使用CSS3全寬下拉菜單，但有些細節我無法正確理解。 :-(如何在菜單和下拉菜單之間添加空格

我怎麼努力實現這一目標是：

你可以看到有是主菜單，子菜單之間的一個小20px的空間在這個例子中，我用一頂邊距：但是這並不奏效，因爲你會用光標離開懸停區域，並且子菜單會消失。只有子菜單的ul容器「接觸」懸停區域時，下拉菜單纔有效

它嘗試過使用ul：在竅門之前在子菜單ul之前添加一個空白塊，但不知何故，doe不工作。 :(它沒有像塊應該做的空間，它只是增加內容的權利在ul元素。

我在這裏忽略或做錯了什麼？:(爲什麼ul ul：在不工作後？有沒有更好的方法來添加空的子菜單上面的「hoverspace」一點點

你的幫助將是非常有益的:-)

現場演示：。 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; 
     }

來源

2013-09-29 Jeroen Gerth

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

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

更新小提琴：http://jsfiddle.net/hDmxd/3/

注意：它不會因爲寬鬆消失淡出給予足夠的用戶的鼠標離開菜單並進入子菜單的時間。

來源

2013-09-29 09:19:17 techfoobar

我試過了，但子菜單開始時，我的菜單和子菜單之間徘徊移動。這是否也適用於不支持CSS3轉換的瀏覽器？ –

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

來源

2013-09-29 09:24:54

這與Techfoobar的回答不一樣嗎？這項工作適用於不支持CSS3轉換的瀏覽器嗎？ –

你還沒有提交你的風格的類「nav」或它的父！可以通過玩填充來調整空間。例如

nav { 
    padding: 10px 5px 10px 5px; 
} 

div { //that's the div above your nav 
padding: 10px 5px 10px 5px; 
}

這是不是一個或另一個

來源

2017-11-18 20:05:03

如何在菜單和下拉菜單之間添加空格

回答

相關問題