CSS 菜单 : dropdown items display as block

Question

由于我正在探索 CSS 下拉菜单并为此苦苦挣扎，我希望您不会介意这个简单的问题。我有一个功能齐全的 CSS 下拉菜单，但就在我阻止水平菜单换行后(以防浏览器调整大小)，我无法在彼此下方显示下拉元素( block )。相反，它们现在也彼此相邻显示(内联 block )。

谁能告诉我必须添加哪一行？这是我添加的代码，它改变了我的菜单从包装(好)和我的下拉元素显示在彼此之下:

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{
显示: block ；
}

应该就是这样了!