Question

我设计了一个Navbar，其中下拉列表相对于其父列表项绝对定位（主菜单列表为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>

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

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

1 个答案: