Jump to content

how to do a drop right menu in html and css


piano0011

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

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.