Yusril Maulidan Raji Yusril Maulidan Raji - 4 months ago 13
CSS Question

How to specify the position of sub-menu div and prevent the menu div changed

I followed a tutorial about the dropdown menu from here.

But I got stuck when I tried to implement the sub-menu. So far, I have managed to make this code.
HTML:

<div class="dropdown" style="float:left;">
<button class="dropbtn">Left</button>
<div class="dropdown-content" style="left:0;">
<div class="dropdown-list draggable" href="#">Link 1
<div class="dropdown-sub-list">
<div class="draggable" href="#">Link 4</div>
<div class="draggable" href="#">Link 5</div>
<div class="draggable" href="#">Link 6</div>
<div class="draggable" href="#">Link 7</div>
</div>
</div>
<div class="dropdown-list draggable" href="#">Link 2
<div class="dropdown-sub-list">
<div class="draggable" href="#">Link 4b</div>
<div class="draggable" href="#">Link 5b</div>
<div class="draggable" href="#">Link 6b</div>
<div class="draggable" href="#">Link 7b</div>
</div>
</div>
<div class="dropdown-list draggable" href="#">Link 3</div>
</div>
</div>


CSS:

.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;
right: 0;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-sub-list {
display: none;
position:relative;
float:left;
right: 0;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

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

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

.dropdown-list:hover .dropdown-sub-list{
display : block;
}

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

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


Here is the jsfiddle:
https://jsfiddle.net/yusrilmaulidanraji/9sdck1z1/3/

The questions of mine are:


  • How could I move the sub-menu to the exactly on the right side of the menu?

  • How to prevent the resizing of the menu because of the appearance of the sub-menu?



Thank you in advance.

Answer

Updated Fiddle.

  1. Add position: relative(so that the dropdown can be positioned to right) in .dropdown-content .draggable

  2. Use position: absolute on .dropdown-sub-list. Also add left: 100%(moves drop down to the right); top: 0 (moves drop down to the top)

.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;
  right: 0;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-sub-list {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content .draggable {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  position: relative;
}
.dropdown-content .draggable:hover {
  background-color: #f1f1f1
}
.dropdown-list:hover .dropdown-sub-list {
  display: block;
}
.dropdown:hover .dropdown-content {
  display: block;
}
.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
<div class="dropdown" style="float:left;">
  <button class="dropbtn">Left</button>
  <div class="dropdown-content" style="left:0;">
    <div class="dropdown-list draggable" href="#">Link 1
      <div class="dropdown-sub-list">
        <div class="draggable" href="#">Link 4</div>
        <div class="draggable" href="#">Link 5</div>
        <div class="draggable" href="#">Link 6</div>
        <div class="draggable" href="#">Link 7</div>
      </div>
    </div>
    <div class="dropdown-list draggable" href="#">Link 2
      <div class="dropdown-sub-list">
        <div class="draggable" href="#">Link 4b</div>
        <div class="draggable" href="#">Link 5b</div>
        <div class="draggable" href="#">Link 6b</div>
        <div class="draggable" href="#">Link 7b</div>
      </div>
    </div>
    <div class="dropdown-list draggable" href="#">Link 3</div>
  </div>
</div>

Comments