Css水平下拉定位

Question

嘿傢伙我試圖做一個水平下拉菜單，我做了一個我的問題JS小提琴以及我想要它的圖片。

我的問題是，我不能讓子菜單坐在我想要的地方（在容器的右側） ，當我設置我的UL UL絕對定位它不會得到比它的父母更廣泛，是被迫入垂直。我沒有做過橫向跌落，只有垂直跌落。

<div id="head"> 
    <div class="container"> 
     <a href="#"><strong class="logo pull-left"><h1>CAVO</h1> 
     </strong></a> <!-- end logo !--> 
     <ul class="nav pull-right"> 
      <li><a href="#">Menu</a> 
       <ul> 
        <li><a href="#">Starters</a></li> 
        <li><a href="#">Breakfast and Brunch</a></li> 
        <li><a href="#">Salads</a></li> 
        <li><a href="#">Sandwiches and Wraps</a></li> 
        <li><a href="#">Pasta</a></li> 
        <li><a href="#">Mains</a></li> 
        <li><a href="#">Pizza</a></li> 
       </ul> 
      </li> 
      <li><a href="#">About Us</a></li> 
      <li><a href="#">Contact</a></li> 
     </ul> 
    </div><!-- end container !--> 
</div> <!-- end header !--> 

CSS

body, html { 
    height: 5000px; 
    font-size: 18px; 
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; 
    color: #fff; 
    background-color: #222; 
} 

a { 
    text-decoration: none; 
    color: inherit; 
} 

#head { 
    height: 76px; 
    width: 100%; 
    background-color: #472626; 
    position: fixed; 
    z-index: 10000; 
    -webkit-transition: all 300ms ease-out; 
    -moz-transition: all 300ms ease-out; 
    -ms-transition: all 300ms ease-out; 
    -o-transition: all 300ms ease-out; 
    transition: all 300ms ease-out; 
} 

.container { 
    max-width: 1400px; 
    padding-left: 20px; 
    padding-right: 20px; 
    margin-left: auto; 
    margin-right: auto; 
} 

.logo { 
    line-height: 75px; 
    text-align:left; 
    -webkit-transition: font-size 2s ease , line-height 0.5s ease; 
    -moz-transition: font 0.3s ease , line-height 0.5s ease; 
    -o-transition: font 0.3s ease , line-height 0.5s ease; 
    -ms-transition: font 0.3s ease , line-height 0.5s ease; 


} 

.logo h1 { 
    font-size: 2.8em; 
    font: "Segoe UI Semibold"; 
    display:block; 
} 

.pull-left { 
    float: left; 
} 

.pull-right { 
    float:right;  
} 

.nav { 
    font-size: 1.3em; 
    font-family: "wf_SegoeUILight","wf_SegoeUI","Segoe UI Light","Segoe WP Light","Segoe UI","Segoe","Segoe WP","Tahoma","Verdana","Arial","sans-serif"; 
    font-weight: 100; 
} 

.nav li { 
    float:left; 
    padding-left: 15px; 
    line-height: 80px; 
    -webkit-transition: line-height 0.5s ease; 
    -moz-transition: line-height 0.3s ease; 
    -o-transition: line-height 0.3s ease; 
    -ms-transition: line-height 0.3s ease; 
    position: relative; 
} 

.nav li a { 
    opacity: 1; 
    -webkit-transition: opacity .2s ease-in-out; 
    -moz-transition: opacity .2s ease-in-out; 
    -ms-transition: opacity .2s ease-in-out; 
    -o-transition: opacity .2s ease-in-out; 
    transition: opacity .2s ease-in-out;  
} 

.nav li a:hover { 
    opacity: .6;  
} 

.nav li ul { 
    background-color: #2B0909; 

} 

.nav li ul li a , .nav li ul li{ 
    display: block; 
    float: left; 
    line-height:none; 
} 

想要的結果：

Picture

這裏是我的小提琴：

JSFIDDLE

Answer 1

要在現有的CSS，添加以下內容：

這裏有一個demo。

Answer 2

更改下面的CSS .updated小提琴link

.nav li { 
    float:left; 
    padding-left: 15px; 
    line-height: 80px; 
    -webkit-transition: line-height 0.5s ease; 
    -moz-transition: line-height 0.3s ease; 
    -o-transition: line-height 0.3s ease; 
    -ms-transition: line-height 0.3s ease; 
    width: 95px; 
} 
.nav li ul { 
    background-color: #2B0909; 
    position: absolute; 
    display: block; 
    width: 100%; 
    right: 0; 

} 
.nav li ul li a , .nav li ul li{ 
    display: inline-block; 
    line-height: none; 
    width: auto; 
}