我正在尝试使我的网站完全响应,但我偶然发现了导航栏;我似乎无法让它响应。我的编码如下:
<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 */
我想让它缩放整个东西,包括字体太大,并且没有垂直堆叠的按钮。
任何想法?