Question

我的导航栏中有一个下拉列表项，无法让下拉部分在父链接下方对齐。我正在尝试使用css并且知道我之前已经完成过，现在只是让我感到难过。我遇到的其他任何一个例子都没有使用相同的菜单格式，所以它一直在试图强制使用合适的代码。请帮我解决这个简单的解决方案

HTML

Using frm As New Form2
  frm.ShowDialog()
End Using

CSS

<div id="navbar">
        <li><a href="index.html" class="left">Home</a></li><!--
        --><li><a href="#">Link2</a></li><!--
        --><li><a href="#">Link3</a></li><!--
        --><li><a href="#">Link4
            <ul>
                <li><a href="#">SubLink1</a></li><br />
                <li><a href="#">SubLink2</a></li><br />
                <li><a href="#">SubLink3</a></li><br />
                <li><a href="#">SubLink4</a></li>
            </ul>
        </a></li><!--
        --><li><a href="#">Link5</a></li>
    </div>

工作示例 https://jsfiddle.net/o6Ldutp5/

Answer 1

首先，你应该使用某种重置css来删除ul附带的默认边距/填充。 li。

然后验证您的HTML，它包含许多错误，例如错过了开头ul等。

然后，只需使用position:absolute和适当的值。

top:100%会将菜单放在li父级（position:relative）的正下方，无论 li的高度。

left:0会将子菜单的左边缘与父li的左侧对齐。

#navbar {
  margin: 0px auto;
  text-align: right;
}
ul,
li {
  margin: 0;
  padding: 0;
}
#navbar li {
  list-style: none;
  display: inline-block;
  position: relative;
}
#navbar a {
  background-color: #862D59;
  font-size: 18px;
  width: 60px;
  margin: 0px;
  padding: 10px 15px;
  color: #FFF;
  text-decoration: none;
  text-align: center;
  display: block;
}
#navbar a:hover {
  background-color: #602040;
  border-bottom: solid 4px #969;
}
#navbar li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
}
#navbar li:hover ul {
  display: block;
}

<div id="navbar">
  <ul>
    <li><a href="index.html" class="left">Home</a>
    </li>
    <li><a href="#">Link2</a>
    </li>
    <li><a href="#">Link3</a>
    </li>
    <li><a href="#">Link4 </a>
      <ul>
        <li><a href="#">SubLink1</a>
        </li>
        <li><a href="#">SubLink2</a>
        </li>
        <li><a href="#">SubLink3</a>
        </li>
        <li><a href="#">SubLink4</a>
        </li>
      </ul>
    </li>
    <li><a href="#">Link5</a>
    </li>
  </ul>
</div>

Answer 2

我已经编写了自己的最小CSS而没有样式，请尝试用此替换整个CSS -

我还删除了comments和<br />代码来修改您的HTML

div#navbar li {
  display: inline-block;
}

div#navbar li ul {
  width: 200px;
  position: absolute;
  display: none;
  top: 10px;
}

div#navbar li ul li {
  display: block;
  width: 150px;
}

div#navbar li:hover ul {
    display: block;
}

ul,ol,li {
    margin-left: 0;
    padding-left: 0;
}

以下是fiddle

css定位下拉父母

2 个答案: