將鼠標懸停在菜單中的內容推到右側

Question

我想懸停簡單地顯示網頁內容上的其餘部分。此外，菜單的一部分未被顯示。請幫忙！

http://jsfiddle.net/Ljwkn/

這部分沒有出現在懸停在「布洛爾」。我希望它漂浮到的什麼是目前出現在懸停在「布洛爾」的權利。任何幫助表示讚賞！

<aside class="menu2"> 
    <li> 
     <p> 
     OPEN ON ALL DAYS<br> OF THE WEEK <hr></p> 
     <p> 
     TIMINGS: 
     <p> 
     WEEKDAYS:11am - 6pm<br> 
     WEEKENDS:11am - 7pm<br></p> 
     <table> 
     <tr><th>TICKET RATES</td><th>ADULTS</td><th>KIDS</td></tr> 
     <tr><td>WEEKDAYS</td><td></td><td></td></tr> 
     <tr><td>WEEKENDS</td><td></td><td></td></tr> 
     <tr><td>PEAK WEEKDAYS</td><td></td><td></td></tr> 
     <tr><td>PEAK WEEKENDS</td><td></td><td></td></tr> 
     </table> 
    </li> 
</aside> 

Answer 1

Demo

CSS

ul { 
    font-family: Arial, Verdana; 
    font-size: 14px; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 
ul li { 
    display: block; 
    position: relative; 
    float: left; 
} 
li ul { 
    display: none; 
} 
ul li a { 
    display: block; 
    text-decoration: none; 
    color: #ffffff; 
    border-top: 1px solid #ffffff; 
    padding: 5px 15px 5px 15px; 
    background: #ffaaaa; 
    margin-left: 1px; 
    white-space: nowrap; 
} 
ul li a:hover { 
    background: #aaaaff; 
} 
li:hover ul { 
    display: block; 
    position: absolute; 
} 
li:hover li { 
    float: none; 
    font-size: 11px; 
} 
li:hover a { 
    background: #aaffaa; 
} 
li:hover li a:hover { 
    background: #95A9B1; 
} 

PS：添加表的造型，因爲我有它排除解決您的問題。

PS：添加表的造型，因爲我有它排除解決您的問題。

Demo