新手问题 请老师们看下:为什么一级菜单和二级菜单挤在一行。

xfeile · 2014年04月30日 · 最后由 xfeile 回复于 2014年04月30日 · 2497 次阅读

<!doctype html>

Document *{ margin: 0px; padding:0px; border:0; } .nav { background-color: #eee; width:600px; height: 40px; margin: 0 auto; } ul { list-style-type: none; } .nav ul li { float: left; line-height: 40px; text-align: center; } a { text-decoration: none; border: solid 3px purple; border-radius:5px; color: #000; padding: 0 10px; display: block; } a:hover { color: #FFF; background-color: #666; }

你仔细检查过你的代码么?

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    *{ margin: 0px; padding:0px; border:0; }
    .nav {
      background-color: #eee;
      width:600px;
      height: 40px;
      margin: 0 auto;
    }
    ul {
      list-style-type: none;
    }
    .nav ul li {
      float: left;
      line-height: 40px;
      text-align: center;
    }
    a {
      text-decoration: none;
      border: solid 3px purple;
      border-radius:5px;
      color: #000;
      padding: 0 10px;
      display: block;
    }
    a:hover {
      color: #FFF;
      background-color: #666;
    }
  </style>
</head>
<body>
  <div class=nav>
    <ul>
      <li><a href="#">home</a></li>
      <li>
        <a href="#">products</a>
        <ul>
          <li><a href="#">coffee</a></li>
          <li><a href="#">cake</a></li>
        </ul>
      </li>
      <li><a href="#">service</a></li>
      <li><a href="#">faqs</a></li>
      <li><a href="#">about us</a></li>
    </ul>
  </div>
</body>
</html>

@xfeile 建议先把帖子的格式整理一下。这样方便其它人阅读.可参考认识与入门 Markdown 另外可以到Christmas Button实时查看. 把 @miclle 的 Code 和你的 Code.对比一下。

我是刚学习 html 不久,想做一个弹出的二级菜单效果。刚开始代码是缩进好的,但是我看到一级二级挤在一起,我认为是缩进出了问题就全部取消缩进了。谢谢老师指点。这点代码也跟着教程一点点写的。

我还不会 Markdown,在 win7 上面练习,谢谢各位老师指点。我在看下我的代码。我知道哪里错了。二级的 ul 没有写到 li 里面。昨天晚上闭门造车搞了好几个小时。想不到问题出在这么简单的嵌套关系里面。

需要 登录 后方可回复, 如果你还没有账号请 注册新账号