how to position nested list items?
Tags: html,css,html5,html-lists,css-position
Problem :
Well I'm a web design newbie. Any help would be appreciated.
I'm learning html and css by doing a live project and got stuck in positioning nested list items.
My web browser render look like this.
My HTML:
<nav class="nav-sidebar">
<ul class="sidebar-ul">
<li class="sidebar-parent">parent-item-1
<ul class="sidebar-sublist">
<li class="sidebar-children">child 1</li>
<li class="sidebar-children">child 2</li>
</ul>
</li>
<li class="sidebar-parent">parent-item-2
<ul class="sidebar-sublist">
<li class="sidebar-children">child 1</li>
<li class="sidebar-children">child 2</li>
</ul>
</li>
<li class="sidebar-parent">parent-item-3
<ul class="sidebar-sublist">
<li class="sidebar-children">child 1</li>
<li class="sidebar-children">child 2</li>
</ul>
</li>
</ul>
</nav>
My CSS:
for the nav side bar
.nav-sidebar{
width: 250px;
background: #444444;
position: fixed;
height: 100%;}
for the parent li
.sidebar-parent{
display: block;
width: auto;
padding-right: 5px;
padding-left: 20px;
border-bottom: 1px solid #211D1D;
text-transform: uppercase;
font-size: 1em;
font-family: helvetica;
text-decoration: none;
background: #2D2828;}
for the children li
.sidebar-children{
text-decoration: none;
text-transform: lowercase;
color: #efefef;
background: #000000;
padding-right: 5px;
padding-left: 20px;
width: auto;
display: block;}
How can I position the children to align to the extreme left of the sidebar? At least just below the parent li
?
Thank you so much for helping out, and sorry for my horrible English and code. Thanks for any help.
Solution :
Reset the default styles applied by the browser to ul
tags.
.sidebar-sublist{
padding: 0px;
margin: 0px;
}
Also remove the left padding from .sidebar-parent
.
CSS Howto..
Put background-images on absolutely positioned pseudo-elements. Demo Sorry, misread your question, here is the same technique with a 'sprite': Demo...
You have to set left to default, and the value for right: $(document).ready(function(){ $('#check').css({ 'right':'20px', 'left': 'auto' }); }); JSfiddle thanks to MackieeE...
I just realized its for sure doable only with CSS, here is your code https://jsfiddle.net/u6mno29m/1/ HTML <div class="text_rotate"> <ul> <li class="rotate">One</li> <li class="rotate">Two</li> <li class="rotate">Three</li> </ul> </div> CSS .rotate {...
Adding vertical-align: bottom to the containing TD seems to do it if I'm understanding you correctly. .stat-table-vert tr:first-of-type td { border-left: 1px solid #090; border-right: 1px solid #090; padding: 0;...
No % is relative depending on the parents height. If you want to set it based on some other div you will need to get that div's height then set...
you can do this for the whole Liferay instance by specifying theme.css.fast.load=false in your portal-ext.properties file. However, if it's for verification pupose, you can just add css_fast_load=0 in your request...
:s/\([{;]\)\s*/\1\r/g | '[+1,']sort | '[,']join Split the line on { or ; to get each rule into a separate line, :sort them (omitting the first line containing the CSS definition),...
If you are going through the editor in the admin panel of the Wordpress then the only way to "edit" those files it to override their styles. You have to...
Explanation Bootstrap's adds position: absolute to the .dropdown-menu class. As you may know, all absolutely positioned elements are positioned in relation to the first parent element they find with position:...
:nth-child() simply doesn't work in all browsers (mainly IE), if you wish to hide the second row using CSS2, you could add a specific class: <table> <tr><td>test data 1</td></tr> <tr...
You first have to load you font in the document's head and than use the font in conjunction with the right font-weight in your CSS. PS: You got a little...
I'm afraid that can't work. Adding display:block; to your link and would be a start for your method, but check the result: http://jsfiddle.net/uu96D/ vertical-align: bottom; won't push the a tag...
I will assume you have <a href="hello.png"><img src="images/hello.png" height="100" width="350"/></a> and wish to control its style using CSS, ensuring that it doesn't get styled by the img style in a...
position:relative means relative to itself not parents/children etc. It seems likely that you want relative on the parent and possibly absolute on the children. Without code, it's hard to help...
In fact you have a wrong selector (which is .mommy:hover ~ .baby), so the animation for the .baby in fact does not run. Only the animation of the parent .daddy...
Do not think this require any special skills. This is a very basic fluid layout. An example Markup <div id="wrapper"> <input type="text" id="firstrow_textbox" /> <input type="text" id="secondrow_textbox" /> <input type="button"...
If you genuinely understand html and css, these sorts of things literally fall together in about five minutes with notepad. They're boxes... ...After I said this, I had to see...
I can only think of this a { text-indent: -9999px; display: inline-block; /* feels better - depends on your requirement*/ } a:before { content: "before"; text-indent: 0; display: inline-block; position:...
It looks like the problem is in the @keyframes configuration. I guess, the animation finishes off from 0% to 50% and nothing happens at the half of the time. So,...
Try changing following Class within the CSS: #downloads { clear: both; text-align: center; display: block; width: auto; margin-top: 70px; } ...
Here is a simple workaround. Give the linked element a suitable large top padding, and cancel it out with an equal negative margin: h1 { margin-top: -80px; padding-top: 80px; }...
According to this site css is not able to be rendered in android email bodies http://www.campaignmonitor.com/css/...
First of all put your ul(submenu) in li <li><a href="#">Session</a> <ul> <li><a href="#">Bangalore</a></li> </ul> </li> and than add below css ul#menu li ul{ display:none; } ul#menu li:hover ul{ display:block; }...
No. But there is the other way around. Did you ever used editor in github.com? It's cool. It uses javascript and <div> to control the style of each line of...
You cant use all types of fonts. User need to have font in his machine or you have to use thirdparty font library like Google web fonts. For the available...
What I like to do in similar cases (for example html emails) is to pre-define column widths using empty cells this way: .tbl { display: table; width: 200px; border: 1px...
Your code is perfect. The only issue that was found/caught by the jsfiddle was the broken img tag. Tip! If you can't get the image to load, then you can...
I changed your code in order to do what you wanted. http://jsfiddle.net/a2v5J/28/ HTML <button id="showmenu" type="button">Hide menu</button> <div id="sidemenu" class="sidemenu"> <!-- This is the container that resize--> <div id="innermenu" class="innermenu">...
Use: <head> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/Resources/css/style1.css" /> </head> ...
This will work with every browser including IE6 div { -khtml-opacity:.50; -moz-opacity:.50; -ms-filter:"alpha(opacity=50)"; filter:alpha(opacity=50); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5); opacity:.50; } see working example at http://jsfiddle.net/vnj4s/3/...