CODEWITHSUNDEEP
htmlcssdrop-down-menunavigationbar
Jayesh
Jayesh

Reputation: 13

Unable to display dropdown menubar due to some error in css position

I was writing a code to create a navigationbar menu via css-Dropdown but i'm stuck here at this point. Whenever I click on "Dropdown" i'm not able to get desired menubar however on removing "position: relative" at pointed position gives correct result. What's the problem with my original code?

<!DOCTYPE html>
<html>
<head>
    <style>

        ul{
            list-style-type: none;
            margin:0;
            padding:0;
            overflow: hidden;
            width: 100%;
            background-color: #333;
        }
        li{
            float: left;
        }
        li a, .dropbutton{
            text-decoration: none;
            color: white;
            padding: 12px 16px;
            display:  inline-block;
            border: none; /* x */
            text-align: center;
        }
        li a:hover , .dropdown:hover .dropbutton
        {
            background-color:black;

        }

if i remove "position: relative" from below then i'm able to get navbar menu

        .dropdown{
           position: relative;  /* remove */
            display: inline-block;
        }
        .dropdown_content {
            display: none;
            background-color: #444;
         position: absolute;
            color: white;
            box-shadow: 0 12px 16px 0px rgba(0,0,0,0.7);
            text-align: center; 
            z-index: 1;            
        }
        .dropdown_content a{
             color: black;
             padding: 12px 16px;
             text-decoration: none;
             display: block;
        }
        .dropdown:hover .dropdown_content{
            display: block;
        }
        .dropdown_content a:hover{
            background-color: silver;
        }

        </style>
</head>

<body>


    <ul>
        <li><a href="#jfjkwj">Home</a></li>
        <li><a href="#jfjkwj">Home</a></li>
        <li><a href="#jfjkwj">Home</a></li>
        <li><a href="#jfjkwj">Home</a></li>
        <li class="dropdown">
            <a href="javascript:void(0)" class="dropbutton">Dropdown</a>
            <div class="dropdown_content">
                <a href="#nkkje">okay</a>
                <a href="#nkkje">okay</a>
                <a href="#nkkje">okay</a>
            </div>
        </li>
            </li>
    </ul>

</body>
</html>

Upvotes: 1

Views: 234

Answers (2)

WizardCoder
WizardCoder

Reputation: 3461

You have overflow:hidden on your ul selector, which means nothing will show outside of the ul.

Upvotes: 0

Chiller
Chiller

Reputation: 9738

You need to remove overflow:hidden from the <ul>, thats what is hidding the dropdown content, and use display:inline-block on <li> instead of float

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: #333;
}

li {
  display:inline-block;
}

li a,
.dropbutton {
  text-decoration: none;
  color: white;
  padding: 12px 16px;
  display: inline-block;
  border: none;
  /* x */
  text-align: center;
}

li a:hover,
.dropdown:hover .dropbutton {
  background-color: black;
}

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

.dropdown_content {
  display: none;
  background-color: #444;
  position: absolute;
  color: white;
  box-shadow: 0 12px 16px 0px rgba(0, 0, 0, 0.7);
  text-align: center;
  z-index: 1;
}

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

.dropdown:hover .dropdown_content {
  display: block;
}

.dropdown_content a:hover {
  background-color: silver;
}
<ul>
  <li><a href="#jfjkwj">Home</a></li>
  <li><a href="#jfjkwj">Home</a></li>
  <li><a href="#jfjkwj">Home</a></li>
  <li><a href="#jfjkwj">Home</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbutton">Dropdown</a>
    <div class="dropdown_content">
      <a href="#nkkje">okay</a>
      <a href="#nkkje">okay</a>
      <a href="#nkkje">okay</a>
    </div>
  </li>
  </li>
</ul>

Upvotes: 1

Related Questions