Создание Horizontally Scrollable UL

Question

У меня есть панель навигации, которая нуждается в автоматической отзывчивым прокручивать список UL.

Мой HTML:

<nav class="navigation"> 
    <ul> 
     <li>Home </li> 
     <li>Publications </li> 
     <li>Exams </li> 
     <li>Courses </li> 
     <li>Example Text </li> 
     <li>Example Text </li> 
     <li>Example Text </li> 
     <li>Example Text </li> 
     <li>Example Text </li> 
    </ul> 
</nav> 

CSS:

.navigation{ 
    background-color: darkblue; 
    position:fixed; 
    top:0; 
    left:0; 
    width:100%; 
    max-height:50px; 
    margin-bottom:10px; 
    overflow: hidden; 
} 
.navigation ul{ 
    float:right; 
    list-style-type: none; 
    height: 50px; 
    overflow-x: scroll; 
    overflow-y: hidden; 
    white-space: nowrap; 

} 
.navigation ul li{ 
    float:left; 
    color:#ffffff; 
    margin-right:10px; 
    text-align: center; 

} 

Что я делаю неправильно? Кажется, он не работает так, как я хочу.

Answer 1

Спасибо за вашу поддержку. Я нашел ответ «Я сам». Кроме того, он получил некоторую помощь от Material.css здесь точный ответ

Это то, что я хотел.

.navigation{ 
 
    background-color: darkblue; 
 
\t position:fixed; 
 
\t top:0; 
 
\t left:0; 
 
\t width:100%; 
 
\t max-height:50px; 
 
\t margin-bottom:10px; 
 
\t overflow: hidden; 
 
    } 
 
.navigation ul { 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    position: relative; 
 
    overflow-x: auto; 
 
    overflow-y: hidden; 
 
    height: 48px; 
 
    background-color: #fff; 
 
    margin: 0 auto; 
 
    width: 100%; 
 
    white-space: nowrap; 
 
} 
 
ul { 
 
    padding: 0; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
} 
 
.navigation ul li { 
 
    -webkit-box-flex: 1; 
 
    -webkit-flex-grow: 1; 
 
    -ms-flex-positive: 1; 
 
    flex-grow: 1; 
 
    display: block; 
 
    float: left; 
 
    text-align: center; 
 
    line-height: 48px; 
 
    height: 48px; 
 
    padding: 0; 
 
    margin: 0; 
 
    text-transform: uppercase; 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
    letter-spacing: .8px; 
 
    width: 15%; 
 
    min-width: 80px; 
 
} 
 
ul li { 
 
    list-style-type: none; 
 
} 
 
li { 
 
    display: list-item; 
 
    text-align: -webkit-match-parent; 
 
}

<nav class="navigation"> 
 
<ul> 
 
    <li>Test 1</li> 
 
    <li>Test 1</li> 
 
    <li>Test 1</li> 
 
    <li>Test 1</li> 
 
    <li>Test 1</li> 
 
    <li>Test 1</li> 
 
    <li>Test 1</li> 
 
    <li>Test 1</li> 
 
    <li>Test 1</li> 
 
    <li>Test 1</li> 
 
    <li>Test 1</li> 
 
</ul> 
 
</nav>