Question

i am creating a horizontal navigation bar that gets its menu items dynamically. however i am having a problem in showing the list items horizontally. Whenever the list items overflows the width of the list container, they create a new row inside the container. I want to have all the list items appear in a single row always. and no matter how long the list may be the user will scroll the menu only horizonatlly

i have used styling for the ul

ul{ 
    background-color:yellow;
   position:absolute;
    height:80px;
overflow:auto;
    list-style:none;
    display:table-row;
}

and for the li

li{
    margin:10px;
    display:inline-block;
}

Demo Fiddle

Answer 1

ul{ 
    background-color:yellow;
    height:80px;
    overflow-x: auto;
    overflow-y: hidden;
    list-style:none;
    white-space: nowrap;
}

Demo