Advanced Search

main navigation (2-level-depth)

/ Published in: HTML
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <style>
  2. #mainNav li{display:block;position:relative;height:31px;overflow:hidden;float:right;}
  3. #it5 {width:97px;} 
  4. #it4 {width:94px;}
  5. #it3 {width:95px;}
  6. #it2 {width:101px;}
  7. #it1 {width:106px;}
  8.  
  9. .NavT {display:block;height:38px;text-indent:-9999px;}
  10. #it5 .NavT {background:url(/img/bg-mainNav-item.png) 0 0 no-repeat; width:97px;}
  11. #it4 .NavT {background:url(/img/bg-mainNav-item.png) -97px 0 no-repeat; width:94px;}
  12. #it3 .NavT {background:url(/img/bg-mainNav-item.png) -191px 0 no-repeat; width:95px;}
  13. #it2 .NavT {background:url(/img/bg-mainNav-item.png) -286px 0 no-repeat; width:101px;}
  14. #it1 .NavT {background:url(/img/bg-mainNav-item.png) -387px 0 no-repeat; width:106px;}
  15. #it5 .NavT:hover {background:url(/img/bg-mainNav-item.png) 0 -31px no-repeat;}
  16. #it4 .NavT:hover {background:url(/img/bg-mainNav-item.png) -97px -31px no-repeat;}
  17. #it3 .NavT:hover {background:url(/img/bg-mainNav-item.png) -191px -31px no-repeat;}
  18. #it2 .NavT:hover {background:url(/img/bg-mainNav-item.png) -286px -31px no-repeat;}
  19. #it1 .NavT:hover {background:url(/img/bg-mainNav-item.png) -387px -31px no-repeat;}
  20.  
  21. ul#mainNav li p.subNav {position:absolute;top:38px;right:0px; height:110px;;background:url(/img/-bg-subNav.png) repeat-x; text-align:center; width:100%;border-top:1px #ccc solid;}
  22. ul#mainNav li p.subNav a {display:block; color:#4b4b4b; background:url(/img/bg-mainNav-subNav-a.png) repeat-y; padding-top:4px;font-weight:bold; text-decoration:none;border-left:1px #ccc solid;border-right:1px #ccc solid;border-bottom:1px #ccc solid;height:22px;} ul#mainNav li p.subNav a:hover {color:#0583c9;}
  23. </style>
  24.  
  25.  
  26. <ul id="mainNav">
  27.   <li id="it1"><a class="NavT" href="#">AAA</a><p class="subNav"><a href="#">A11</a><a href="#">A22</a></p></li>
  28.   <li id="it2"><a class="NavT" href="#">BBB</a><p class="subNav"><a href="#">B11</a><a href="#">B22</a></p></li>
  29.   <li id="it3"><a class="NavT" href="#">CCC</a><p class="subNav"><a href="#">C11</a><a href="#">C22</a></p></li>
  30.   <li id="it4"><a class="NavT" href="#">DDD</a><p class="subNav"><a href="#">D11</a><a href="#">D22</a></p></li>
  31.   <li id="it5"><a class="NavT" href="#">EEE</a><p class="subNav"><a href="#">E11</a><a href="#">E22</a></p></li>
  32. </ul>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.