将鼠标悬停在菜单上，将内容推向右侧

Question

我希望悬停只显示在页面内容的其余部分上。此外，菜单的一部分未显示。请帮忙！

http://jsfiddle.net/Ljwkn/

此部分未悬停在“Blore”上方。我想让它浮动到当前出现在“Blore”上方的东西的右边。任何帮助表示赞赏！

<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