Question

我正在努力使我的网站完全响应，我在导航栏上磕磕绊绊;我似乎无法使其响应。我的编码如下：

<div class = "navbar" >
<nav>
    <ul>
        <li><a href="#">Collectie</a>
            <ul>
                <li><a href="#">Zomercollectie</a></li>
                <li><a href="#">Wintercollectie</a></li>
                <li><a href="#">Kerstcollectie</a></li>
            </ul>
        </li>
        <li><a href="#">Over ons</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>   
</div>

CSS如下：

.navbar
{   
height: 50px;
width: 920px;
max-width:100%;
background-color:#2d2d2d;
margin-left:auto;
margin-right:auto;
}

/* NAVBAR CSS */

nav ul ul 
{
display: none;

}

nav ul li:hover > ul 
{
display: block;
}
nav ul {
background:#2d2d2d; 
color:ffffff;
font-size:30px;
padding: 0 20px;
list-style: none;
position: relative;
display: inline-table;
margin-top: 0;

}

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

nav ul li 
{
float: left;
}

nav ul li:hover 
{
background: #4b545f;
}

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

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

nav ul ul 
{
background: #5f6975; 
padding: 0;
position: absolute; 
top: 100%;
}

nav ul ul li 
{
float: none; 
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a 
{
padding: 15px 40px;
color: #fff;
}   

nav ul ul li a:hover 
{
background: #4b545f;
}

/* END of NAVBAR CSS */

我想让它扩展整个事物，包括太大的字体，没有垂直堆叠的按钮。

有什么想法吗？

Answer 1

好吧，我已经修好了。它在高度元素中。我根本不应该使用它们。

缩放导航栏 - 响应式设计

1 个答案: