css - 将鼠标悬停在向右推送内容的菜单上

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