1

Web サイトを完全にレスポンシブにしようとしていますが、ナビゲーション バーに出くわしました。レスポンシブにできないようです。私のコーディングは次のとおりです。

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

フォントが大きすぎる場合や、ボタンが縦に重ならないように、フォントを含めて全体を拡大縮小したいと思います。

何か案が？

4

1 に答える 1

0

わかりました、私はそれを修正しました。高さ要素にありました。私はそれらをまったく使用すべきではありませんでした。

于 2013-10-29T21:04:59.777 に答える