Question

I have created a big menu that has its width set to 100%, I want this div to be scrollable from left to right.(on the X axis). I have set the scroll-left and scroll right properties accordingly but it still doesnt work. Im sure im doing something wrong, any advice is appreciated. Thanks.

code is on jsFiddle

Answer 1

You need to have a width in place that isn’t 100%. Set the menu into a container div with your dimensions and overflow on and then set the actual menu to be really wide inside it. Think of the box div like a frame.

http://jsfiddle.net/spacebeers/WkUNn/19/

.box {
    max-height:150px;
    border: 2px solid red;
    width: 100%;
    overflow: scroll;  
}

.megamenu {
    width: 3000px;
    overflow: hidden;
     max-height:100px;
    -webkit-box-shadow: 0px -1px 12px rgba(0, 0, 0, 0.48);
    -moz-box-shadow:    0px -1px 12px rgba(0, 0, 0, 0.48);
    box-shadow:         0px -1px 12px rgba(0, 0, 0, 0.48);
    padding-bottom:45px;
    padding-top:5px;
    background: grey;
    border-top:1px solid #767676;
    font-family:Verdana, Tahoma, Sans-Serif;
    z-index: 100;
}

EDIT: As pointed out by @c_kick (and in the original) you can use overflow-x, overflow-y. I was trying to keep things simple.