0

私が作成したデザインの開発に取り組んでいます。これは、アクティブなページにいるとき、またはホバーしたときにメニュー タブがポップアップするものです。

私のデザインでは次のようになります。

ここに画像の説明を入力

開発に関しては、マージンとパディングをいじってみましたが、それぞれがサイトの残りの部分を押し下げるだけです。

Jfiddle を使用したい場合は、こちらをご覧ください。http://jsfiddle.net/CW3f7/

HTML

<div class="menu-main-navigation-container">
<ul class="nav-menu">
    <li class="nav-menu"><a href="http://www.dorkinggreatwall.co.uk/">Home</a>
    </li>

    <li class="nav-menu"><a href="http://www.dorkinggreatwall.co.uk/?page_id=7">Contact</a>
    </li>

    <li class="nav-menu"><a href="http://www.dorkinggreatwall.co.uk/?page_id=9">About</a>
    </li>
</ul>

CSS

.nav-menu li {
display: inline-block;
position: relative;
background: #d71921;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

.nav-menu li a {
color: #fff;
display: block;
font-size: 15px;
line-height: 1;
padding: 15px 20px;
text-decoration: none;
}

.nav-menu a:hover {
background-color: #d71921;
color: #fff;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

ul.nav-menu, div.nav-menu > ul {
margin: 0;
padding: 0 40px 0 0;
}

どんなコードでも大歓迎です。すべての Google 検索で、無関係な結果が表示されます。

4

4 に答える 4

0

ポジションを使用してそれを行うことができます。ここでhttp://jsfiddle.net/AdrianSis/TU97j/1/はあなたのケースのフィドルです。

<body>
<ul class="nav-menu">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>
</body>

CSS

ul.nav-menu{
    margin: 0;
    max-height: 45px;
    overflow: hidden;
    padding: 0 40px 0 0;
    position: relative;
    border-bottom: 5px solid #D71921;
}
ul.nav-menu li{
    background: none repeat scroll 0 0 #D71921;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    display: inline-block;
    position:relative;
    top:10px;
}
.nav-menu li.active, .nav-menu li:hover{
    top: 0;
}
.nav-menu li a {
    color: #FFFFFF;
    display: block;
    font-size: 15px;
    font-weight: bold;
    line-height: 1;
    padding: 15px 20px;
    text-decoration: none;
}
于 2013-11-05T13:17:21.823 に答える