Vipin Kumar
asked on
Remove the padding on hover of sub menu
Hi,
I am using the AdminLTE Dashboard template to create a web application. What I want to achieve is that when I hover on the li's in the sub menu in the left sidebar. The background color should take the complete width of the sidebar without padding.
I have attached a GIF image which shows my current problem as i dont have it hosting avaiable i.e. on hovering over the sub level of the menu the background is not taking the whole width instead it is getting padded, like it is taking the whole width on the top level menu Options 1,2 and 3.
Below is the css code that I am using
Below is the html code
Kindly let me know if any more information is required
Thanks in advance
I am using the AdminLTE Dashboard template to create a web application. What I want to achieve is that when I hover on the li's in the sub menu in the left sidebar. The background color should take the complete width of the sidebar without padding.
I have attached a GIF image which shows my current problem as i dont have it hosting avaiable i.e. on hovering over the sub level of the menu the background is not taking the whole width instead it is getting padded, like it is taking the whole width on the top level menu Options 1,2 and 3.
Below is the css code that I am using
.sidebar-menu li.active > .treeview-menu {
display: block;
}
.sidebar-menu .treeview-menu {
display: none;
list-style: none;
padding: 0;
margin: 0;
}
.sidebar-menu .treeview-menu .treeview-menu {
padding-left: 20px;
}
.sidebar-menu .treeview-menu > li {
margin: 0;
}
.sidebar-menu .treeview-menu > li > a {
padding: 5px 5px 5px 20px;
display: block;
font-size: 14px;
}
Below is the html code
<ul class="sidebar-menu">
<li class="treeview active">
<a href="#">
<i class="fa fa-files-o"></i>
<span>Layout Options</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu active">
<li>
<a href="#"><i class="fa fa-circle-o"></i> Option 1
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><a href="boxed.html" target="_blank"><i class="fa fa-circle-o"></i> Boxed</a></li>
<li><a href="boxed_collapsed.html" target="_blank"><i class="fa fa-circle-o"></i> Boxed Collapsed</a></li>
</ul>
</li>
<li class="active">
<a href="#"><i class="fa fa-circle-o"></i> Option 2
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu active">
<li class="active"><a href="normal.html" target="_blank"><i class="fa fa-circle-o"></i> Normal</a></li>
<li><a href="fixed_header_sidebar.html" target="_blank"><i class="fa fa-circle-o"></i> Fixed H & S</a></li>
<li><a href="fixed_header_sidebar_footer.html" target="_blank"><i class="fa fa-circle-o"></i> Fixed H, S & F</a></li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-circle-o"></i> Option 3
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><a href="normal_collapsed.html" target="_blank"><i class="fa fa-circle-o"></i> Normal Collapsed</a></li>
<li><a href="collapsed_fixed_header_sidebar.html" target="_blank"><i class="fa fa-circle-o"></i>Collapsed Fixed H & S</a></li>
<li><a href="collapsed_fixed_header_sidebar_footer.html" target="_blank"><i class="fa fa-circle-o"></i>Collapsed Fixed H, S & F</a></li>
</ul>
</li>
</ul>
</li>
</ul>
Kindly let me know if any more information is required
Thanks in advance
ASKER
Hi Kim,
Can you tell me how can I achieve it. Would be nice if you could provide the CSS code for the same.
Thanks
Can you tell me how can I achieve it. Would be nice if you could provide the CSS code for the same.
Thanks
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
@Kim,
Thanks, works perfectly fine.
Thanks, works perfectly fine.
The only way for the background color to extend all the way to the left is to manually configure a different indent amount for each sublevel of the menu. But this also requires the structure of the menu to be changed. Most menus are created using unordered list elements. The normal configuration for <ul> elements is that the padding is applied to the parent <ul> and none to the <li>. This would have to be reversed in order for the <li> to go all the way to the left margin -- the padding would need to be applied to the <li> and none to the <ul>. And the padding amount would need to be manually doubled for the next sublevel, and manually tripled for the next, and so on... If at a later date you decide to add another sublevel, a manual configuration would have to added for it.
If you add different color borders to your <ul> and <li> elements, you will be able to see how the structure stacks up.