Question

我正在努力完成以下任务：

我在页面顶部有两个导航条，它们都是绝对定位的。我希望第二个导航栏（#roll-menu）具有动态的条目数并具有水平滚动。

在这个小提琴中，我做了一个我想要的例子，但没有使用绝对位置：https://jsfiddle.net/cz2xhzjg/3/

<div id="main">
<div id="top-menu">
    <div>some content on this bar</div>    
</div>
<div id="scroll-menu">
    <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
        <li>Five</li>
        <li>Six</li>
        <li>Seven</li>
        <li>Eight</li>
        <li>Nine</li>
        <li>Ten</li>
        <li>Eleven</li>
        <li>Twelve</li>
        <li>Thirteen</li>
        <li>Fourteen</li>
        <li>Fifteen</li>
        <li>Sixteen</li>
    </ul>
</div>
<img src="http://www.h3dwallpapers.com/wp-content/uploads/2014/08/Landscape-wallpapers-1.jpeg" style="width:100%;"/>

#main {
    width: 300px;
}

#top-menu {
    height: 50px;
    position: relative;
    width: 100%;
    background-color: rgba(244,244,244,0.75);
}

#scroll-menu {
    top: 50px;
    height: 50px;
    width: 100%;
    background-color: #bfcfa7;
    overflow: hidden;
    overflow-x: scroll;
}

li {
    margin-right: 15px;
    display: inline-block;
    cursor: pointer;
}
li:hover {
    color: white;
}
ul {
    width: 900px;
}

在这个小提琴中，我的位置是绝对的，不能让它在＃scroll-menu导航栏上进行水平滚动：https://jsfiddle.net/yxya6qv9/2/

我需要这些栏是绝对的，因为网站的内容必须出现在导航栏后面。

感谢。

Answer 1

ul {
    overflow-x: auto;
    white-space: nowrap;
}

演示：http://jsfiddle.net/brrqxd5b/

两个绝对位置导航栏，带水平滚动

1 个答案: