对齐 <li's> 在全角下拉菜单中彼此相邻

Question

So I'm having a bit of a problem. I've created a fullwidth dropdown menu that contains a few li's with menu-items in them. I made it fullwidth with the padding: 0 1000em; margin: 0 -1000em; padding: 0 1000em; margin: 0 -1000em; trick but now the li's are being placed under each other.

The goal is to place the li's next to each other and I'm getting stuck here. Any solutions? Below is the code being used.

To make it a bit clear I've made a image to show what I mean. The first one is how it displays now and the second one is how I'd like it to be displayed: http://imgur.com/a/09r6t

HTML:

<nav class="main-navigation clearfix">
            <ul id="menu">
               <li class="hovertest">   
                   <a href="category.html">Men</a>
                        <ul class="submenu">
                            <li>
                                <a href="subcategory.html">Shoes</a>
                                <ul class="subsubmenu">
                                    <li>
                                        <a href="subsubcategory.html">Slippers</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                </li>
            </ul>
        </nav>

And the CSS:

.header-container .navigation-container {width: 100%; padding: 0; margin:0 auto; clear: both; }
.header-container .main-navigation {}

.header-container .main-navigation ul{float: left;  margin: 3px 0 0 0; padding:0; list-style-type:none}
.header-container .main-navigation ul li{float:left; margin: 0; font-family: 'NewCenturySchlbkLTPro-Roman', Georgia, Times New Roman, serif; text-transform: uppercase; font-size: 12px; position:relative; }
.header-container .main-navigation ul li a{letter-spacing: .2em; color: #000; display: block; padding: 10px 10px 10px 10px; outline-style: none;}
.header-container .main-navigation ul li a:hover,
.header-container .main-navigation ul li.active a{color: #7b4a59; box-shadow: 0 14px 0px 0px white, 135px -8px 0px 0px white, 1px 0 9px 0px #cccccc, -2px 0 6px -3px #cccccc}

.header-container .main-navigation ul.submenu{margin:0;}
.header-container .main-navigation ul li ul.submenu{position:absolute; width:250px; padding-top:15px; }
.header-container .main-navigation ul li ul.submenu li{display:none; position: relative; left: 0; top: 100%; padding: 0 1000em; margin: 0 -1000em; z-index: 101;     -o-box-shadow: 0 5px 10px 0 rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 5px 10px 0 rgba(0,0,0,0.5);
    -moz-box-shadow: 0 5px 10px 0 rgba(0,0,0,0.5);
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.5);}

.header-container .main-navigation ul li ul.submenu li a{letter-spacing: .2em; color: #000; display: block; padding: 0; outline-style: none;}
.header-container .main-navigation ul li ul.submenu li a:hover,
.header-container .main-navigation ul li ul.submenu li.active a{color: #7b4a59;}

.header-container .main-navigation ul li:hover ul.submenu li{display:block; z-index:999; background-color:white; float:none; overflow:auto; padding-bottom:25px;}

.header-container .main-navigation ul li ul.subsubmenu li{box-shadow:none;}
.header-container .main-navigation ul li ul.subsubmenu li a{color:red;}

Answer 1

You can make the ul display as inline-block

 ul.menu { display: inline-block; } ul.menu li { list-style: none; } ul.menu li:hover { cursor: pointer; background-color: goldenrod; } 

 <div id='menucontainer'> <ul id='menu1' class='menu'> <li>One-1</li> <li>One-2</li> <li>One-3</li> </ul> <ul id='menu2' class='menu'> <li>Two-1</li> <li>Two-2</li> <li>Two-3</li> </ul> </div> 

Answer 2

If anyone is still looking for something like this, it's like this:

/*Main menu*/
.header-container .navigation-container {width: 100%; padding: 0; margin:0 auto; clear: both; }
.header-container .main-navigation {}

.header-container .main-navigation ul{float: left; padding:0; list-style-type:none; margin:0;}
.header-container .main-navigation ul li{float:left; margin: 0; margin-left:-10px; margin-right:10px; font-family: 'NewCenturySchlbkLTPro-Roman', Georgia, Times New Roman, serif; text-transform: uppercase; font-size: 12px; position:relative; }
.header-container .main-navigation ul li a{letter-spacing: .2em; color: #000; display: block; padding: 16px 10px 15px 10px; outline-style: none;}
.header-container .main-navigation ul li a:hover{color: #7b4a59; }
.header-container .main-navigation ul li.menu-list:hover > ul{visibility: visible; opacity: 1; border-top:1px solid #cccccc;}
.header-container .main-navigation ul li.menu-list:hover:after{content:""; position:relative; display:block; width:100%; height:1px; background: #FFF; z-index:1000;}

.header-container .main-navigation ul li.menu-list{border-left:1px solid transparent ;border-top:1px solid transparent;border-right:1px solid transparent}
.header-container .main-navigation ul li.menu-list:hover,
.header-container .main-navigation ul li.menu-list.active a{color: #7b4a59; border-left:1px solid #cccccc;border-top:1px solid #cccccc;border-right:1px solid #cccccc}

/*Sub menu*/
.featured-menu{background-color:#e3e2e5;}
.header-container .main-navigation ul.submenu{margin:0;}
.header-container .main-navigation ul li ul.submenu{position: absolute; left: 0;  padding-left: 100em; padding-right: 100em; margin: 0px -1034em 0 -100em; z-index: 101;
    visibility: hidden; opacity: 0; background: #ffffff;)
    -o-box-shadow: 0 5px 10px 0 rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 5px 10px 0 rgba(0,0,0,0.5);
    -moz-box-shadow: 0 5px 10px 0 rgba(0,0,0,0.5);
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.5);;
}

.header-container .main-navigation ul li ul.submenu li{display:none; position: relative; left: 0; top: 100%; z-index: 101;}
.header-container .main-navigation ul li ul.submenu li:last-child{}

.header-container .main-navigation ul li ul.submenu li a{padding-top:15px; text-transform:uppercase; font-size:12px; letter-spacing: .2em; color: #000; display: block;  outline-style: none; }
.header-container .main-navigation ul li ul.submenu li a:hover,
.header-container .main-navigation ul li ul.submenu li.active a{color: #7b4a59; box-shadow:none!important}

.header-container .main-navigation ul li:hover ul.submenu li{display: block; z-index:999; background-color:transparent; float:left; padding:25px 15px 25px 10px; overflow:auto;}
.header-container .main-navigation ul li:hover ul.submenu li:first-child{}

/*Sub sub menu*/
.header-container .main-navigation ul li ul.subsubmenu li{box-shadow:none!important; float:none!important; padding-bottom:0!important; padding-top:0!important; padding-left:0!important;}
.header-container .main-navigation ul li ul.subsubmenu li a{margin-left:5px; font-family: 'Swiss721BT-Light',"Helvetica Neue",Helvetica,Arial,sans-serif; text-transform: uppercase;
    font-size: 12px; letter-spacing: .1em; color: #000; padding-bottom:0px;}
.header-container .main-navigation ul li ul.subsubmenu li a:last-child{padding-bottom:15px; padding-top:0px; margin-left:15px;}