0

コンテナにボタンが付いたnavcontainerがあります。ボタンの 1 つのみのドロップダウン リストを作成する必要があります。これを CSS/HTML でどのように実現しますか。これが私のコードです：

HTML:

<div id="navcontainer">
            <a href="/home.html" class="button" style="width: 115px">About Us</a>
            <a href="/quote.html" class="button" style="width: 170px">Request a Quote</a>
            <a href="/affiliates.html" class="button" style="width: 115px">Affiliates</a>
            <a href="/pricing.html" class="button" style="width: 170px">Pricing & Plans</a>
            <a href="/addservices.html" class="button" style="width: 190px">Additional Services</a>
            <a href="/service.html" class="button" style="width: 165px">Service Details</a>
            <a href="/watering.html" class="button" style="width: 108px">Watering</a>
           </div>

CSS:

#navcontainer {
 float: right;
 width: 1040px;
 height: 45px;
 text-align: center;
 line-height: 45px;
 color: #fff;
 margin-bottom: 6px;

}

.button {
text-align: center;
background: #226426;
color: #fff;
width: 100px;
height: 45px;
float: left;
text-decoration: none;
font-family: Arial, sans-serif;
font-size: 15px;
font-weight: bold;
border-right: solid 1px #91b293;
border-top: solid 1px #91b293;
border-bottom: solid 1px #91b293;

}

これを ul にする必要がありますか、それともそのままにして、[サービス] ボタンにドロップダウンを追加するだけでよいですか? ご協力いただきありがとうございます。

4

1 に答える 1

1

原則として、ナビゲーションをリストにすることは常に良い考えです。これは、いつでもオプションを多次元メニュー システムに開いておくのに役立ちます。これが私がすることです：

HTML

<ul id="nav">
<li><a href="link1.html">link 1</a></li>
<li><a href="link2.html">link 2</a>
<ul>
<li><a href="sublink1.html">sublink 1</a></li>
<li><a href="sublink2.html">sublink 2</a></li>
</ul>
</li>
<li><a href="link3.html">link 3</a></li>
</ul>

CSS

#nav, #nav ul {list-style: none; margin: 0; padding: 0;}
#nav li {position: relative;}
#nav li ul {position: absolute; top: 100%; left: 0; display: none;}
#nav li:hover ul {display: block;}

jQuery - オプション

これは、何らかの効果が必要な場合です。

function mainmenu(){
$(" #nav ul ").css({display: "none"}); // Opera Fix
$(" #nav li").hover(function(){
    $(this).find('ul:first').css({visibility: "visible",display:     none"}).show(800);
    },function(){
    $(this).find('ul:first').css({visibility: "hidden"});
    });
}

お役に立てれば。

于 2012-10-15T15:34:54.397 に答える