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><htmldir="ltr"lang="en"><head><metacharset="utf-8"/><title>Home - Ambeh Team</title><linkhref="https://fonts.googleapis.com/css?family=Cinzel+Decorative"rel="stylesheet"><linkhref="https://fonts.googleapis.com/css?family=Cinzel"rel="stylesheet"><linkrel="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:14px32px;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:14px32px;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:0px8px16px0px rgba(0,0,0,0.2);z-index:1;text-align: left;font-size:20px;font-weight:600;}.dropdown-content a {color: black;padding:12px16px;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:0px8px16px0px 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><h1class="header">Ambeh Team</h1><ul><li><ahref="#home"class="active">Home</a></li><liclass="dropdown"><ahref=""class="dropbtn">Scientific Schools</a><divclass="dropdown-content"><ahref="#"class="dropdown2">King Abdullah II School of <br/>Information Technology </a><ulclass="hover"><ahref="#">Computer Science</a><ahref="#">Computer Information Systems</a><ahref="#">Business Information Technology</a></ul><ahref="#">School of Engineering</a><ahref="#">School of Science</a><ahref="#">School of Agriculture</a></div></li><listyle="float:right"><ahref="#">English</a></li></ul></body></html>
Navigation Bar and SubMenus
in CSS
Posted
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 :