CSS

Question

标题相当说明性。

我的下拉子菜单没有与 parent 列表项元素的底部完全对齐。

li 有一个相对位置，子菜单有一个绝对位置，我试过将子菜单定位在距 parent 顶部 100% 的位置，这使得它出现在大约一半的位置parent里。同样，我尝试过使用 top 175%，这在我的屏幕上运行良好，但在其他屏幕上却不行。当然将它设置为距 parent 顶部的 100% 应该有效

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700");
body,
html {
  font-family: 'Open Sans';
}

nav {
  position: relative;
  margin-top: 0px;
  padding: 0 2vw;
  background: rgba(232, 227, 227, 1.05);
}

nav ul {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline;
}

nav>ul:last-of-type {
  float: right;
}

nav>ul>li {
  display: inline;
  position: relative;
  margin: 0;
  padding: 0;
}

nav ul>li>a,
nav ul>li>a:focus {
  color: #000;
  font-weight: 600;
  font-size: 13px;
  display: table-cell;
  height: 100%;
  padding: 15px 20px;
  text-decoration: none;
  transition: all linear 0.1s;
  -webkit-transition: all linear 0.1s;
  -moz-transition: all linear 0.1s;
}

nav ul>li>a>span {
  margin-left: 10px;
  transition: all linear 0.1s;
  -webkit-transition: all linear 0.1s;
  -moz-transition: all linear 0.1s;
}

nav ul ul.submenu {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  list-style: none;
  top: 100%;
  background: rgba(232, 227, 227, 1.05);
  z-index: 99;
}

nav ul ul.submenu li,
nav ul ul.submenu li a {
  width: 200px;
}

nav>ul>li:hover ul.submenu {
  display: inline-block;
}

nav ul>li:hover>a {
  color: #fff !important;
  background: #ce0000;
  text-decoration: none;
}

nav ul.submenu>li:hover>a,
nav ul.submenu>li>a.active {
  background: rgba(206, 0, 0, 0.8);
}

<nav id="navbar" class="navigation">
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/personaldetails">Personal Details</a>
      <ul class="submenu">
        <li><a href="/yourmoney">My Money</a></li>
        <li><a href="/mydetails">My Details</a></li>
        <li><a href="/admindetails">Admin Details</a></li>
        <li><a href="/contracts">Contracts</a></li>
      </ul>
    </li>
    <li><a href="/company">Company</a>
      <ul class="submenu">
        <li><a href="/taxsettings">Tax Settings</a></li>
      </ul>
    </li>
    <li><a href="/invoice">Invoices</a>
      <ul class="submenu">
        <li><a href="/invList">View All Invoices</a></li>
      </ul>
    </li>
    <li><a href="/contact">Create Contact</a></li>
    <li><a href="/expenses">Expenses</a>
      <ul class="submenu">
        <li><a href="/expenselist">View All Expenses</a></li>
      </ul>
    </li>
    <li><a href="/payslips">Payslips</a></li>
  </ul>
</nav>

JSFiddle

Answer 1

添加前 100%

nav ul ul.submenu
{
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    list-style: none;
    background: rgba(232, 227, 227, 1.05);
    z-index: 99;
}

https://jsfiddle.net/eb5xkLcj/2/

Answer 2

您将 li 格式化为 inline，这就是问题所在。

使用你的浏览器开发工具，你可以清楚地看到里面的链接比你的li更高。

改为 li inline-block。

Answer 3

添加顶部 37px

nav ul ul.submenu {
      display: none;
      position: absolute;
      left: 0;
      top: 37px;
      list-style: none;
      background: rgba(232, 227, 227, 1.05);
      z-index: 99;
    }

Answer 4

我检查了你的提琴手并找到了适合你的解决方案。应更改元素的顶部位置：

nav ul ul.submenu
{
    display: none;
    position: absolute;
    left: 0;
    top: 35px; // HERE
    list-style: none;
    background: rgba(232, 227, 227, 1.05);
    z-index: 99;
}

同时检查您是否有 top: 100% 2 次。

Answer 5

在文件bootstrap.min.css行号-1982

 .dropdown-menu {
     position: absolute;
     /*top: 100%;*/  this is the change hide this top:100%
 }

CSS - 下拉菜单 Sub-Menu 未正确对齐 parent 按钮下方，即使使用绝对定位也是如此

CSS - Dropdown Sub-Menu not correctly aligning below parent button even with absolute positioning

html

submenu

drop-down-menu