Extra Spacing in my CSS based navigation

Question

I've been trying to create a navigation menu using css and a series of unordered lists. I have followed a tutorial which worked very nicely, but have come across a couple of problems when trying to edit it to suit my needs. There are two main issues that I'm still having trouble with.

1) In each of the sub-nav levels (first and second level) there is an extra space to the right hand side of the created area. This not only looks silly, but also effects functionality as hovering over that area causes the navigation to close.

2) How can I center the entire navigation? I've tried using text-align in each of the <div> and <nav> elements without any luck.

You can view the code as I've written it so far at: http://bootply.com/105634 (JSFiddle: http://jsfiddle.net/YAxvy/)

Sorry for all the silly colors, I was just trying to see where everything was going.

Any help would be greatly appreciated. THANKS!

Answer 1

Problem 1:

Take a look at http://jsfiddle.net/YAxvy/7/ (updated to fix left and padding issues on sub sub menu)

The problem was that the .sub-menu ul had a padding on it (not just on the top). I have removed this.

Problem 2:

Instead of using float:left you can use display: inline-block which displays them side-by-side and allows you to align them any way you like.

nav > ul > li {
    // add this line
    display: inline-block;    
}
// remove float:left from nav ul
nav > ul { 
    // and add this one
    text-align: center;
    padding-left: 0;
}

All together now! http://jsfiddle.net/YAxvy/7/

Answer 2

Try this it will fix it.

            nav ul li {
              display: inline-block;
              vertical-align: center;
              position: relative;
              line-height: 20px;
            }
            nav ul { 
              list-style: none; 
              text-align: center; 
            }

            nav ul {
              list-style: none outside none;
              padding-left: 0;
              text-align: center;
            } 

http://jsfiddle.net/cornelas/YAxvy/6/

Answer 3

DEMO updated

    #container {
        padding: 10px;
        background:olive;
    }
    #content {
        margin:25px;
        padding:10px;
        background:orange;
    }
    #container > nav > ul {
        margin: 0 330px;
    }
    nav {
        background:yellow;
    }
    /* MAIN MENU */
    nav {
        margin: 25px auto;
    }
    /*gap at top*/
    nav ul {
        list-style: none;
    }
    /*get rid of bullets*/
    /*adds a proper clear to put content back in the correct place*/
    nav ul:after {
        content:'.';
        clear: both;
        visibility: hidden;
        display: block;
        height: 0px;
    }
    nav ul li {
        float: left;
        position: relative;
        line-height: 20px;
        margin-left: 40px;
        margin-right: -40px;
    }
    nav ul li a {
        display: block;
        color: #102601;
        text-decoration: none;
        padding: 14px 15px 15px;
        font-size: 18px;
        -webkit-transition: 0.25s ease-out;
        /*ADD OTHER BROWSER TRANSITIONS*/
    }
    /*the icon before the top level links*/
    nav > ul > li > a:before {
        display: inline-block;
        background: #102601;
        /*circle color*/
        color: #e4e4e4;
        /*icon color*/
        width: 1.65em;
        /*circle size*/
        height: 1.65em;
        border-radius: 1.65em;
        /*makes it a circle*/
        line-height: 1.65em;
        /*centers icon vertically in circle*/
        text-align: center;
        /*centers icon horizontally in circle*/
        box-shadow: 0.125em 0.175em 0 0 rgba(0, 0, 0, 0.125);
        /*adds shaddow to circle*/
        margin-right: 0.75em;
        /*adds some space between icon and text*/
        -moz-transition: color 0.25s ease-in-out, background 0.25s ease-in-out;
        -webkit-transition: color 0.25s ease-in-out, background 0.25s ease-in-out;
        -o-transition: color 0.25s ease-in-out, background 0.25s ease-in-out;
        -ms-transition: color 0.25s ease-in-out, background 0.25s ease-in-out;
        transition: color 0.25s ease-in-out, background 0.25s ease-in-out;
    }
    /*the hover and active state for the icon*/
    nav > ul > li:hover > a:before, nav > ul li > a.active:before {
        background:#6DA617;
        color:white;
    }
    /* SUB MENU */
    /*triangle before*/
    nav ul li > ul:before {
        content:"";
        border-style: solid;
        border-width: 0 9px 9px 9px;
        border-color: transparent transparent #2C3E50 transparent;
        width: 0;
        height: 0;
        position: absolute;
        left: 5px;
        top: -10px;
    }
    nav ul li > ul {
        position: absolute;
        left: 14px;
        top: 80%;
        padding-top: 13px;
        background: white;
        z-index: -9999;
        opacity: 0;
        -webkit-transition: 0.3s ease-out;
        white-space:nowrap;
        padding-left:0;
    }
    nav ul li:hover > ul {
        display: block;
        z-index: 100;
        opacity: 1;
        top: 100%;
    }
    nav ul li > ul li:first-child {
        border-radius: 4px 4px 0 0;
        padding-top: 3px;
    }
    nav ul li > ul li:last-child {
        border-radius: 0 0 4px 4px;
    }
    nav ul li > ul {
        border:1px solid black;
        border-radius: 4px;
    }
    nav ul li > ul li {
        padding: 0;
        width:100%;
        left:-40px;
        /*background:green;*/
    }
    nav ul li > ul li a {
        display: block;
        padding: 6px 9px;
        font-size: 14px;
    }
    nav ul li > ul li:hover > a {
        color: #FFF;
        background: pink;
    }
    nav ul li > ul li.active > a {
        color: #FFF;
        background: red;
    }
    /* SUB SUB MENU */
    /*the triangle*/
    nav ul li > ul li > ul:before {
        content:"";
        border-style: solid;
        border-width: 0 9px 9px 9px;
        border-color: transparent transparent #2C3E50 transparent;
        width: 0;
        height: 0;
        position: absolute;
        left: -14px;
        top: 15px;
        -webkit-transform: rotate(270deg);
    }
    nav ul li > ul li > ul {
        top: 0;
        left: 90%;
        padding: 0;
        -webkit-transition: 0.3s ease-out;
    }
    nav ul li > ul li:hover > ul {
        display: block;
        opacity: 1;
        z-index: 100;
        top: 0;
        left: 100%;
    }