CODEWITHSUNDEEP
htmlcss
DjKillerMemeStar
DjKillerMemeStar

Reputation: 425

HTML/CSS dropdown next to button

So i have a vertical navbar with dropdowns but everytime i do a dropdown its drops straight down from where it started. I would like the dropdown menu to appear to the right of the bar. In the code snippet you wil see what code i'm using now (from w3schools).

I also included an image to beter show what i mean.

Quite a bad drawing but gets the job done

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    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);
}

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

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

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

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

<h2>Dropdown Menu</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

Upvotes: 4

Views: 8041

Answers (1)

Tyler Roper
Tyler Roper

Reputation: 21672

You could apply position: absolute; and a couple simple positioning rules to your .dropdown-content CSS like so:

.dropdown:hover .dropdown-content {
    display: block;
    position: absolute;
    left: 100%;
    top: 0;
}

Because your .dropdown position is relative, we can use position: absolute; on its children to position them relative to their parent instead of the entire page.

left: 100%; aligns the child's left-edge with the right-edge of its parent, and top: 0; aligns it flush along the top.

Example:

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    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);
}

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

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

.dropdown:hover .dropdown-content {
    display: block;
    position: absolute;
    left: 100%;
    top: 0;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}
<h2>Dropdown Menu</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

Or you can view it here : https://jsfiddle.net/a0dwpbd9/

Upvotes: 6

Related Questions