how to do a drop right menu in html and css

piano0011 · August 19, 2018

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

requinix · August 19, 2018

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

Sign In

how to do a drop right menu in html and css

Recommended Posts

piano0011

Link to comment

Share on other sites

requinix

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information