html - 为什么 <ul> 标签中的 HTML 没有出现在这个 jsfiddle 中

Question

我正在摆弄这个 jsfiddle:http://jsfiddle.net/s5LXc/2/

我试图将搜索表单放在黑条的最右侧，但它没有正确呈现，并且出于某种原因，<ul> 中的选项标签也没有显示。

知道为什么 <ul> 中的下拉菜单吗？标签根本不呈现？

谢谢!!

Answer 1

我放弃了你的代码。这就是我认为你想要的:http://cssdesk.com/pcWfx

尽可能避免相对/绝对定位。 [将它保存在应该出现在页面其余部分“顶部”的元素上。]您通常不需要它。我在这里只用它来创建下拉菜单。

更简洁的 HTML:

<div id="nav">      
  <form name="form" method="post" id="header_search">
    <label for="query">Search</label>
    <input type="text" size="10" name="query" /> 
    <input type="submit" value="Search" /> 
  </form> 
  <ul>         
    <li>
      <a href="link">Menu item</a>
      <ul> 
        <li><a href="link">Some item</a></li> 
        <li><a href="link">Some item</a></li>
      </ul> 
    </li>
    <li>
      <a href="link">Menu item 2</a>
      <ul> 
        <li><a href="link">Some item</a></li> 
        <li><a href="link">Some item</a></li>
      </ul> 
    </li>
  </ul>
</div>

更直接的 CSS:

/* the navbar */
#nav {
  background-image: url('http://www.problemio.com/img/ui/brownbannerbar.png');
  background-size: 100%;
  background-color: black;
  color: white;    
  height: 38px;
  line-height: 38px; /* vertically-center text */
}

#nav form {
  float: right; /* put form on the right */
}

/* first-level nav links */
#nav ul li {
  float: left; /* line up side-by-side on left */
  position: relative; /* position dropdown relative to this */
}

/* first-level hover color */
#nav ul li:hover {
  background: #666; 
}

/* second level nav links */
#nav ul li ul {
  display: none; /* hide initially */
  line-height: 1.4;
  position: absolute;
  top: 38px;
}

#nav ul li ul li {
  background: #666;
  padding: 0; 
  width: 100%;
}

/* show second level links on first-level hover */
#nav ul li:hover ul {
  display: block; 
}

/* second-level hover color */
#nav ul li ul li:hover{
  background: #999;  
}

/* remove margins/paddings/bullets */
#nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/* style links */
#nav li a {
  color: #fff;
  padding: 5px; 
  text-decoration: none;
}