Create Simple Navigation Using HTML and CSS

Create Simple Navigation Using HTML and CSS create drop down navigation bar create custom navigation bar create your own navigation bar create navigation bar photoshop create myspace navigation bar create css navigation bar create navigation bar dreamweaver create flash navigation bar

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%; 
}

You May Also Like...

Subscribe Us