Why is this not outside of the nav Bar-CodePudding

so I am pretty new to development and come across a problem, I think I am missing somthing but I can't tell. So I am building a nav bar and then a drop down menu. I believe that the li is in the ul so that why it is not coming out of it. So how could I fix this. If you know any website that would be good let me know thank you

Code: https://codepen.io/Giannilmgc/pen/JjrgZdr?editors=1111 Output: https://codepen.io/Giannilmgc/full/JjrgZdr

To see what wrong keep your cursor over the to do tab and scroll down

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300&display=swap");

/* Here is the body style where we change the background */
body {
  background: linear-gradient(135deg, #36454f 0%, #ffdd3c 100%);
  margin: 5px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: auto;
  background-color: white;
  border-radius: 50px;
}

li {
  float: left;
  width: 16.667%;
  transition-duration: 1s;
}

li a {
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition-duration: 1s;
}
li:hover {
  background-color: black;
}

li a:hover {
  background-color: #36454f;
  color: white;
}
#homepageLink {
  background-color: #cccccc;
}

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

ul li ul {
  display: none;
  position: absolute;
  background-color: #cccccc;
  width: 20%;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

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

.dropdown-content a:hover {
  background-color: #36454f;
  color: white;
}

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

<head>

  <title> My Site </title>
  <link rel="stylesheet" href="CSS/Homepage-Css.css" />
</head>

<body>

  <body>

    <div>
      <ul>
        <li><a href="../Homepage/HomePage.html" id="homepageLink">HomePage</a></li>
        <li><a href="../Journal-Page/Journal-Page.html">Journal</a></li>
        <li><a href="../Calander-Page/Calander-Page.html">Calander</a> </li>
        <li ><a href="../Checklist-Page/Checklist-Page.html">To do</a>
          <ul >
            <a herf="#">Latin</a>
            <a herf="#">Scince</a>
            <a herf="#">Ela</a>

          </ul>
        </li>
        <li><a href="../Service-Page/Service-Page.html">Service</a></li>
        <li><a href="../Contact-Page/Contact-Page.html">Contact</a></li>

      </ul>
    </div>

    <div >
      <span id="display_ct"></span>
  </body>
  <!-- Adding Script to the bottom ... Very Imporantent  -->
  <script src="Javascript/Homepage-Java.js"></script>

Thank you

CodePudding user response：

In the dropdown class you have set the position in relative. Change it to absolute and your drop down menu will come out.

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

CodePudding user response：

you put display none on the dropdown and try to show it when its hover on li. but when the mouse go out from li the display:none on dropdown is return. try to make it with after pseudo element and change the code from .dropdown { position: relative; display: inline-block; } to:li:after.dropdown { position: relative; display: inline-block; } it will work but not an ideal, improve it with css

CodePudding user response：

If you want to create a dropdown menu with pure CSS there is this example from w3schools

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

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

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

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

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li >
    <a href="javascript:void(0)" >Dropdown</a>
    <div >
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
</ul>

<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>

</body>
</html>

CodePudding user response：

You seem to have made a mistake in the structure of the code

See this page for more code examples: (https://freefrontend.com/css-menu/)

I hope this useful