Register now or log in to join your professional community.
Basm allah alrahman alrahim
<html>
<head>
<title>Navigation Menu2 levels</title>
<style type="text/css">
ul ,li {margin:0;padding:0;}
.nav li { float: left; list-style: none; background: #222; }
.nav a { color: #fff; background: #222; padding:0px30px; text-decoration: none; }
.nav ul ul { display: none; }
.nav ul ul li { float: none; }
.nav li:hover ul { display: block; position: absolute; }
.nav a:hover { color: #000; background: #eee; }
</style>
</head>
<body>
<div class="container">
<div class="header"></div>
<div class="main ">
<div class="nav">
<ul>
<li><a href="">home</a></li>
<li><a href="">about</a></li>
<li><a href="">blogs</a>
<ul>
<li><a href="">article1</a></li>
<li><a href="">article2</a></li>
<li><a href="">article3</a></li>
<li><a href="">article</a></li>
<li><a href="">sitemap</a></li>
</ul>
</li>
<li><a href="">hello</a>
<ul>
<li><a href="">world1</a></li>
<li><a href="">world2</a></li>
<li><a href="">world3</a></li>
<li><a href="">world4</a></li>
<li><a href="">sitemap</a></li>
</ul>
</li>
<li><a href="">sitemap</a></li>
</ul>
</div>
</div>
<div class="footer"></div>
</div>
</body></html>
Can use an HTML Table structure or a DIV/SPAN Structure which will be more time consuming when compared to table structure which uses <tr> and <td>
Css/css3 can be used to apply the design works done on the Menu bar.Menu and Child elements can be animated using Javascript and jQuery.I prefer jQuery since it has more smoother,lot of animation,events and less code usage to achieve the work done.
Yeap,another way of completing the task is by use the frameworks like bootstrap which reduces the work on css and jquery and its less time consuming with predefined designs and functions,when compared to the traditional method i mentioned.
You don't need JQuery. Use CSS3 and :hover. You can use as well ready bootstrap snippets or Hexham Hussain's example.
