html - 为什么这些列表元素没有出现在一行中？

Question

我试图让导航栏元素并排显示在一行中，下拉菜单导致菜单在它们下面下拉。

我知道有 nav 元素，我知道有上千个 jQuery 插件。我只是想了解为什么这个不起作用。

http://codepen.io/anon/pen/hjKLD

<!-- Works all the way down to IE7! -->

<header>
<nav>
    <a href="#">link</a>
    <a href="#">link</a>
    <ul class="drop">
       <li>
           <a href="#">dropdown</a>
       </li>
       <li class="menu">
           <a href="#">link</a>
           <a href="#">link</a>
           <a href="#">link</a>
           <a href="#">link</a>
       </li>
    </ul>
    <a href="#">link</a>
    <a href="#">link</a>    
</nav>
</header>

li {
 list-style-type:none;
  margin: 0px;
  padding: 0px;
  border: 0px;
}

Answer 1

尝试

ul, li {
    display: inline;
}

更新

我找到了一个快速的解决方案，而且没有使用 JavaScript!您可能需要进行一些更改以解决小问题。

这是我对您的 HTML 的建议:

<header>
    <nav>
        <ul>
            <li><a href="#">link 1</a></li>
            <li><a href="#">link 2</a></li>
            <li class="menu">Dropdown
                <ul class="drop">
                    <li><a href="#">link 3</a></li>
                    <li><a href="#">link 4</a></li>
                    <li><a href="#">link 5</a></li>
                    <li><a href="#">link 6</a></li>
                </ul>
            </li>
            <li><a href="#">link 7</a></li>
            <li><a href="#">link 8</a></li>
        </ul>
    </nav>  
</header>

它更简洁、更语义化。

现在是 CSS:

a, ul, li {
    list-style-type:none;
    margin: 0px;
    padding: 0px;
    border: 0px;
    display: inline;
    text-decoration: none;
}
a:hover {text-decoration: underline;}
ul {display: inline-block;}
.drop {
    display: none;
    padding: 5px;
    border: 1px solid #000;
    background-color: #fff;
}
.menu:hover .drop {
    display: block;
    position: absolute;
    left: 90px;
}
.drop li {display: block;}

不需要 JS。

Demo via Codepen here.