How To Layer Menu and Images

I actually have a quick question.

My teacher told us that we could do what we want with the tutorials he gave us for creating a website.

This is just a minor thing but an idea to how my menu can go in front of the gif so that it would show it’s box shadow?

 HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Speedwagon</title>
        <link rel=“stylesheet” href=“css/style.css”>
    </head>
    <body>
        <div class=“main-header”>
            <ul class=“menu”>
                <a href=""><li>Home</li></a>
                <a href=""><li>About</li></a>
                <a href=""><li>Photos</li></a>
                <a href=""><li>Downloads</li></a>
            </ul>
        </div>

        <div class=“showcase”>
        </div>
        
        <div class=“main-article”>
            <h1>Main Article</h1>
        </div>
        <div class=“footer”>
            
            <h1>Footer</h1>
        </div>
    </body>
</html>

CSS

/*Default Settings*/
* {
    margin: 0;
    padding: 0;
}
body {
    text-align: center;
    color: white;
    background: black;
    font-family: Brush Script MT;
}
/*Main Header*/
.main-header{
    height: 7vh;
    margin-bottom: 0;
}
/*Menu*/
ul {
  list-style: none;
  margin: 0;
  padding: 0px;
  overflow: hidden;
  background-color: #0d0915;
  box-shadow: 0px 1px 10px 2px black;
}
li {
  float: left;
  margin: 0;
}
a{
  text-decoration: none;
  font-size: 14px;
}
li {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  border-right: 1px solid #bbb;
}
li:hover {
  background-color: #1b286d;
  color: white;
}
/*Showcase*/
.showcase{
    height: 90vh;
    background-image: url(…/images/fatestay.gif);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
/*Main Article*/
.main-article{
    padding: 400px;
    background: #363636;
    margin-bottom: 10px;
    border: black solid 2px;
}
.main-article:hover{
    background: white;
    color: black;
}
/*Footer*/
.footer{
    padding: 5px;
    background: #464646;
    margin-bottom: 10px;
    border: black solid 2px;
}
.footer:hover{
    background: white;
    color: black;
}

Hi @projectkaizen,

This post was moved to a different board that fits your topic of discussion a bit better. This means you’ll get better engagement on your post, and it keeps our community organized so users can more easily find information.

As you’ll notice, your topic is now here in the Programming Help and Discussion. No action is needed on your part; you can continue the conversation as normal here.

Cheers!

How about removing the ‘showcase’ div and move the background-image attribute to main-header?