CSS菜單：下拉菜單顯示爲塊

Question

由於我發現並在CSS下拉菜單中掙扎，所以我希望你不會介意這個簡單的問題。我有一個功能齊全的CSS下拉菜單，但在阻止水平菜單打包（在瀏覽器被調整大小的情況下）後，我無法在下面顯示下拉菜單項（塊）。相反，它們現在也顯示爲彼此相鄰（內嵌塊）。

任何人都可以告訴我我要添加哪一行嗎？這是我添加的代碼，從包裝（好）和我的下拉項目都修改了我的菜單，顯示如下對方：

nav ul li { 
display: inline-block; 
float: none; 
} 

完全CSS菜單代碼：

/* Set general properties for main menu items */ 

nav ul { 
background: linear-gradient(to bottom, rgba(200,220,154,0) 30%, #c8dc9a 90%); 
background: -moz-linear-gradient(top, rgba(200,220,154,0) 30%, #c8dc9a 90%); 
background: -webkit-linear-gradient(top, rgba(200,220,154,0) 30%, #c8dc9a 90%); 
background: -ms-linear-gradient(top, rgba(200,220,154,0) 30%, #c8dc9a 90%); 
background: -o-linear-gradient(top, rgba(200,220,154,0) 30%, #c8dc9a 90%); 
padding: 0; 
margin: 0; 
font-size: 16px; 
white-space: nowrap; 
list-style: none; 
position: relative; 
text-align: left; 
} 

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

nav ul li { 
display: inline-block; 
float: none; 
border-bottom: 3px solid #244612; 
padding:0 0 0 7px; 
} 

/* Set hover properties for main menu items */ 

nav ul li:hover { 
    background: #e29a0e; 
    background: linear-gradient(to bottom, rgba(226,154,14,0) 0%, #e29a0e 100%); 
    background: -moz-linear-gradient(top, rgba(226,154,14,0) 0%, #e29a0e 100%); 
    background: -webkit-linear-gradient(top, rgba(226,154,14,0) 0%, #e29a0e 100%); 
    background: -ms-linear-gradient(top, rgba(226,154,14,0) 0%, #e29a0e 100%); 
    background: -o-linear-gradient(top, rgba(226,154,14,0) 0%, #e29a0e 100%); 
} 

    nav ul li:hover a { 
     color: #ffffff; 
    } 

    nav ul li:hover ul li a{  
     color: #757575; 
    } 

nav ul li a { 
    display: block; 
    padding: 10px 13px; 
    color: #757575; 
    text-decoration: none; 
} 

/* Set properties for hiding/unhiding dropdown items */ 

nav ul ul { 
display: none; 
} 

nav ul li:hover > ul { 
    display: block; 
} 

/* Set general properties for dropdown menu items */ 

nav ul ul { 
background: #F7F7F7; 
border-radius: 0px; 
padding: 0; 
position: absolute; 
top: 100%; 
margin-left: -7px; 
font-size: 14px; 
white-space: normal; 
float: left; 
} 

/* Set hover properties for dropdown menu items */ 

nav ul ul li { 
    border-top: 1px solid #C9CCCF; 
    border-bottom: 0px solid #C9CCCF; 
    position: relative; 
    padding: 0; 
} 

    nav ul ul li a { 
     padding: 10px 25px; 
    } 

     nav ul li:hover ul li a:hover { 
      background: #e29a0e; 
      color: #ffffff; 
     } 

Answer 1

我希望我正確理解你的問題！ 這是fiddle。

所有你需要補充的是

nav ul li ul li{ display:block; }

這應該是它！