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

那应该是它！

CSS菜单：下拉项显示为块

1 个答案: