CODEWITHSUNDEEP
htmlcss
Red Ali
Red Ali

Reputation: 49

Setting drop down menu Position (CSS)

I'm trying to place the dropdown menu right after the yellow border. With current code, menu cover product button, so I need it to be displayed at the red of product. As can be seen on "Click Me" button.

The Code:

ul {
  list-style-type: none;
  overflow: hidden;
  border: 2px solid red;
}
li {
  float: left;
  padding: 5px;
  margin: 10px;
  border: 2px solid green;
}
.button {
  display: inline-block;
  border: 1px dashed black;
}
.dropdown {
  display: inline-block;
  border: 1px solid yellow;
}
.menu {
  padding: 15px;
  display: none;
  position: absolute;
  border: 1px solid blue;
  z-index: 1;
}
.menu a {
  padding: 15px;
  display: block;
  width: 150px;
  background-color: pink;
  border: 2px solid black;
}
li:hover {
  background-color: red;
}
.dropdown:hover {
  background-color: red;
}
.dropdown:hover .menu {
  display: block;
}
<!DOCTYPE html>
<html>
  <head>
    <title>Dropdown web</title>
    <link rel="stylesheet" type="text/css" href="w3style.css">
  </head>
  <body>
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Contect Us</li>
      <div class="dropdown">
        <li>
          <a class="button" href="#">Products</a> 
        </li>
        <div class="menu">
          <a href="#">01</a>
          <a href="#">02</a>
          <a href="#">03</a>
          <a href="#">04</a>
          <a href="#">05</a>
          <a href="#">06</a>
        </div>
      </div>
    </ul>
    <div class="dropdown">
      <button class="button">Click Me</button>
      <div class="menu">
        <a href="#"> Link 01 </a>
        <a href="#"> Link 02 </a>
        <a href="#"> Link 03 </a>
      </div>
    </div>
  </body>
</html>

Upvotes: 0

Views: 2089

Answers (2)

Paulie_D
Paulie_D

Reputation: 115024

You need to correct the HTML (which is currently invalid) as only li are permitted children of a ul.

Then a different clearing mthod so the dropdown can appear outside the parent ul.

Codepen Demo

.cf:after { /* clearfix */
  content: "";
  display: table;
  clear: both;
}
ul {
  list-style-type: none;
  border: 2px solid red;
}
li {
  float: left;
  padding: 5px;
  margin: 10px;
  border: 2px solid green;
  position: relative; /* positioning context */
}
.button {
  display: inline-block;
  border: 1px dashed black;
}
.menu {
  padding: 15px;
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  border: 1px solid blue;
  z-index: 1;
}
.menu a {
  padding: 15px;
  display: block;
  width: 150px;
  background-color: pink;
  border: 2px solid black;
}
li:hover {
  background-color: red;
}
.dropdown:hover {
  background-color: red;
}
.dropdown:hover .menu {
  display: block;
}
<ul class="cf">
  <li>Home</li>
  <li>About</li>
  <li>Contect Us</li>
  <li class="dropdown">
    <a class="button" href="#">Products</a>
    <div class="menu">
      <a href="#">01</a>
      <a href="#">02</a>
      <a href="#">03</a>
      <a href="#">04</a>
      <a href="#">05</a>
      <a href="#">06</a>
    </div>
  </li>
</ul>

Upvotes: 1

ReshaD
ReshaD

Reputation: 946

The problem is because the height of these two buttons are different, so with adding some style you can solve that. This can be one possible solution for your problem:

ul {
  list-style-type: none;
  overflow: hidden;
  border: 2px solid red;
}
li {
  float: left;
  padding: 5px;
  margin: 10px;
  border: 2px solid green;
}
.button {
  display: inline-block;
  border: 1px dashed black;
}
.dropdown {
  display: inline-block;
  border: 1px solid yellow;
}
.menu {
  padding: 15px;
  display: none;
  position: absolute;
  border: 1px solid blue;
  z-index: 1;
}
.menu a {
  padding-top: 15px;
  display: block;
  width: 150px;
  background-color: pink;
  border: 2px solid black;
}
li:hover {
  background-color: red;
}
.dropdown:hover {
  background-color: red;
}
.dropdown:hover .menu {
  display: block;
  margin-top: 54px;
}
<ul>
  <li>Home</li>
  <li>About</li>
  <li>Contect Us</li>

  <div class="dropdown">
    <li> <a class="button" href="#">Products</a>
    </li>

    <div class="menu">
      <a href="#">01</a>
      <a href="#">02</a>
      <a href="#">03</a>
      <a href="#">04</a>
      <a href="#">05</a>
      <a href="#">06</a>

    </div>

  </div>
</ul>


<div class="dropdown">

  <button class="button">Click Me</button>

  <div class="menu" style="margin-top: 0px">
    <a href="#"> Link 01 </a>
    <a href="#"> Link 02 </a>
    <a href="#"> Link 03 </a>
  </div>

</div>

jsFiddle

Upvotes: 0

Related Questions