我正在爲site的下拉導航工作,並且在下拉部分與父類別對齊時遇到了一些問題 - 它會一直移動到左側。爲什麼下拉菜單對齊左邊?
下面是HTML:
<ul class="dropdown">
<li><a href="#" id="home">Home</a></li>
<li><a href="#" id="about">About Us</a>
<ul class="sub-menu">
<li><a href="#">Our History</a></li>
<li><a href="#">Our Process</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Financing</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Subcontractors</a></li>
</ul>
</li>
<li><a href="#" id="personal">Personal Banking</a></li>
<li><a href="#" id="commercial">Commercial Banking</a></li>
<li><a href="#" id="service">Customer Service</a>
<ul class="sub-menu">
<li><a href="#">Our History</a></li>
<li><a href="#">Our Process</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Financing</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Subcontractors</a></li>
</ul>
</li>
<li><a href="#" id="investors">Investor Relations</a></li>
<li><a href="#" id="contact">Contact Us</a></li>
</ul>
這裏是CSS:
ul.dropdown { position: relative; background: #4e8997; height: 40px; padding-left: 5px; }
ul.dropdown li { float: left; zoom: 1; }
ul.dropdown li a {
display: block;
margin-top: 5px;
padding: .5em .6em;
color: #fff;
font: bold 14px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
text-transform: uppercase;
border: none;
}
ul.dropdown a:hover { background-color: #c29c5d; color: #fff; }
ul.dropdown a:active { background-color: #c29c5d; color: #fff; }
/*
LEVEL TWO
*/
ul.dropdown ul { width: 200px; visibility: hidden; position: absolute; top:100%; left: 0; }
ul.dropdown ul li { font: 13px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
border-bottom: 1px solid #ccc; float: none; color: #fff; background-color: #c29c5d; height: 20px; }
ul.dropdown ul li a { display: inline-block; }
ul.dropdown ul li a:hover { background-color: #a2834d; color: #fff; height: 20px; }
我試圖改變ul.dropdown UL相對定位,但是,打破了導航。我希望有一些幫助解決這個問題。
謝謝。
非常感謝您爲此付出的額外努力! – fmz 2010-04-30 20:02:12