Question

我正在尝试在CSS中创建一个水平下拉菜单。但是，它垂直显示： enter image description here

我希望两个最顶层的菜单项是水平的。除了制作一排一张桌子外，我该怎么办？

ul ul {
  display: none;
}
ul li:hover > ul {
  display: block;
}

<ul>
  <li>
    <a href="#">abc</a>
    <ul>
      <li><a href="#">abc</a></li>
      <li><a href="#">abc</a></li>
    </ul>
  </li>
  <li>
    <a href="#">abc</a>
    <ul>
      <li><a href="#">abc</a></li>
      <li><a href="#">abc</a></li>
    </ul>
  </li>
</ul>

Answer 1

您可以尝试浮动列表项：

＆＃13;

.root {
  overflow: hidden; /* clear float */
}
.root > li {
  float: left;
}

＆＃13;

<ul class="root">
  <li>
    <a href="#">abc</a>
    <ul>
      <li><a href="#">abc</a></li>
      <li><a href="#">abc</a></li>
    </ul>
  </li>
  <li>
    <a href="#">abc</a>
    <ul>
      <li><a href="#">abc</a></li>
      <li><a href="#">abc</a></li>
    </ul>
  </li>
</ul>

＆＃13;

Answer 2

您可以在子菜单中添加类/ ID .inline-menu{ display: inline; }

http://jsfiddle.net/dyaskur/fby9fan6/

Answer 3

您问题的要点实际上是：内联和块元素之间有什么区别？这是一个基本问题，对于理解CSS / HTML中布局的基础知识非常重要。关于这个主题有一个很好的写作，以及各种方法的一些权衡：

http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/

基本上，＆lt; li＆gt;是块级标记，意味着它显示为自己的＆＃34;块＆＃34; element：接收一个布局（可设置的尺寸），默认采用父元素的整个宽度，并在渲染元素之后有一个强制中断（在自身的一行上）。

所以，这让我们有了一些让你的菜单项并排放置的方法：

为菜单项使用内联级元素
使用块级元素并浮动它们
使用块级元素并将它们设置为内联块

所有这些方法都在上面的链接中详述。就个人而言，我更喜欢使用浮动块元素。我有一个fiddle有一些粗略的CSS给你一个想法。请注意，还有一些关于如何显示子菜单的注意事项。您注意到我已将这些实现为 display：block ，没有浮动，因为我们希望它们垂直堆叠。

<强> HTML

<ul class="menu">
  <li>
    <a href="#">foo</a>
    <ul class="submenu">
      <li><a href="#">subfoo1</a></li>
      <li><a href="#">subfoo2</a></li>
    </ul>
  </li>
  <li>
    <a href="#">bar</a>
    <ul class="submenu">
      <li><a href="#">subbar1</a></li>
      <li><a href="#">subbar2</a></li>
    </ul>
  </li>
</ul>

<强> CSS

ul.menu {
    list-style: none;
}

ul.menu > li{
    float: left;
    position: relative;
}

ul.menu li {
    background-color: #cccccc;
    padding: 5px 20px;
}

ul.menu > li + li {
    border-left: solid black 2px;
}

ul.menu li:hover > ul {
    display: block;
}

ul.menu li a,ul.menu li a:link, ul.menu li a:hover, ul.menu li a:visited {
    color: black;
    text-decoration: none;
}

ul.submenu{
    display: none;
    list-style: none;
    position:absolute;
    left: 0;
    padding: 0;
}

ul.submenu li {
    float:none;
    display: block;
}

ul.submenu > li + li {
    border-top: solid black 1px;
}

Answer 4

您只需删除一些<li>代码：

<ul>
            <li>
                <a href="#">abc</a>
                <ul>
                    <a href="#">abc</a>
                    <a href="#">abc</a>
                </ul>
            </li>
            <li>
                <a href="#">abc</a>
                <ul>
                    <a href="#">abc</a>
                    <a href="#">abc</a>
                </ul>
            </li>
        </ul>

水平CSS下拉菜单

4 个答案: