垂直<ul>从水平<ul>下拉</ul> </ul>

Question

我正在尝试创建一个基本的下拉菜单。每当我过去＆＃34;博客＆＃34;，＆＃34; wiki＆＃34;链接似乎被拖入其中。

这是一个屏幕截图，显示我的意思：

如你所见，＆＃34; wiki＆＃34;在...＆＃34;行军＆＃34;。我想要＆＃34;行军＆＃34;从＆＃34;博客＆＃34;并保持＆＃34; wiki＆＃34;沿着绿线。

＆＃13;

＆＃13;

#header {
  box-shadow: 0px 0px 5px 2px #000;
  border-radius: 15px 15px 15px 15px;
  width: 790px;
  height: 30px;
  line-height: 85%;
  background: #002929;
  word-spacing: 5px;
}
#header li {
  display: inline;
}
#header ul ul {
  display: none;
}
#header ul li:hover > ul {
  display: block;
}
#header a:hover {
  background: #0147FA;
  border-radius: 15px 15px 15px 15px;
  padding: 2px;
}
#header a {
  text-decoration: none;
  color: #ffff4c;
}

＆＃13;

<div id="header">
  <ul>
    <li style="font-size:30px"><strong><a href="index.php">Home</a></strong></li>
    <li style="font-size:30px"><strong><a href="blog.php">Blog</a></strong>
      <ul>
        <li style="font-size:30px"><strong><a href="march2015.php">March</a></strong></li>
      </ul>
    </li>
    <li style="font-size:30px"><strong><a href="wiki.php">Wiki</a></strong></li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Here's a JSFiddle.

Answer 1

所以我清理了CSS，现在似乎工作了。 这是你的html

<div id="header">
<ul>
<li style="font-size:30px"><strong><a href="index.php">Home</a></strong></li>
<li style="font-size:30px"><strong><a href="blog.php">Blog</a></strong>
<ul>
<li style="font-size:30px"><strong><a href="march2015.php">March</a></strong></li>
</ul>
</li>
<li style="font-size:30px"><strong><a href="wiki.php">Wiki</a></strong></li>
</ul>
</div>

以下是新的css：

#header {
 box-shadow: 0px 0px 5px 2px #000;
 border-radius:15px 15px 15px 15px;
 width: 790px; 
 height: 30px;
 line-height: 85%;
 background: #002929;
 word-spacing: 5px;
}

#header li {
 display: inline;
}

#header a:hover {
 background: #0147FA;
 border-radius: 15px 15px 15px 15px;
}

#header a {
 text-decoration: none;
 color: #ffff4c;
}

#header ul a
{
    text-decoration:none;
    font-weight:700;
    line-height:32px;
    padding:0 15px;
}

#header ul li
{
    position:relative;
    float:left;
    margin:0;
    padding:0
}

#header ul ul
{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    padding:0
}

#header ul li:hover > ul
{
    display:block
}

请务必比较以查看您的css和我的CSS之间的差异。如果这不是您想要的，请回复我。