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

I have designed a Navbar in which the drop down are absolutely positioned with respect to their parent list items (Main menu list is position: relative and submenus position: absolute).

我设计了一个Navbar,其中下拉列表相对于其父列表项绝对定位(主菜单列表是位置:相对和子菜单位置:绝对)。

My navbar 's main list is long (stretches till right-end of page). So when I hover on the last main menu item, then my drop-down occupies it's width and the page introduces a horizontal scroll (goes outside the body content).

我的导航栏主列表很长(一直延伸到页面的右下角)。因此,当我将鼠标悬停在最后一个主菜单项上时,我的下拉列表占据了它的宽度,页面引入了一个水平滚动(超出了正文内容)。

I want the dropdown's on extreme ends of the page to open from right to left so that they lie within the body itself and no scroll is introduced.

我希望页面末端的下拉列表从右到左打开,以便它们位于正文内部并且不会引入滚动。

How can I achieve this??? Please Help.

我怎么能实现这个???请帮忙。

I have designed a Navigation Bar as follows:

我设计了一个导航栏如下:

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

1 个解决方案

#1

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