Multi Level Menu

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Multi level menu</title>
<link href="multi level menu.css" rel="stylesheet">
</head>

<body>

<nav>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">Gallery</a>
    <ul>
    <li><a href="#">Photo </a></li>
    <li><a href="#">Video</a></li>
    <li><a href="#">Audio</a></li>
    </ul>

</li>
<li>SERVICES
    <ul>
    <li><a href="#">Training </a></li>
    <li><a href="#">Development</a></li>
    <li><a href="#">Placement</a></li>
    </ul>
</li>


<li><a href="#">CAREER</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>


</body>
</html>

CSS: 
*{
border:0px;
padding:0px;
margin:0px;
}
nav {
width:100%;
height:40px;
background:#39F;  
}
nav ul {
width:80%;
height:40px;
margin:0px auto;  
}
nav ul li {
list-style:none;
float:left;
line-height:40px;
padding:0px 50px;
color:#FF0;
position:relative;  
}
nav ul li a {
    color:#FF0;
    text-decoration:none;
    font-weight:bold;
}

nav ul ul {
position:absolute;
left:0px;
top:40px;
width:200px;
visibility:hidden;  
}
nav ul ul li {
width:100%;
line-height:40px;
background:#0C6;
text-align:center;  
}
nav ul li:hover ul {
visibility:visible;  
}
nav ul li:hover ul li:hover {
    background:#96C;
}
nav ul li:hover {
background:#636;  
}

Comments

Post a Comment

Popular posts from this blog

jQuery-Banner

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Slide Creation</title> <script  src="myjquery.js"></script> <script src="mycycle.js"></script> </head> <body> <div id="mybanner"> <img src="images/1.jpg">     <img src="images/2.jpg">     <img src="images/3.jpg">     <img src="images/4.jpg"> </div> <script> $(document).ready(function() {     $('#mybanner').cycle({     fx: 'scrollRight' }); }); </script> </body> </html>
Read more

JQUERY-BANNER-FADEIN AND FADEOUT

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Creating a Banner by using jquery </title> <style> *{ border:0px; padding:0px; margin:0px; } div#dynamic_banner figure img { width:100%; height:600px; position:absolute; } div#dynamic_banner .buttons { position:absolute; z-index:1000; top:550px; left:0px; width:100%; } div#dynamic_banner .buttons input[type=button]{ width:24%; height:50px; line-height:50px; text-align:center; background:rgba(255,255,255,0.5); font-size:18px; } </style> <script src="jquery.js"></script> </head> <body>     <div id="dynamic_banner">         <figure>     <img src="images/1.jpg" id="img_gp">     <img src="images/2.jpg" id="img_wp">     <img src="images/3.jpg" id="img_dm">     <img src="images/4.jpg" i
Read more

Static Web site Creating By Using Tables

<!doctype html> <head><title>Working with static Web Site</title></head> <body bgcolor="#CCCCCC"> <table width="85%" border="0" align="center" cellpadding="0" cellspacing="0">  <tr> <thead> <tr bgcolor="#FFFF99"> <th colspan="5" height=100>Name of the Company</th> </tr> </thead> </tr> <tfoot> <tr height="30"> <td colspan="5" align="center">copryright@2017 indiajobhelp.com</td> </tr> </tfoot> <tr height="50" bgcolor="#99CCCC"> <th>Home</th> <th>About Us</th> <th>Services</th> <th>Gallery</th> <th>Contact</th> </tr> <tr height="250" bgcolor="#FFCCCC"> <td colspan="5"></td> </tr> &
Read more