Solved

Remove the padding on hover of sub menu

Posted on 2016-10-01
4
61 Views
Last Modified: 2016-10-03
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

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

Open in new window


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>

Open in new window


GIF Image
Kindly let me know if any more information is required

Thanks in advance
0
Comment
Question by:Vipin Kumar
  • 2
  • 2
4 Comments
 
LVL 22

Expert Comment

by:Kim Walker
ID: 41824973
I think the issue you're referring to is a very common issue of progressive indents. The only way to create a submenu structure with unlimited levels is for each new level to have its own indent which is offset by its parent's indent. In this case, the parent's indent is separate from itself and therefore its background color does not extend all the way to the left.

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.
0
 
LVL 1

Author Comment

by:Vipin Kumar
ID: 41826428
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
0
 
LVL 22

Accepted Solution

by:
Kim Walker earned 500 total points
ID: 41827049
Actually, I misspoke. You need to replace the padding with text-indent. Padding will still move the child <ul> element away from the left margin. If your menu doesn't get more complicated than what you've posted, try the following. I've only made one change on line 11.
.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 {
  text-indent: 20px;
}
.sidebar-menu .treeview-menu > li {
  margin: 0;
}
.sidebar-menu .treeview-menu > li > a {
  padding: 5px 5px 5px 20px;
  display: block;
  font-size: 14px;
}

Open in new window

0
 
LVL 1

Author Closing Comment

by:Vipin Kumar
ID: 41827492
@Kim,

Thanks, works perfectly fine.
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
maps stopped work unsure why 7 36
How to make a moving character 3 58
HTML &#0153 2 20
Underline in nav for the page that you are currently on. 1 10
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

803 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question