對齊 <li's> 在全角下拉菜單中彼此相鄰

Question

所以我有點問題。 我創建了一個全角下拉菜單，其中包含幾個帶菜單項的li's 。 我用padding: 0 1000em; margin: 0 -1000em;使其全角padding: 0 1000em; margin: 0 -1000em; padding: 0 1000em; margin: 0 -1000em; 騙局，但現在li's人被放在一起了。

目的是將li彼此相鄰放置，而我在這里被卡住了。 有什么辦法嗎？ 下面是正在使用的代碼。

為了更清楚一點，我制作了一張圖像以顯示我的意思。 第一個是現在的顯示方式，第二個是我希望的顯示方式： 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>

和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

您可以將ul顯示為嵌入式塊

 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

如果有人還在尋找這樣的東西，那就是這樣的：

/*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;}