Jump to content

madarars

Members
  • Posts

    1
  • Joined

  • Last visited

Everything posted by madarars

  1. Hi , I'm having a problem with the navigation bar , i followed up the tutorial in W3Schools to make a navigation bar with a dropdown and it all worked fine. now i need to add another submenu to the dropdown . i've tried making new classes for the new submenus to let it work so when hovering over the text the new submenu appears but it still didn't work. I would really appreciate your help if possible , here are the CSS + HTML codes : <!DOCTYPE html> <html dir="ltr" lang="en"> <head> <meta charset="utf-8" /> <title>Home - Ambeh Team</title> <link href="https://fonts.googleapis.com/css?family=Cinzel+Decorative" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet"> <link rel="stylesheet" href="style.css" type="text/css"> <style> .header { background-color: #F1F1F1; text-align: center; padding: 20px; font-family: 'Cinzel Decorative', cursive; } body { font-family: 'Cinzel', serif; } h2 , h5 { text-align: center; } .footer { background-color: #F1F1F1; text-align: center; padding: 10px; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; text-align: center; } li { float: center; display: inline-block; } li a, .dropbtn { display: inline-block; color: white; text-align: left; padding: 14px 32px; box-sizing: border-box; text-decoration: none; font-size: 18px; transition: 0.4s; } li a:hover, .dropdown:hover .dropbtn { display: inline-block; color: white; text-align: left; padding: 14px 32px; text-decoration: none; background-color: #4CAF50; font-size: 20px; } li.dropdown { display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; text-align: left; font-size: 20px; font-weight: 600; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; width:100%; } .dropdown-content a:hover { background-color: #4CAF50; } .dropdown:hover .dropdown-content { display: block; } .active { background-color: #4CAF50; color: white; } .hover { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; text-align: left; font-size: 20px; font-weight: 600; top:0; left:300px; } .dropdown2 { display: inline-block; } .dropdown2:hover .hover { display: block; } </style> </head> <body> <h1 class="header">Ambeh Team</h1> <ul> <li><a href="#home" class="active">Home</a></li> <li class="dropdown"> <a href="" class="dropbtn">Scientific Schools</a> <div class="dropdown-content"> <a href="#" class="dropdown2">King Abdullah II School of <br />Information Technology </a> <ul class="hover"> <a href="#">Computer Science</a> <a href="#">Computer Information Systems</a> <a href="#">Business Information Technology</a> </ul> <a href="#">School of Engineering</a> <a href="#">School of Science</a> <a href="#">School of Agriculture</a> </div> </li> <li style="float:right"> <a href="#">English</a> </li> </ul> </body> </html>
×
×
  • Create New...