Jump to content

madarars

Members
 View Profile  See their activity

  • Posts

    1

  • Joined

  • Last visited

 Content Type 

Posts posted by madarars

    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 : 

    <!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...