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>
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;
}
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.
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;
}
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.
In the file bootstrap.min.css
line no -1982
.dropdown-menu {
position: absolute;
/*top: 100%;*/ this is the change hide this top:100%
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.