2

中央のナビゲーション メニューのみを含む幅 100% の DIV があります。ナビゲーション メニューは、HTML リストを使用して作成され、いくつかのドロップダウン要素が含まれています。

ナビゲーション メニューのリンクにカーソルを合わせると、そのリンクの背景色が変わるため、当然、ナビゲーション メニューと DIV コンテナーの間に上下の余白が表示されることは望ましくありませんが、メニューには 5 ピクセルの下部が追加されています。デザインの魅力を低下させる余白。

これが私が困っていることです。ページがさまざまなブラウザー解像度間で簡単に適応できるようにレスポンシブ デザインを使用しようとしているため、DIV/ナビゲーション バーの正確な高さを指定できません。解像度が小さい画面のナビゲーション要素を含めることができるように、DIV/ナビゲーション バーの高さを自動的に調整する必要があります。

ドロップダウンメニューなしでマージンを削除でき、ナビゲーションを中央に配置しなくても機能しますが、ドロップダウンメニューを維持して中央に配置している間はマージンを削除できません。どんな助けでも大歓迎です。

JSFiddle http://jsfiddle.net/XJRHy/

HTML コード:

<div class="navigation">
<nav>
<ul>
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a>
        <ul>
            <li><a href="#">White</a></li>
            <li><a href="#">Red</a></li>
            <li><a href="#">Blue</a></li>
        </ul>
    </li>
    <li><a href="#">Four</a></li>
    <li><a href="#">Five</a></li>
</ul>
</nav>
</div>

CSS

.navigation {
width: 100%;
height:auto;
margin-left:auto;
margin-right:auto;
text-align:center;
background-color:#c0c0c0;
font-family: 'Open Sans', sans-serif;
}

nav {
text-align: center;
width:100%;
text-transform: uppercase;
font-size:1.375em;
}

nav ul ul {
display: none;
}
nav ul li:hover > ul {
    display: block;
}
nav ul {
list-style: none;
position: relative;
display: inline-table;
margin:0;
padding:0;
}
nav ul:after {
    content: ""; clear: both; display: block;
}
nav ul li {
    float:left;
}
    nav ul li:hover {
        background: #4289a9;            
    }
        nav ul li:hover a {
            color: #fff;
        }
    nav ul li a {
        display: block; padding: 10px 20px 10px 20px;
        color: #000000; text-decoration: none;
        font-weight:bold;
    }       
nav ul ul {
    background: #5f6975; border-radius: 0px; padding: 0;
    position: absolute; top: 100%;
    z-index:5000;
}
    nav ul ul li {
        float: none; 
        border-top: 1px solid #6b727c;
        border-bottom: 1px solid #575f6a; position: relative;
        z-index:5000;

    }
        nav ul ul li a {
            padding: 10px 20px 10px 20px;
            color: #fff;
            z-index:5000;

        }   
            nav ul ul li a:hover {
                background: #4b545f;
                z-index:5000;
            }

nav ul ul ul {
    position: absolute; left: 100%; top:0;
    z-index:5000;
}
4

1 に答える 1