Simple Verticle Nav List


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

A simple vertical navigation using UL. Nothing fancy but it's solid.


Copy this code and paste it in your HTML
  1. <style type="text/css">
  2.  
  3. #myAnncBox {
  4. position: absolute;
  5. top: 200px; left: 0; z-index: 10;
  6. width: 150px;
  7. margin: 0; padding: 0;
  8. }
  9.  
  10. .anncList {
  11. list-style-type: none;
  12. width: 150px;
  13. margin: 0; padding: 0;
  14. }
  15.  
  16. .anncList li {
  17. display: block;
  18. width: 150px;
  19. margin: 0; padding: 0;
  20. line-height: 0;
  21. font-size: 0;
  22. }
  23.  
  24. a.anncListLink:link, a.anncListLink:active, a.anncListLink:visited {
  25. display: block;
  26. font: bold 14px Verdana, Geneva, Arial, Helvetica, sans-serif;
  27. color: #003366;
  28. text-decoration: none;
  29. margin: 0; padding: 0;
  30. backgroundcolor: #FFF;
  31. cursor: pointer;
  32. border-bottom: 1px solid #CCC;
  33. }
  34.  
  35. a.anncListLink:hover {
  36. color: #FFF;
  37. background-color: #003366;
  38. border-bottom: 1px solid #000;
  39. }
  40.  
  41. .anncListLink em {
  42. display: block;
  43. width: 130px;
  44. margin: 0 10px; padding: 10px 0;
  45. font-style: normal;
  46. }
  47.  
  48.  
  49. <div id="myAnncBox">
  50. <ul class="anncList">
  51. <li>
  52. <a href="#" class="anncListLink" title="Link Item">
  53. <em>Find a Physician</em>
  54. </a>
  55. </li>
  56. <li>
  57. <a href="#" class="anncListLink" title="Link Item">
  58. <em>Driving Directions</em>
  59. </a>
  60. </li>
  61. <li>
  62. <a href="#" class="anncListLink" title="Link Item">
  63. <em>Newsletter Signup</em>
  64. </a>
  65. </li>
  66. <li>
  67. <a href="#" class="anncListLink" title="Link Item">
  68. <em>Medical News</em>
  69. </a>
  70. </li>
  71. </ul>
  72. </div>

URL: simple_nav_list

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.