'nested dropdown menu
I am trying to make a nested menu in my nav header. Under Reports there should be two menu items Global Shop and Ndustrios. Then if I hover over either of them there should be more items to show. Currently what happens under Reports is all of the options below it show up when hovered. so it reads: Global Shop, Inventory, Sales Orders, etc.. but Ndustrios doesn't appear.
Here is what I have tried:
#nav_ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #1D3567;
text-align: center;
}
li {
display: inline-block;
}
li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 24px 16px;
text-decoration: none;
}
.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #1D3567;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: White;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content ul {
display: none;
position: absolute;
left: 100%;
top: 75;
}
.dropdown-content:hover ul {
display: block;
}
<nav>
<ul id="nav_ul">
<li class="dropdown">
<a href="#Reports">Reports</a>
<div class="dropdown-content">
<a href="#GS">Global Shop</a>
<div class="dropdown-content">
<a href="Inventory.html">Inventory</a>
<a href="sales.html">Sales Orders</a>
<a href="quotes.html">Quotes</a>
<a href="workOrder.html">Work Orders</a>
<a href="prtUsed.html">Part Where Used</a>
</div>
<a href="#ND">Ndustrios</a>
</div>
</li>
</ul>
<nav>
Solution 1:[1]
I found the below code and modified it to reflect my needs. Nested drop downs working perfectly
.parent {display: block;position: relative;float: left;line-height:30px;background-color: #1D3567;}
.parent a{margin: 10px;color: #FFFFFF;text-decoration: none;}
.parent:hover > ul {display:block;position:absolute;}
.child {display: none;}
.child li {background-color: #1D3567;line-height: 30px;border-bottom:#CCC 1px solid;border-right:#CCC 1px solid; width:100%;}
.child li a{color: #FFFFFF;}
ul{list-style-type: none;margin: 0;padding: 0px; min-width:15em;}
ul ul ul{left: 100%;top: 0;margin-left:1px;}
li:hover {background-color: #95B4CA;}
.parent li:hover {background-color: #95B4CA;}
<ul id="nav_ul">
<li class="parent"><a href="#">Home</a></li>
<li class="parent"><a href="URL">Outlook Web</a></li>
<li class="parent"><a href="#">Production</a>
<ul class="child">
<li class="parent"><a href="URL">South</a></li>
<li class="parent"><a href="URL">Enclosure Systems</a></li>
<li class="parent"><a href="URL">South</a></li>
<li class="parent"><a href="http:">Factory Andon</a></li>
<li class="parent"><a href="http:">Web Docs</a></li>
</ul>
</li>
<li class="parent"><a href="#">IT</a>
<ul class="child">
<li><a href="http://kb">Knowledge Base</a></li>
<li><a href="http:/">Submit a Ticket</a></li>
<li class="parent"><a href="http:">Archived Links</a></li>
</ul>
</li>
<li class="parent"><a href="#">Office Directories</a>
<ul class="child">
<li><a href="http://">Hennig</a></li>
<li><a href="http:/">AME</a></li>
</ul>
</li>
<li class="parent"><a href="ht">Hennig Parts</a></li>
<li class="parent"><a href="">Factory Andon</a></li>
<li class="parent"><a href="https:">Business Cards</a></li>
<li class="parent"><a href="#">Reports</a>
<ul class="child">
<li class="parent"><a href="#">Global Shop<span class="expand">»</span></a>
<ul class="child">
<li><a href="inventory">Inventory Report</a></li>
<li><a href="sales.">Sales Report</a></li>
<li><a href="quotes">Quotes Report</a></li>
<li><a href="workOrder">Work Order Report</a></li>
<li><a href="prtUsed">Part Where Used Report</a></li>
</ul>
</li>
<li class="parent"><a href="#">Ndustrios<span class="expand">»</span></a>
</li>
</ul>
</li>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | SkylarP |