CODEWITHSUNDEEP
htmlcss
Paul Kendal
Paul Kendal

Reputation: 565

mega drop down menu clashes with background picture

i have built a mega drop down menu

the problem is that it clashes with the background images and div on the main page

i have put a copy of my code on fiddle and would appriciate any advice on how to get around this: mega Drop down menu

#menu {
    list-style:none;
    width:1100px;
    margin:30px auto 0px auto;
    height:43px;
    padding:0px 20px 0px 20px;

    background: #014464;
    background: -moz-linear-gradient(top, #0272a7, #013953);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));


}

#menu li {
    float:left;
    display:block;
    text-align:center;
    position:relative;
    padding: 4px 10px 4px 10px;
    margin-right:30px;
    margin-top:7px;
    border:none;
    width: 7em;
}

.home-panel {
    color: #686767;
    padding: 0;
    margin: 0;
    font-family: "open-sans", "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1;
    position: relative;
    cursor: default;
}

.home-panel {
    background: rgba(0, 0, 0, 0) url("wallpaper.jpg") no-repeat scroll center center / cover;
    position: relative;
}

UPDATE:

rachel gallen VERSION of mega drop

hi everyone , rachel gallen has kindly shown me how to solve the problem with a Z-index.

only question that i have is that in rachel's version she does not have a gap in the drop down. my version has a gap. i was wondering how rachel did it-i obviously wish to replicate this.

2nd UPDATE:

the problem that i now encounter is a gap in the drop down.

firstExample

i followed the recommendations of @ThomasBaumgartner

is caused by the fixed width of 7em in your #menu li declaration. if possible remove "width: 7em" and add "white-space: nowrap" instead

problems caused by removing width

but this caused the blue background to push to the far left- it also made the home page dropdown menu to break out of its div

i would really appreciate any advice.

Upvotes: 0

Views: 82

Answers (2)

Rachel Gallen
Rachel Gallen

Reputation: 28553

I added z-index:50; into the following piece of code:

.dropdown_1column, 
.dropdown_2columns, 
.dropdown_3columns, 
.dropdown_4columns,
.dropdown_5columns {
    margin:4px auto;
    position:absolute;
    left:-999em; /* Hides the drop down */
    text-align:left;
    padding:10px 5px 10px 5px;
    border:1px solid #777777;
    border-top:none;
    z-index:50; 
    /* Gradient background */
    background:#F4F4F4;
    background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));

Et voila!

Upvotes: 1

Thomas Baumgartner
Thomas Baumgartner

Reputation: 187

add a z-index property to your menu-fly-outs.

.dropdown_1column, 
.dropdown_2columns, 
.dropdown_3columns, 
.dropdown_4columns, 
.dropdown_5columns {
    ...
    z-index: 1; /* or higher, depending other layers you might use */
    ...
}

Upvotes: 1

Related Questions