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

我设计了一个导航栏，其中下拉列表相对于其父列表项绝对定位（主菜单列表为

position:relative

和子菜单

position:absolute

）

我的导航栏的主列表很长（一直延伸到页面的右端）。因此，当我将鼠标悬停在最后一个主菜单项上时，我的下拉菜单占据了它的宽度，页面引入了一个水平滚动条（在主体内容之外）

我想在页面最末端的下拉列表从右到左打开，这样它们就位于主体内部，不会引入滚动条

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

我设计了一个导航栏，如下所示：

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>

#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;
}

---

试试这个CSS *菜单{溢出：隐藏；}@ RoHistaAM将隐藏子菜单。考虑提供一些解释！@尼尔斯：这只会迎合最后一个下拉列表。最后一个下拉列表（或上一个）的子菜单也会展开并引入滚动。在这种情况下？@Console这还不足以说明问题：P@Siddharth使用

n最后一个子元素
。
#menu li:last-child ul {
    left: auto;
    right: 0;
}