CSS-下拉子菜单即使在绝对定位下也无法正确对齐到父按钮下方

Question

Title fairly explanatory.

My dropdown submenus are not aligning exactly to the bottom of the parent list item element.

The li has a relative position, and the submenu has an absolute position, and I've tried positioning the submenus 100% from the top of the parent, which makes it appear about half way down the parent li. Equally, I've tried using top 175%, which works fine on my screens, but not on others. Surely setting it to be 100% from the top of the parent should be working

 @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

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

You have the li formatted as inline , and that's what messes this up.

Using your browser dev tools, you can clearly see that the links inside are higher than your li .

Make your li inline-block instead.

Answer 3

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

i checked your fiddler and found the solution for you. Should change top position for the element:

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

Also check that you have top: 100% 2 times.

Answer 5

In the file bootstrap.min.css line no -1982

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