-1
我有這個CSS下拉菜單。我希望主頁從頁面的左側開始,而不是在中心。這裏是樣式表和下拉導航欄div標籤:CSS dropdown navigation
ul, li, html, a
{
margin:0; padding: 0;
}
body
{
text-align: center;
margin: 0 auto;
padding: 0;
font: 65% arial, sans-serif;
}
li
{
list-style-type: none;
}
a
{
text-decoration: none;
color: #034af3;
}
ul#nav
{
width: 22.5em;
height:2.5em;
margin: 2em auto 0;
font-size: 1.5em;
}
ul#nav li
{
position: relative;
float: left;
width: 5em;
height: 2em;
line-height: 2em;
background-color: #465c71;
display: block;
padding: 4px 0px;
border-right: 1px #4e667d solid;
color: #dde4ec;
}
ul#nav li.noBorder
{
border-right: none;
}
ul#nav li:hover
{
background-color: silver;
}
ul#nav li a
{
display: block;
float: left;
width: 100%;
}
ul#nav li ul
{
display: none;
}
ul#nav li:hover ul
{
display: inline;
float: left;
width: 10em;
height: auto;
margin: 0; padding: 0.27em;
font-size: 1em;
text-align: left;
}
ul#nav li:hover ul li
{
width: 100%;
height: 2em;
background-color: Yellow;
border: none;
border-bottom: 1px solid silver;
overflow: hidden;
}
ul#nav li:hover ul li a
{
display: block;
margin: 0; padding: 0 0 0 .3em;
height: 100%;
line-height:2em;
color: #465c71;
}
ul#nav li:hover ul li a:hover
{
background-color: white;
}
<div style="background:#3a4f63;">
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Abour</a>
<ul>
<li><a href="#">About 1</a></li>
<li><a href="#">About 2</a></li>
<li><a href="#">About 3</a></li>
<li class="noBorder"><a href="#">About 4</a></li>
</ul>
</li>
<li><a href="#">Blog</a>
<ul>
<li><a href="#">About 1</a></li>
<li><a href="#">About 2</a></li>
<li><a href="#">About 3</a></li>
<li class="noBorder"><a href="#">About 4</a></li>
</ul>
</li>
<li class="noBorder"><a href="#">Contact</a></li>
</ul>
</div>
非常感謝你我真的很感激它。 – onfire4JesusCollins 2010-11-15 21:58:01