如何爲最後一個孩子製作一個導航子菜單

Question

我有一個下拉導航欄，並且想要顛倒最後一個孩子留在頁面上。我怎樣才能做到這一點？

/* Sub Menu */ 
/* Drop Down Box BKGD & STYLE*/ 
.menu ul { 
    z-index:8000; 
    position: absolute; 
    top: 45px; 
    left:0px; 
    opacity: 0; 
    background:url(../images/BKGDRepeat3_03.png); 
    -moz-box-shadow:0 3px 5px #666; 
    -webkit-box-shadow:0 3px 5px #666; 
    box-shadow: 0 3px 5px #666; 
    -webkit-border-radius: 5px 5px 5px 5px; 
    -moz-border-radius: 5px 5px5px 5px; 
    border-radius: 5px 5px5px 5px; 
    -webkit-transition: opacity .25s ease .1s; 
    -moz-transition: opacity .25s ease .1s; 
    -o-transition: opacity .25s ease .1s; 
    -ms-transition: opacity .25s ease .1s; 
    transition: opacity .25s ease .1s; 
} 

.menu ul:last-child { 
    color:#C00; 
    right:0px; 
    left:auto; 
} 

HTML

<div style="clear:both" id="nav_bar"> 
<ul class="menu"> 

    <li><a href="index.php">Home</a></li> 
    <li><a href="about.php">one</a> 
     <ul> 
      <li><a href="#">One</a></li> 
      <li><a href="#">Two</a></li> 

     </ul> 
    </li> 
    <li><a href="#">Directory</a> 
     <ul> 
      <li><a href="#">One</a></li> 
      <li><a href="#">Two</a></li> 

     </ul> 
    </li> 

    <li><a href="#">Contact</a> 
     <ul> 
      <<li><a href="#">One</a></li> 
      <li><a href="#">Two</a></li> 

     </ul> 
    </li> 

</ul> <!-- end .menu --> 
</div> 

目前這影響到所有的子菜單，而不是最後一個。

Answer 1

沒有看到你的html ...聽起來你需要針對李，而不是ul。

.menu ul li:last-child { 
    color:#C00; 
    right:0px; 
    left:auto; 
} 

Answer 2

做到這一點：

.menu ul:last-of-type { 
    // 
} 

假設每個UL是一個子菜單。否則你正在尋找風格的李。