Jump to content

how to do a drop right menu in html and css

Recommended Posts

Hey guys!

I am trying to do a drop right menu to add to my drop down menu and I almost got it but just can't seem to push the padding to the right of it... Here is my part of my html and css code:I put a div class there because I wasn't sure if I needed it but don't think so....


<!DOCTYPE html>
  <meta charset="utf-8">
   <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity=">sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Aldrich|Mr+Dafoe" rel="stylesheet">



            <li><a href="#">Member's section</a><div class="down"><i class="fas fa-caret-down"></i></div>
                  <li><a href="index.php">Main Page</a></li>
                  <li><a href="practice_diary.php">Practice diary</a></li>
                  <li><a href="redeem.php">Redeem Your Points!</a></li>
                  <li><a href="forum_main.php">Forum</a></li>
                  <li><a href="quiz.php">Music Test</a></li>
                  <li><a href="review.php">Review</a></li>
                  <li><a href="update.php">Update Profile</a></li>
                  <li><a href="#">Games</a>
                   <div class="games">
                          <li><a href="guessing_game.php">Guessing Game</a></li>
                           <li><a href="rock_paper_scissors.php">Rock, Paper, Scissors</a></li>
            <li><a href="primer.php">Primer Level</a><div class="down"><i class="fas fa-caret-down"></i></div>
                  <li><a href="level1.php">Level 1</a></li>
                  <li><a href="level2.php">Level 2</a></li>
                   <li><a href="level3.php">Level 3</a></li>
            <li><a href="signup.php">Signup</a></li>
            <li><a href="refer.php">Referral page</a></li> 
            <li><a href="reset.php">Reset Password</a></li>
            <li><a href="qa.php">More Information</a><div class="down"><i class="fas fa-caret-down"></i></div>
                 <li><a href="contact.php">Contact Us</a></li>
            <li><a href="donation.php">Donation</a></li>
            <li><a href="activate.php">Activate Email</a></li>
             <div class="profile_image">
                 <li><a href="uploadform.php">Upload Profile Picture</a></li>
                 <div class="delete_profile"><li><a href="deleteprofile.php">Delete picture profile</a></li></div>
           CSS code:
           header nav ul ul ul li{
  position: absolute;
  display: none;

header nav ul ul li:hover ul li{
  display: block ;
  position: relative;
  left: 200px;
  bottom: 100px;


Share this post

Link to post
Share on other sites

You should be showing and hiding the ULs, not their LIs. Example

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.