2

メニュー項目の 1 つでドロップダウン メニューを作成しています。

すなわち:| Home | About | Store | Contact |

Aboutページなどのドロップダウンメニューを作成したいのですが、追加しようとするたびに

 <div id="snaznav"> <a href="#" id="home">Home</a>      
<ul>
<li><a href="#" id="about">About</a>
<ul>
     <li><a href="#">Submenu1</li>
     <li><a href="#">Submenu2</li>
     <li><a href="#">Submenu3</li>
</ul>
</li>
</ul></div>

次のすべてのメニュー項目は、次のように邪魔されます。

ホーム | ストアについて | お問い合わせ |

わからない..どこに問題があるの？

私のCSSコードは次のとおりです。

#snaznav {

float:left;
height:42px;
top:151px;
width:670px;
}

#snaznav a {
float:left;
height:41px;
display:block;
}

#home {
background:url(http://www.abc.com/home.gif) no-repeat transparent;
background-position:0 -2px!important;
width:77px;
}

#about {
background:url(http://www.abc.com/about.gif) no-repeat transparent;
background-position:-78px -2px!important;
width:104px;
}

#store {
background:url(http://www.abc.com/storegif) no-repeat transparent;
background-position:-307px -2px!important;
width:82px;
}

#contactus {
background:url(http://www.abc.com/contact.gif) no-repeat transparent;
background-position:-388px -2px!important;
width:131px;
}

何か知りたいことがあれば、私に言ってください!!

4

1 に答える 1

2

次のようにHTMLコードを書き直すことができますか？

HTML：

<div id="snaznav">
    <ul>
        <li><a href="#" id="home">Home</a></li>
        <li>
            <a href="#" id="about">About</a>
            <ul>
                <li><a href="#">Submenu1</a></li>
                <li><a href="#">Submenu2</a></li>
                <li><a href="#">Submenu3</a></li>
            </ul>
        </li>
    </ul>
</div>​

CSSを次のように適用できるようにします。

CSS：

#snaznav ul {border-bottom: 1px solid #999;}
#snaznav ul li a {display: block; text-decoration: none; color: #333; padding: 5px; border: 1px solid #fff;}
#snaznav ul > li:hover {border: 1px solid #666; border-bottom: 1px solid #fff;}
#snaznav ul li a:hover {background: #ccc; border: 1px solid #999;}
#snaznav ul > li {display: inline-block; position: relative; border: 1px solid #fff;}
#snaznav ul > li ul {display: none; position: absolute; left: -1px; width: 150px; border: 1px solid #666; border-top-color: #fff; margin-top: 1px;}
#snaznav ul > li:hover ul {display: block;}
#snaznav ul > li ul li {display: block;} /* Vertical Menu */
#snaznav ul > li ul li {display: inline-block;} /* Horizontal Menu */​

フィドル： http：
//jsfiddle.net/VmHXb/1/（垂直）
http://jsfiddle.net/VmHXb/3/（水平）

于 2012-10-18T06:27:36.647 に答える