Hide horizontal CSS menu overflow

Question

I have a horizontal drop down CSS menu at http://www.stevemoorecpa.dreamhosters.com/

My problem is the menu width extends outside the site's wrapper and I cannot get it to hide.

Example of problem

How do you prevent the element from going outside the site wrapper? Here is the code for the wrapper...

#wrapperSkm {
    border-left-style: solid;
    border-right-style:solid;
    border-width: 2px;
    border-color: transparent;
    -moz-box-shadow: 0px 0px 25px #c3c3c3;
    -webkit-box-shadow: 0px 0px 25px #c3c3c3;
    box-shadow: 0px 0px 25px #c3c3c3;
    width:1069px;
    overflow: hidden;
    padding: 0 0px 0 0px;
    margin-left: auto;
    margin-right: auto;
    background:url(images/line1Right.png) repeat-x right 134px;
}

And here is the code for the horizontal sub-menu navigation

#access ul ul {
    display: none;
    float: right;
    margin: 0;
    position: absolute;
    top: 181px;
    left: 0;
    width:100%;
    background:#fff url(images/line1Nav.png) repeat-x bottom;
    z-index: 99999;
    text-align:center;
}

I've been working at this all day and nothing will get the menu to hide it's overflow outside the main site wrapper.

All help is appreciated.

Rohit Azad Malik · Accepted Answer · 2012-10-31 04:03:13Z

5

HI now add position relative in your wrapperSkm ID

as like this

#wrapperSkm{
position: relative;
}

result is

enter image description here

answered Oct 31, 2012 at 4:03

Rohit Azad Malik

32.3k17 gold badges72 silver badges100 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Tom Smilack Over a year ago

Is there an article or something that explains why this works? That is, how overflow: hidden and position: relative work together?

Michael McVerry Over a year ago

Wow I should have asked this days ago. I couldn't find my error. Thank you so much.

Rohit Azad Malik Over a year ago

@TomSmilack now more info chech to this css-tricks.com/video-screencasts/… and this css-tricks.com/the-css-overflow-property

FelipeAls Over a year ago

@TomSmilack An absolutely positioned element is positioned relative to the first parent element that has a position other than static applied to it. vanseodesign.com/css/css-positioning , that's why position: relative is likely (or ALWAYS ;) ) to be set on a parent of an absolutely positioned element. overflow: hidden is another beast (and I tend to avoid it most of the time as it'll bite me later in most projects). It creates a Block Formatting Context (reliable source: T. Koblentz)

Collectives™ on Stack Overflow

Hide horizontal CSS menu overflow

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related