CODEWITHSUNDEEP
htmlcssdrop-down-menuoverlay
Egly Bagelface
Egly Bagelface

Reputation: 1

Overlaying a drop down menu over a floated image

I'm designing a website for a small business, and they said they wanted two things. Drop down menus, and a slideshow on the main page. This would be fine, if it wasn't for the fact I have to float the slideshow so it wont interfere with the rest of the page (Side menu type thing)

The problem is that the images now overlay the dropdown menu, and the only solution I can see is either moving the images or removing them completely. It'd be great if I didn't have to do either, but compromises can be made.

The dropdown code is this (credit to W3 for it):

`.dropbtn {
    background-color: #73797A;
    color: white;
    padding: 3px 7px 4px 1px;
    font-size: 35px;
    border: none;
    cursor: pointer;
    margin-top: 30px;
    border-right-style: solid;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f4f4f4;
    min-width: 100%;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    width: 100%;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #30DAFC;
}`

Upvotes: 0

Views: 1465

Answers (1)

Hubyx Reds
Hubyx Reds

Reputation: 133

There is a CSS property called z-index, it defines the stack of the elements within the HTML. Take a look: CSS z-index

Upvotes: 1

Related Questions