Question

所以我遇到了一些问题。我创建了一个全宽下拉菜单，其中包含一些带有菜单项的li's。我使用padding: 0 1000em; margin: 0 -1000em;技巧将其设为全宽，但现在li's被置于彼此之下。

我的目标是让李的彼此相邻，我会被困在这里。有解决方案吗以下是正在使用的代码。

为了清楚一点，我已经制作了一张图片来展示我的意思。第一个是它现在如何显示，第二个是我希望它如何显示：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;}

在全宽下拉菜单中将<li's>对齐在彼此旁边

2 个答案: