css 定位下拉到父项下

Question

我的导航栏中有一个下拉列表项，但无法让下拉部分在父项下方对齐 link。我正在尝试仅使用 css 并且我知道我以前做过，但现在这让我很困惑。 None 我遇到的其他示例使用相同的菜单格式，因此尝试强制调整代码片段一直很麻烦。请帮我解决这个简单的问题

HTML

<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>

CSS

#navbar {
    width:75%;
    margin:0px auto;
    text-align:right;
    position:relative;
    top:218px;

}

#navbar li {
    list-style:none;
    display:inline;
    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;
}
#navbar a:hover {
    background-color:#602040;
    border-bottom:solid 4px #969;
}

#navbar li ul {
    display:none;
}

#navbar li:hover ul {
    position:absolute;
    display:block;
}

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

Answer 1

我已经写了我自己的最小 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

Answer 2

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

然后验证你的HTML，它包含一些错误，例如缺少开头ul等

那么只需要使用 position:absolute 和适当的值即可。

top:100% 会将菜单直接放在 li 父项（position:relative）下方不管 [=13] 的高度=].

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>

css 定位下拉到父项下

css positioning drop down under parent

html

css

drop-down-menu