Posted By

kronda on 02/16/11


Tagged

css navigation center centering


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

nerdfiles


Centered UL nav list with CSS


 / Published in: CSS
 

URL: http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

  1. #centeredmenu {
  2. float:left;
  3. width:100%;
  4. background:#fff;
  5. border-bottom:4px solid #000;
  6. overflow:hidden;
  7. position:relative;
  8. }
  9. #centeredmenu ul {
  10. clear:left;
  11. float:left;
  12. list-style:none;
  13. margin:0;
  14. padding:0;
  15. position:relative;
  16. left:50%;
  17. text-align:center;
  18. }
  19. #centeredmenu ul li {
  20. display:block;
  21. float:left;
  22. list-style:none;
  23. margin:0;
  24. padding:0;
  25. position:relative;
  26. right:50%;
  27. }
  28. #centeredmenu ul li a {
  29. display:block;
  30. margin:0 0 0 1px;
  31. padding:3px 10px;
  32. background:#ddd;
  33. color:#000;
  34. text-decoration:none;
  35. line-height:1.3em;
  36. }
  37. #centeredmenu ul li a:hover {
  38. background:#369;
  39. color:#fff;
  40. }
  41. #centeredmenu ul li a.active,
  42. #centeredmenu ul li a.active:hover {
  43. color:#fff;
  44. background:#000;
  45. font-weight:bold;
  46. }

Report this snippet  

You need to login to post a comment.