CSS - Center align navigation menu. Navigation menu for navs whose elements are center align in their container. File for CSS and SCSS

css-center-align-menu.css

/*******************************TOP NAVIGATION MENU*************************************/
div.navigation {
  margin-bottom:30px;
  border:0 solid #E7E7E7;
  border-width:1px 0
}

/* Main menu settings */
nav#main {
  clear:both;
  float:left;
  margin:0;
  padding:0;
  width:100%;
  z-index:1000;
/* This makes the dropdown menus appear above the page content below */
  position:relative
}

/* Top menu items */
nav#main ul {
  margin:0;
  padding:0;
  list-style:none;
  float:right;
  position:relative;
  right:50%
}

nav#main ul li {
  margin:0;
  padding:0;
  float:left;
  position:relative;
  left:50%;
  list-style:none
}

nav#main ul li a,nav#main ul li a:link,nav#main ul li a:visited {
  display:block;
  margin:0;
  padding:8px 12px;
  text-decoration:none;
  color:#666;
  font-size:14px
}

nav#main ul li a:hover,nav#main ul li a:focus,nav#main ul li a:active {
  background:#ccc
}

nav#main ul li:hover a,nav#main ul li.hover a {
/* This line is required for IE 6 and below */
  background:#ccc
}

/* Submenu items */
nav#main ul ul {
  display:none;
/* Sub menus are hidden by default */
  position:absolute;
  left:0;
  float:left;
  right:auto;
/*resets the right:50% on the parent ul */
  width:100%
}

nav#main ul ul li {
  left:auto;
/*resets the left:50% on the parent li */
  margin:0;
/* Reset the 1px margin from the top menu */
  clear:left;
  float:left;
  width:100%
}

nav#main ul ul li a,nav#main ul li.active li a,nav#main ul li:hover ul li a,nav#main ul li.hover ul li a {
/* This line is required for IE 6 and below */
  font-weight:400;
/* resets the bold set for the top level menu items */
  background:#eee;
  color:#444;
  border-bottom:1px solid #ddd;
/* sub menu item horizontal lines */
  float:left;
  width:110%;
  font-size:12px;
  padding:8px 30px 5px 5px;
  line-height:1.4em
/* overwrite line-height value from top menu */
}

nav#main ul ul li a:hover,nav#main ul li.active ul li a:hover,nav#main ul li:hover ul li a:hover,nav#main ul li.hover ul li a:hover {
/* This line is required for IE 6 and below */
  background:#ccc;
  float:left
}

/* Flip the last submenu so it stays within the page */
nav#main ul ul.last {
  left:auto;
/* reset left:0; value */
  right:0
/* Set right value instead */
}

nav#main ul ul.last li {
  float:right;
  position:relative;
  right:.8em
}

/* Make the sub menus appear on hover */
nav#main ul li:hover ul,nav#main ul li.hover ul {
/* This line is required for IE 6 and below */
  display:block
/* Show the sub menus */
}

/*=================CURRENT MENU PAGE===========*/
nav#main ul > li.current_page_item > a:link {
  font-weight:700!important
}

nav#main ul > li.current_page_item:hover {
  background:#ccc
}

nav#main ul > li:hover ul li.current_page_item > a:link {
  font-weight:700;
  background:#ccc
}

css-center-align-menu.scss

/*******************************TOP NAVIGATION MENU*************************************/
/* Main menu settings */
div.navigation{
  margin-bottom: 30px;
  border: 0 solid #E7E7E7;
  border-width: 1px 0;

  nav#main {
    clear: both;
    float: left;
    margin: 0;
    padding: 0;
    width: 100%;
    z-index: 1000;
    /* This makes the dropdown menus appear above the page content below */
    position: relative;

    ul{
      margin:0;
      padding:0;
      list-style:none;
      float:right;
      position:relative;
      right:50%;

      li{
        margin:0;
        padding:0;
        float:left;
        position:relative;
        left:50%;
        list-style:none;

        /*Show submenus on hover*/
        &:hover,
        &.hover ul{
          /* This line is required for IE 6 and below */
            display:block
          /* Show the sub menus */
        }
        .hover a{
          /* This line is required for IE 6 and below */
          background:#ccc;
        }

        &:hover ul li.current_page_item > a:link{
          font-weight:700;
          background:#ccc;
        }

        a{
          &:link,
          &:visited{
            display:block;
            margin:0;
            padding:8px 12px;
            text-decoration:none;
            color:#666;
            font-size:14px;
          }

          &:hover,
          &:focus,
          &:active{
            background:#ccc
          }
        }

        &.current_page_item{
          a{
            font-weight:700!important;
          }

          &:hover{
            background:#ccc;
          }
        }
      }

      ul{
        display:none;
        /* Sub menus are hidden by default */
        position:absolute;
        left:0;
        float:left;
        right:auto;
        /*resets the right:50% on the parent ul */
        width:100%;

        li{
          left:auto;
          /*resets the left:50% on the parent li */
          margin:0;
          /* Reset the 1px margin from the top menu */
          clear:left;
          float:left;
          width:100%;

          a,
          &.active a,
          &:hover a,
          &.hover a,
          a:hover,
          a:active,
          a:focus{
            /* This line is required for IE 6 and below */
            font-weight:400;
            /* resets the bold set for the top level menu items */
            background:#eee;
            color:#444;
            border-bottom:1px solid #ddd;
            /* sub menu item horizontal lines */
            float:left;
            width:110%;
            font-size:12px;
            padding:8px 30px 5px 5px;
            line-height:1.4em
            /* overwrite line-height value from top menu */
          }

        }
      }
    }
  }
}