Question

我是css的新人。我试图用子项制作导航菜单，但我想我错过了什么。子项目与主要项目重叠。

所以我认为顶级列表项是浮动的，所以从正常的内容流中删除。这意味着我需要清除浮动，以便子项显示在主项目下。

但它不适合我..任何想法

<body>
    <div id="container">
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li>
                    <a href="#">News</a>
                    <ul>
                        <li><a>Football News</a></li>
                        <li><a>Team News</a></li>
                        <li><a>Players News</a></li>
                        <li><a>Other News</a></li>
                    </ul>
                </li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">About us</a></li>
            </ul>
        </nav>
    </div>
</body>

Answer 1

请用旧代码替换此代码：

＆＃13;

function planner_note_edit(planner_note_id,event)
{

    appointment_note = $(event.target).closest('td').find(".holiday_note").val();
    alert(appointment_note);
}

＆＃13;

<button type="button" id="" onclick="planner_note_edit(1,event)" class="btn btn-md btn-primary appointment_update_button" style="display:none"> Update </button>

＆＃13;

Answer 2

添加一些CSS

#container nav ul li {
  float: left;
  width: 100px;
  height: 40px;
  color: white;
  background-color: black;
  text-align: center;
  border-right: solid #fff 1px;
  border-bottom: solid #fff 1px;
  padding-top: 7px;
  opacity: 0.8;
  position: relative;/*Add This Property*/
}

#container nav ul li ul {
    position: absolute;
    top: 100%;
    display: none;
}
#container nav ul li:hover ul{
  display:block;
}

https://jsfiddle.net/szqk5be9/2/

Answer 3

您可以使用position进行设置，查看下面的更新代码段

* {
  padding: 0px;
  margin: 0px;
}

body {
  background-image: url("../images/background.jpeg");
}

#container {
  width: 100%;
}

nav {}

#container nav ul {
  list-style: none;
}

#container nav ul li {
  float: left;
  width: 100px;
  color: white;
  background-color: black;
  text-align: center;
  border-right: solid #fff 1px;
  border-bottom: solid #fff 1px;
  padding: 7px 5px;
  opacity: 0.8;
  position: relative;
}

#container nav ul li a {
  color: white;
  text-decoration: none;
  display: block;
}

#container nav ul li ul li {
  clear: both;
}

#container nav ul li ul {
    position: absolute;
    top: 100%;
    display: none;
}
#container nav ul li:hover ul{
  display:block;
}

<div id="container">
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li>
        <a href="#">News</a>
        <ul>
          <li><a>Football News</a></li>
          <li><a>Team News</a></li>
          <li><a>Players News</a></li>
          <li><a>Other News</a></li>
        </ul>
      </li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">About us</a></li>
    </ul>
  </nav>
</div>

Answer 4

您只能选择带有直接子选择器ul的第一个>，然后才能正常工作。

#container nav > ul li {
  float: left;
  width: 100px;
  height: 40px;
  color: white;
  background-color: black;
  text-align: center;
  border-right: solid #fff 1px;
  border-bottom: solid #fff 1px;
  line-height: 40px;
  opacity: 0.8;
}

子菜单项与导航中的主菜单重叠

4 个答案: