Create Simple Navigation Using HTML and CSS

Create Simple Navigation Using HTML and CSS

Create Simple Navigation Using HTML and CSS

HTML CODE


<html>

<head>
 <meta charset='utf-8'/>
 <title>Title</title>
 <link rel="stylesheet" type="text/css" href="menu.css">
</head>
<body>
 <div id='top_nav'>
  <ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">C</a>
    <ul>
     <li><a href="#">Web Development</a></li>
     <li><a href="#">C Programming</a></li>
     <li><a href="#">Java Tutorials</a></li>
    </ul>
   </li> 

   <li><a href="#">Java</a>
    <ul>
     <li><a href="#">Web Development</a></li>
     <li><a href="#">C Programming</a></li>
     <li><a href="#">Java Tutorials</a></li>
    </ul>
   </li> 

   <li><a href="#">PHP</a>
    <ul>
     <li><a href="#">Web Development</a></li>
     <li><a href="#">C Programming</a></li>
     <li><a href="#">Java Tutorials</a></li>
    </ul>
   </li> 
   <li><a href="#">About</a></li>
   <li><a href="#">Contact</a></li>
   <li><a href="#">Privay</a></li>
   <li><a href="#">Terms</a></li>

  </ul>

 </div>
</body>
</html>

CSS CODE

Create New Text File and Copy this code and save it as menu.css and keep both the HTML file and css file in same folder.  

#top_nav li:hover ul{
 display: block;
}

#top_nav{
 display: block;
 position: relative;
 background: #067;
 border: 1px solid rgb(200,140,0);
 font: bold 14px ubuntu;
 width: 1000px;
 height: 40px;
 margin: 0px auto;
}

#top_nav ul{
 margin: 0px;
 padding: 0px;
}

#top_nav li{
 position: relative;
 float: left;
 list-style-type: none;
}

#top_nav ul:after{
 content: *.*;
 display: block;
 height: 0px;
 clear: both;
 visibility: hidden;
}

#top_nav ul ul{
 position: absolute;
 display: none;
 left: 0px;
 width: 0px;
}

#top_nav li a{
 text-decoration: none;
 display: block;
 color: #fff;
 padding: 10px;
}

#top_nav ul ul li{ 
background: #fff;
}

#top_nav ul ul li a{ 
 color: #000;
 width: 100%; 
}