长导航条引入水平滚动条

Long Navigation bar introducing horizontal scroll?

本文关键字：水平 滚动条 导航      更新时间：2023-09-26

我设计了一个导航栏，其中下拉菜单绝对定位于它们的父列表项(主菜单列表是position: relative和子菜单position: absolute)。

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

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

我怎样才能做到这一点??请帮助。

我设计了一个如下的导航条:

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

#menu li:last-child ul {
    left: auto;
    right: 0;
}
相关文章：