css定位下拉在父下 [英] css positioning drop down under parent

问题描述

我在导航栏中有一个下拉列表项，无法获取下拉部分对齐父链接下面。我试图使用只是CSS和知道我以前做过，它只是在我的时刻。没有我遇到的其他例子使用相同的菜单格式，所以它是困扰，试图强制适合的代码段。请帮助我轻松解决这个问题。

I have a dropdown list item in my navbar and can't get the dropdown section to align underneath the parent link. I am trying to use just css and know I've done it before, it's just stumping me at the moment. None of the other examples I've come across use the same menu format so it's been troubling trying to force fit pieces of code. Please help me with this easy solution

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/

推荐答案

首先，您应该使用某种重置css来删除 ul & li 。

Firstly, you should use a reset css of some kind to remove the default margin / padding attached to ul & li.

然后验证您的HTML，其中包含一些错误，例如缺少开头 ul 等。

Then validate your HTML, it contained a number of errors such as missing the opening ul etc.

然后就是使用 position：absolute 和相应的值。

Then it's just a matter of using position:absolute and appropriate values.

top：100％ li c> li c 的高度（位置：相对 $ c> li 。

top:100% will place the menu directly below the li parent (with position:relative) regardless of the height of the 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>

这篇关于css定位下拉在父下的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！