缩放导航栏-响应式设计

debugcn 发表于 Dev

捕猎者

我试图使我的网站完全响应，并且绊倒在导航栏上。我似乎无法做出回应。我的编码如下：

<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 */

我想使它缩放整个对象，包括字体太大时，并且没有垂直堆叠的按钮。

任何的想法？

捕猎者

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。