私が作成したデザインの開発に取り組んでいます。これは、アクティブなページにいるとき、またはホバーしたときにメニュー タブがポップアップするものです。
私のデザインでは次のようになります。
開発に関しては、マージンとパディングをいじってみましたが、それぞれがサイトの残りの部分を押し下げるだけです。
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 検索で、無関係な結果が表示されます。