2010-11-15 76 views
-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>

回答

1

嘗試:

body { text-align: left; } 
ul#nav { margin: 2em 0 0; } 
+0

非常感謝你我真的很感激它。 – onfire4JesusCollins 2010-11-15 21:58:01