Question

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

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

知道为什么<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;
}

为什么<ul>标记中的HTML不会显示在此jsfiddle </ul>中

1 个答案: