Click here to Skip to main content
15,113,873 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
CSS
body{
background-image: url('image.jpg');
background-size: none;
margin-left: 100%;
margin-top: -500px;
z-index: 9999;
}

ul{
  margin: 0px;
  list-style: none;
  padding: 0px;
  display: inline;
  z-index: 9999;
}

ul li{
  float: left;
  width: 300px;
  height: 40px;
  background-color: black;
  opacity: .8;
  line-height: 40px;
  text-align: center;
  font-size: 15px;
  z-index: 9999;
}

ul li a {

  text-decoration: none;
  color: white;
  display: block;
  z-index: 9999;
}

ul li a {
 text-decoration: none;
 color: white;
 display: block;
 z-index: 9999;
}

ul li ul li{
  display: none;
  z-index: 9999;
}

ul a:hover{
  background-color: green;
  color: white !important;
  z-index: 9999;


}

ul li:hover ul li{
  display: block;
  z-index: 9999;

}
HTML
<html>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="style3.css">
  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<header>
    <ul> 
      <h3><li><a href = "#">Hello, <?php echo $_SESSION['username']; ?></a></li></h3>

    </ul>

    <ul>
      <li><a href = "#">Home</a>
      <ul>
        <li><a href = "main.php">Account</a></li>
        <li><a href = "login.php">logout</a></li>
      </ul>
      </li>
    </ul>
    <ul>
      <li><a href = "#">Genus</a>
      <ul>
        <li><a href = "">Test</a></li>
        <li><a href = "">Test</a></li>
      </ul>
      </li>
    </ul>
    <ul>
      <li><a href = "#">Morphology</a>
      <ul>
        <li><a href = "">Test</a></li>
        <li><a href = "">Test</a></li>
      </ul>
    </ul>
      </li>
    <ul>
        <li><a href = "#">Species</a>
    <ul>
        <li><a href = "">Test</a></li>
        <li><a href = "">Test</a></li>
    </ul>
</header>
</html>


What I have tried:

I have tried implementing a z-index on various parts of the code, but unfortunately this did not help.
Posted
Updated 9-Jun-21 0:16am
v2

1 solution

From what I can see, you've given the same z-index (9999) to all of your CSS.

The item(s) you wish to have on top should have the higher z-index and those desired below to have lower z-index.

Try using z-index for what is was designed for and used different values for the various elements.
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900