Ahmer Ali Ahsan
Reputation: 6136
CSS dynamic sub-menu is not showing properly
I've created dynamic menu in ASP.NET Webform application. Here is the structure of my menu:
In which sub-menu is properly generated.
Now I am going to apply some CSS to make it eye-catching.
Here is my desire output after applying CSS on it by using SCSS pre-processor.
Issue
The issue on the above image is, the sub-menu abcd is hide behind the abcd2. Which means if I add more 3rd level sub-menu then all sub-menus hide behind the last one.
Here is my dynamic generated HTML which I've copied from browser console.
<aside class="ah-master-asidebar">
<ul id="menu">
<li>
<a class="ah-anchor-tooltip-show" href="javascript:void(0)">
<i class="fa fa-home fa-lg" aria-hidden="true"></i>
</a>
<ul class="sub-menu" style="display: none;">
<li>
<a href="/">
<strong>Dashboard</strong>
</a>
</li>
</ul>
</li>
<li>
<a class="ah-anchor-tooltip-show" href="javascript:void(0)">
<i class="fa fa-cog fa-lg" aria-hidden="true"></i>
</a>
<ul class="sub-menu" style="display: block;">
<li>
<a href="javascript:void(0)">
<strong>Setups</strong>
</a>
<ul style="display: block;">
<li>
<a href="/Views/NavigationCreation.aspx">
<strong>Navigation Creation</strong>
</a>
<ul style="display: block;">
<li>
<a href="javascript:void(0)">
<strong>abcd</strong>
</a>
</li>
</ul>
<ul style="display: block;">
<li>
<a href="javascript:void(0)">
<strong>abcd 2</strong>
</a>
</li>
</ul>
</li>
</ul>
<ul style="display: none;">
<li>
<a href="/Views/SetupFormCreation.aspx">
<strong>Form & Navigation Mapping</strong>
</a>
</li>
</ul>
<ul style="display: none;">
<li>
<a href="/Views/RoleCreation.aspx">
<strong>Role Creation</strong>
</a>
</li>
</ul>
<ul style="display: none;">
<li>
<a href="/Views/RoleRights.aspx">
<strong>Role Rights</strong>
</a>
</li>
</ul>
<ul style="display: none;">
<li>
<a href="/Views/RoleAssignments.aspx">
<strong>Role Assignment</strong>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</aside>
CSS:
.ah-master-asidebar {
height: auto;
width: 50px;
background-color: #222222;
position: fixed;
z-index: 999;
margin: 6px;
color: white;
display: inline-block;
border-radius: 6px;
padding: 10px 0 10px 0;
a {
padding: 6px;
color: white;
display: block;
text-align: center;
text-decoration: none;
}
li {
white-space: nowrap;
}
#menu {
list-style: none;
padding: 0;
margin-bottom: 0;
.sub-menu {
width: 160px;
display: none;
ul {
padding-left: 6px;
width: 160px;
list-style: none;
padding: 0;
li {
position: relative;
white-space: nowrap;
}
li {
a:hover {
background-color: #495057;
color: white;
}
}
ul {
padding-left: 6px;
position: absolute;
top: 0;
left: 200px;
}
}
}
}
#menu > li {
position: relative;
white-space: nowrap;
margin: 3px 0;
.sub-menu {
position: absolute;
top: 0;
left: 50px;
padding: 0;
list-style: none;
padding-left: 6px;
width: auto;
li {
width: 200px;
a {
background-color: #222;
}
}
}
.sub-menu > li:first-child > a {
background-color: #3276b1;
}
}
#menu:first-child > li > a.ah-anchor-tooltip-show:hover {
background-color: #495057;
}
}
JSFiddle
Conclusion
As I describe my problem briefly, please let me know what I'm doing wrong in my above HTML or CSS code?
Upvotes: 0
Views: 168
Answers (2)
bnabriss
Reputation: 99
change third level html structure to be in one ul element, so use this code
<ul style="display: block;">
<li>
<a href="javascript:void(0)">
<strong>abcd</strong>
</a>
</li>
<li>
<a href="javascript:void(0)">
<strong>abcd 2</strong>
</a>
</li>
</ul>instead of
<ul style="display: block;">
<li>
<a href="javascript:void(0)">
<strong>abcd</strong>
</a>
</li>
</ul>
<ul>
<li>
<a href="javascript:void(0)">
<strong>abcd 2</strong>
</a>
</li>
</ul>showSubmenu();
function showSubmenu() {
$('#menu li').mouseenter(function () {
$(this).children('ul').stop().show()
$('ul .sub-menu > li > ul').stop().show()
}).mouseleave(function () {
$(this).children('ul').stop().hide()
$('ul > .sub-menu > li > ul').stop().hide()
});
}.ah-master-asidebar {
height: auto;
width: 50px;
background-color: #222222;
position: fixed;
z-index: 999;
margin: 6px;
color: white;
display: inline-block;
border-radius: 6px;
padding: 10px 0 10px 0;
a {
padding: 6px;
color: white;
display: block;
text-align: center;
text-decoration: none;
}
li {
white-space: nowrap;
}
#menu {
list-style: none;
padding: 0;
margin-bottom: 0;
.sub-menu {
width: 160px;
display: none;
ul {
padding-left: 6px;
width: 160px;
list-style: none;
padding: 0;
li {
position: relative;
white-space: nowrap;
}
li {
a:hover {
background-color: #495057;
color: white;
}
}
ul {
padding-left: 6px;
position: absolute;
top: 0;
left: 200px;
}
}
}
}
#menu > li {
position: relative;
white-space: nowrap;
margin: 3px 0;
.sub-menu {
position: absolute;
top: 0;
left: 50px;
padding: 0;
list-style: none;
padding-left: 6px;
width: auto;
li {
width: 200px;
a {
background-color: #222;
}
}
}
.sub-menu > li:first-child > a {
background-color: #3276b1;
}
}
#menu:first-child > li > a.ah-anchor-tooltip-show:hover {
background-color: #495057;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<aside class="ah-master-asidebar">
<ul id="menu">
<li>
<a class="ah-anchor-tooltip-show" href="javascript:void(0)">
<i class="fa fa-home fa-lg" aria-hidden="true"></i>
</a>
<ul class="sub-menu" style="display: none;">
<li>
<a href="/">
<strong>Dashboard</strong>
</a>
</li>
</ul>
</li>
<li>
<a class="ah-anchor-tooltip-show" href="javascript:void(0)">
<i class="fa fa-cog fa-lg" aria-hidden="true"></i>
</a>
<ul class="sub-menu" style="display: block;">
<li>
<a href="javascript:void(0)">
<strong>Setups</strong>
</a>
<ul style="display: block;">
<li>
<a href="/Views/NavigationCreation.aspx">
<strong>Navigation Creation</strong>
</a>
<ul style="display: block;">
<li>
<a href="javascript:void(0)">
<strong>abcd</strong>
</a>
</li>
<li>
<a href="javascript:void(0)">
<strong>abcd 2</strong>
</a>
</li>
</ul>
</li>
</ul>
<ul style="display: none;">
<li>
<a href="/Views/SetupFormCreation.aspx">
<strong>Form & Navigation Mapping</strong>
</a>
<ul style="display: block;">
<li>
<a href="javascript:void(0)">
<strong>abcd</strong>
</a>
</li>
<li>
<a href="javascript:void(0)">
<strong>abcd 2</strong>
</a>
</li>
</ul>
</li>
</ul>
<ul style="display: none;">
<li>
<a href="/Views/RoleCreation.aspx">
<strong>Role Creation</strong>
</a>
</li>
</ul>
<ul style="display: none;">
<li>
<a href="/Views/RoleRights.aspx">
<strong>Role Rights</strong>
</a>
</li>
</ul>
<ul style="display: none;">
<li>
<a href="/Views/RoleAssignments.aspx">
<strong>Role Assignment</strong>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</aside>Upvotes: 1
user10353986
Reputation:
I found the below part was messing with the styling, the elements were absolutely positioned.
-- EDIT --
It's bad practice to blanket a group of elements with the same coordinates while being absolutely positioned. The reason being is that the elements will all collapse onto the single specified position hiding all but the very top one.
A different CSS only solution would be to use flex style for your menus and sub-menus
display: flex;
flex-direction: column;
Although in your case it's odd because of the list elements you use, which already behave in a sort of flexie way.
Original Code Answer
#menu {
list-style: none;
padding: 0;
margin-bottom: 0;
.sub-menu {
width: 160px;
display: none;
ul {
padding-left: 6px;
width: 160px;
list-style: none;
padding: 0;
li {
position: relative;
white-space: nowrap;
}
li {
a:hover {
background-color: #495057;
color: white;
}
}
/* Edited I changed position to relative and pushed it up a bit */
ul {
padding-left: 6px;
position: relative;
top: -30px;
left: 200px;
}
}
}
}
Upvotes: 0
Related Questions
- Why Javascript Sublevel menu is not working properly
- why my sub menu is not working in html css
- Submenu does not work as I want
- styling third level of menu not working
- css javascript menu submenu issue
- CSS Menu not showing sub items
- Multi level menu not showing up correctly
- Submenu with jquery is not working as it should
- CSS menu not displaying sub menus
- CSS - Sub menu is not visible