Making a drop-right menu on .css file

November 13, 2021

I’m trying to create a drop-right menu bar. Now, I can only move the drop-down menu to the right when hovering over it with margin-left: 100%;, but that drop-down menu doesn’t move up even though I use top: 0;. So it is very confusing to get to the drop-right menu bar in the CSS. If you have any solution please comment. Thank you in advance.

ul{
    margin: 0;
    padding: 0;
    list-style: none;
    
}

ul li{
    float: none;
    width: 200px;
    height: 40px;
    background-color: darkgrey;
    opacity: 0.8;
    line-height: 40px;
    text-align: center;
}

ul li a{
    text-decoration: none;
    color: white;
    display: block;
}

ul li a:hover{
    background-color: rgb(97, 98, 99);
}

ul li uL li{
    display: none;
}

ul li:hover ul li{
    display: block;
    margin-left: 100%;
}

<ul>
  <li>
    <a href="#">Living Room</a>
    
        <ul>
      <li>          
         1 : <input type="checkbox" id="index01" class="cm-toggle" onclick="index1()"><br>  
      </li>
      <li>
         2 : <input type="checkbox" id="index02" class="cm-toggle" onclick="index2()"><br>
      </li>
      <li>
         3 : <input type="checkbox" id="index03" class="cm-toggle" onclick="index3()"><br>
      </li>
      <li>
         4 : <input type="checkbox" id="index04" class="cm-toggle" onclick="index4()"><br>
      </li>
    </ul>
  </li>
</ul>

>Solution :

The "top" property needs a position property to be applied. A position like "relative", "absolute", "fixed", or "sticky". So, if you aim to use "top" here, you can add these two rules:

        ul > li {
      position: relative;
    } 

    ul li ul {
      position: absolute;
      top: 0;
    }

And the code will work fine.

ul{
    margin: 0;
    padding: 0;
    list-style: none;
    
}

ul li{
    float: none;
    width: 200px;
    height: 40px;
    background-color: darkgrey;
    opacity: 0.8;
    line-height: 40px;
    text-align: center;
}

ul li a{
    text-decoration: none;
    color: white;
    display: block;
}

ul li a:hover{
    background-color: rgb(97, 98, 99);
}

ul li uL li{
    display: none;
}

ul > li {
  position: relative;
} 

ul li ul {
  position: absolute;
  top: 0;
}

ul li:hover ul li{
    display: block;
    margin-left: 100%;
}

 <ul>
    <li>
      <a href="#">Living Room</a>
      
          <ul>
        <li>          
           1 : <input type="checkbox" id="index01" class="cm-toggle" onclick="index1()"><br>  
        </li>
        <li>
           2 : <input type="checkbox" id="index02" class="cm-toggle" onclick="index2()"><br>
        </li>
        <li>
           3 : <input type="checkbox" id="index03" class="cm-toggle" onclick="index3()"><br>
        </li>
        <li>
           4 : <input type="checkbox" id="index04" class="cm-toggle" onclick="index4()"><br>
        </li>
      </ul>
    </li>
  </ul>

Also, you can use "margin-top" instead of "top" by applying a negative margin to the top of the child "ul". The value of the margin should be the same as the "a" height, which you specified as 40px.

ul li{
    float: none;
    width: 200px;
    height: 40px; /* same like this */
    background-color: darkgrey;
    opacity: 0.8;
    line-height: 40px;
    text-align: center;
}

ul li ul {
  margin-top: -40px;
}

Here is the full code snippet:

ul{
    margin: 0;
    padding: 0;
    list-style: none;
    
}

ul li{
    float: none;
    width: 200px;
    height: 40px; /* same like this */
    background-color: darkgrey;
    opacity: 0.8;
    line-height: 40px;
    text-align: center;
}

ul li ul {
  margin-top: -40px;
}

ul li a{
    text-decoration: none;
    color: white;
    display: block;
}

ul li a:hover{
    background-color: rgb(97, 98, 99);
}

ul li uL li{
    display: none;
} 

ul li:hover ul li{
    display: block;
    margin-left: 100%;
}

 <ul>
    <li>
      <a href="#">Living Room</a>
      
          <ul>
        <li>          
           1 : <input type="checkbox" id="index01" class="cm-toggle" onclick="index1()"><br>  
        </li>
        <li>
           2 : <input type="checkbox" id="index02" class="cm-toggle" onclick="index2()"><br>
        </li>
        <li>
           3 : <input type="checkbox" id="index03" class="cm-toggle" onclick="index3()"><br>
        </li>
        <li>
           4 : <input type="checkbox" id="index04" class="cm-toggle" onclick="index4()"><br>
        </li>
      </ul>
    </li>
  </ul>