引入水平滚动的长导航栏？

Question

我设计了一个导航栏，其中下拉菜单相对于其父列表项绝对定位（主菜单列表为position: relative 和子菜单position: absolute）。

我的 navbar 的主列表很长（一直延伸到页面的右端）。因此，当我将鼠标悬停在最后一个主菜单项上时，我的下拉菜单会占据它的宽度，并且页面会引入水平滚动（超出正文内容）。

我希望页面两端的下拉菜单从右向左打开，这样它们就位于正文内，并且不会引入滚动。

我怎样才能做到这一点？？？请帮忙。

我设计了如下导航栏：

HTML：

<ul id="menu">
    <li><a href="#">Home</a></li>
    <li>
        <a href="#">Categories</a>
        <ul>
            <li><a href="#">CSS</a></li>
            <li><a href="#">Graphic design</a></li>
            <li><a href="#">Development tools</a></li>
            <li><a href="#">Web design</a></li>
        </ul>
    </li>
    <li><a href="#">Work</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>

CSS：

#menu li {
    float: left;
    border-right: 1px solid black;
    box-shadow: 1px 0 0 #444;
    position: relative;
}
#menu ul {
    position: absolute;
    top: 38px;
    left: 0;
    margin: 20px 0 0 0;
    opacity: 0;
    visibility: hidden;
        transition: all .2s ease-in-out;
}

#menu ul ul {
    top: 0;
    left: 195px;
    margin: 0 0 0 20px;
}

#menu ul a {    
    padding: 10px;
    width: 175px;
    _height: 10px; /*IE6 only*/
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
}

Answer 1

#menu li:last-child ul {
    left: auto;
    right: 0;
}