Jump to content
piano0011

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>
<html>
<head>
   
  <title></title>
  <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">

</head>
<body>

<header>
   <nav> 
     
   
               
  
 
     
     

         <ul>
            <li><a href="#">Member's section</a><div class="down"><i class="fas fa-caret-down"></i></div>
               <ul>
                  <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">
                      <ul>
                          <li><a href="guessing_game.php">Guessing Game</a></li>
                           <li><a href="rock_paper_scissors.php">Rock, Paper, Scissors</a></li>
                      </ul>
                   </div>
                   </li>
               </ul>
             </li>
            <li><a href="primer.php">Primer Level</a><div class="down"><i class="fas fa-caret-down"></i></div>
               <ul>
                  <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>
                </ul>
            </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>
               <ul>
                 <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>
              </ul>
             </li>
             <div class="profile_image">
             
              <ul>
                 <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>
              </ul>
              </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;
  
}
           

image.png.7cc2087d182a78c255fdd94934848c52.png

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

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.