Posted By

xxc on 10/19/09


Tagged

navigation


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

grzyweasel


main navigation (2-level-depth)


 / Published in: HTML
 

  1. #mainNav li{display:block;position:relative;height:31px;overflow:hidden;float:right;}
  2. #it5 {width:97px;}
  3. #it4 {width:94px;}
  4. #it3 {width:95px;}
  5. #it2 {width:101px;}
  6. #it1 {width:106px;}
  7.  
  8. .NavT {display:block;height:38px;text-indent:-9999px;}
  9. #it5 .NavT {background:url(/img/bg-mainNav-item.png) 0 0 no-repeat; width:97px;}
  10. #it4 .NavT {background:url(/img/bg-mainNav-item.png) -97px 0 no-repeat; width:94px;}
  11. #it3 .NavT {background:url(/img/bg-mainNav-item.png) -191px 0 no-repeat; width:95px;}
  12. #it2 .NavT {background:url(/img/bg-mainNav-item.png) -286px 0 no-repeat; width:101px;}
  13. #it1 .NavT {background:url(/img/bg-mainNav-item.png) -387px 0 no-repeat; width:106px;}
  14. #it5 .NavT:hover {background:url(/img/bg-mainNav-item.png) 0 -31px no-repeat;}
  15. #it4 .NavT:hover {background:url(/img/bg-mainNav-item.png) -97px -31px no-repeat;}
  16. #it3 .NavT:hover {background:url(/img/bg-mainNav-item.png) -191px -31px no-repeat;}
  17. #it2 .NavT:hover {background:url(/img/bg-mainNav-item.png) -286px -31px no-repeat;}
  18. #it1 .NavT:hover {background:url(/img/bg-mainNav-item.png) -387px -31px no-repeat;}
  19.  
  20. 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;}
  21. 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;}
  22.  
  23.  
  24. <ul id="mainNav">
  25. <li id="it1"><a class="NavT" href="#">AAA</a><p class="subNav"><a href="#">A11</a><a href="#">A22</a></p></li>
  26. <li id="it2"><a class="NavT" href="#">BBB</a><p class="subNav"><a href="#">B11</a><a href="#">B22</a></p></li>
  27. <li id="it3"><a class="NavT" href="#">CCC</a><p class="subNav"><a href="#">C11</a><a href="#">C22</a></p></li>
  28. <li id="it4"><a class="NavT" href="#">DDD</a><p class="subNav"><a href="#">D11</a><a href="#">D22</a></p></li>
  29. <li id="it5"><a class="NavT" href="#">EEE</a><p class="subNav"><a href="#">E11</a><a href="#">E22</a></p></li>
  30. </ul>

Report this snippet  

You need to login to post a comment.