advanced code snippet search

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

Expand | Embed | Plain Text 
  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.