水平 CSS 下拉菜单

Question

我正在尝试在 CSS 中制作水平下拉菜单。但是，它垂直显示：

我希望最上面的两个菜单项是水平的。除了制作一行 table 之外，我还能做什么？

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

您可以只删除一些 <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>

Answer 2

您可以尝试浮动列表项：

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

<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>

Answer 3

您可以添加子菜单 class/id .inline-menu{ display: inline; }

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

Answer 4

你的问题其实是这样的：inline 和 block 元素有什么区别？这是一个基本问题，对于理解 CSS/HTML 中布局的基础知识很重要。在这个主题上有一篇很好的文章以及各种方法的一些权衡：

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

基本上，

是块级标签，这意味着它显示为自己的 "block" 元素：接收布局（可设置尺寸），默认情况下占据父元素的整个宽度，并且在呈现的元素之后有一个强制中断（在一行上）。

因此，我们有许多方法可以让您的菜单项并排放置：

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

以上 link 中详细介绍了所有这些方法。就个人而言，我更喜欢使用浮动块元素。我有一个 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;
}

水平 CSS 下拉菜单

Horizontal CSS dropdown menu

html

css

menu