Here are three shots of the same code illustrating what I mean. As you can see, they really vary.
And the code, for reference, is:
<ul>
<li>num 1</li>
<ul>
<li>num 1.1</li>
<li>num 1.2</li>
<ul>
<li>3rd level</li>
</ul>
</ul>
<li>num 2</li>
</ul>
I suppose this could be due to a variety of things, but it doesn't hurt to ask.
1:
It seems to me your html is wrong, you cannot have an ul inside an ul. The correct syntax is:
<ul>
<li>num 1
<ul>
<li>num 1.1</li>
<li>num 1.2
<ul>
<li>3rd level</li>
</ul>
</li>
</ul>
</li>
<li>num 2</li>
</ul>
Notice that all the closing li's have moved to the end of that list item (including it's sub-items).
Using a css reset it should display the same way in all browsers (more or less...).
vertical space is generally controlled through CSS with line-height. For example,
li { line-height: 40px; }
You may find this article useful, which lists some of the common CSS attributes used to style lists
EDIT:
In response to your edited question, you can control horiztonal spacing using margin-left. for example
<ul>
<li>num 1
<ul>
<li>num 1.1</li>
<li>num 1.2
<ul>
<li>3rd level</li>
</ul>
</li>
</ul>
</li>
<li>num 2</li>
</ul>
with CSS
li ul li { margin-left:100px; }
will space lists of depth 1 or more 100px to the right. Here's how that looks
I generally turn off an margin padding and line-height for li, ul, ol in CSS. I'm almost certain most browsers use margins to set this, but to be sure I set them all to 0.
ul, ol, li {
padding: 0;
margin: 0;
line-height: 0;
}
Depends on how you want to add the spacing.
You can use either top/bottom margin or padding. In your case I would choose margin:
li {
margin: 5px 10px 5px 1em;
}
Also make sure you use a reset class to normalise the differences between browsers.
Related
The question pretty much explains it but I have list items I want to put a simple diamond icon before them but when I try to use ::before it ends up putting the image above instead of the same line and I can't really seem to find out how to put it right before the list icon on the same line.
Like I said the image is just a small diamond, its 5px by 5px
.list-menu::before {
content: url('../images/menu-icons/image-before.png');
}
<div class="sb-slidebar sb-left sb-style-push">
<nav>
<ul>
<li class="list-menu">Home</li>
</ul>
</nav>
</div>
There's no need to use the ::before pseudo-element here at all. You can just use a background image:
.list-menu {
background-image: url('http://placehold.it/16x16');
background-position: left center;
background-repeat: no-repeat;
padding-left: 20px; /* Adjust according to image size to push text across. */
}
<div class="sb-slidebar sb-left sb-style-push">
<nav>
<ul>
<li class="list-menu">Home</li>
</ul>
</nav>
</div>
Well, list-style-image is made for that.
Supported since IE 4.0. That should be enough I guess.
ul {
list-style-image: url('http://placehold.it/12x12');
}
<ul>
<li> Text content </li>
<li> Text content </li>
<li> Text content </li>
</ul>
Answer 2022
Nowadays you can use ::marker pseudo element
li::marker {
content: ' 🤖 '
}
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
I have a menu like so:
<ul class="ipro_menu">
<li>Home</li>
<li class="active-parent">Menu Item 1
<ul class="sub-menu">
<li>Subitem 1</li>
<li class="active">Subitem 2</li>
</ul>
</li>
<li>Menu Item 2</li>
</ul>
The current page automatically gets the class active and if it is in a ul under the main ul (submenu), then the main ul element will get the class active-parent.
So, in the above example, we would be viewing the "Subitem 2" page, so "Menu Item 1" is given the class active-parent.
I am trying to change the font color of the active-parent ONLY- not all the submenu elements. Here's what I have:
ul.ipro_menu li.active-parent a {
color: #FF0000;
}
The problem is that this is changing not only the active-parent element, but all of the li's in the sub-menu as well.
How do I change this to only change the font color of the specific element marked active-parent?
That behavior is expected with CSS. The only way to override that style for children would be to use a separate (and more specific) style for those elements:
ul.ipro_menu li.active-parent ul.sub-menu li a {
color:#000;
}
Try putting the active-parent class on the HREF:
http://jsfiddle.net/RAkuc/
<ul class="ipro_menu">
<li>Home</li>
<li><a class="active-parent" href="/menu-item-1/">Menu Item 1</a>
<ul class="sub-menu">
<li>Subitem 1</li>
<li class="active">Subitem 2</li>
</ul>
</li>
<li>Menu Item 2</li>
</ul> ​
ul.ipro_menu a.active-parent {
color: #FF0000;
}​
Use the direct children selector:
ul.ipro_menu li.active-parent > a {
color: #FF0000;
}
this will only affect direct descendants of your li element.
I am trying to get my first menu to work. I got the basics off of CSS Menu without javascript . I am trying to make it as simple as possible. I got to look close to what I want it to look (Not exactly what I REALLY want it to look like):
http://jsfiddle.net/EjXgU/2/
The main problem is submenus. They stack one below the other instead to the right of the parent menu. Also, the first level of submenus do not stack right below the line on the main menu, but within it.
Another problem I was able to notice, I want to add an rgba background-color (transparency). However, for every submenu level, the transparency changes.
I also accept any css3 tips to make it look "flashy" and fancy =)
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title: css-menu-without-javascript</title>
</head>
<body>
<nav>
<ul id="menu">
<li>Home</li>
<li>With sub-menus -->
<ul class="submenu">
<li>Submenu 1</li>
<li>Submenu 2 -->
<ul class="submenu">
<li>Sub-submenu 1</li>
<li>Sub-submenu 2</li>
</ul>
</li>
</ul>
</li>
<li>Menu item 3</li>
<li>With sub-menus -->
<ul class="submenu">
<li>Submenu 3</li>
<li>Submenu 4 -->
<ul class="submenu">
<li>Sub-submenu 3</li>
<li>Sub-submenu 4 -->
<ul class="submenu">
<li>Sub-sub-submenu 1</li>
<li>Sub-sub-submenu 2</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>Menu item 3</li>
</ul>
</nav>
</body>
</html>
CSS:
/*https://stackoverflow.com/questions/4873604/css-menu-without-javascript*/
#menu li>ul { display: none; }
#menu li:hover>ul { display: block; }
/*End of Nathan MacInnes' code*/
nav { position: relative; }
#menu> li { float: left; padding:10px; border: 1px ridge #cccccc;}
#menu a {
text-decoration:none;
font-size: 20px;
color:#191919;
padding:10px;
}
.submenu { background-color: rgba( 0,0,0,0.5 ); }
If you're wanting CSS-only drop-down menus, then check out Son of Suckerfish. It's pretty much the de facto way of achieving such.
There is a bit on using JavaScript to get around earlier version of Internet Explorer's lack of support for pseudo elements, but I think this is IE7 and below, so can probably be dropped, depending on what level of support you're wanting to have for older browsers such as IE < 7. Other browsers (Firefox, Chrome, Safari, Opera etc) will display the menu and function just fine with the CSS only.
You could try
.submenu { background-color: rgba( 0,0,0,0.25 );
margin-left: 25px;}
The transparency value is additive — a submenu within a submenu gets that added twice, so a second submenu will be less transparent. Starting with a lower value allows that to be useful.
Adding the margin displaces the text to the right, and I rather like the way each submenu "embraces" its own children.
http://jsfiddle.net/EjXgU/3/
I'm puzzled by this. In a nested list, by setting the height of LI elements the list, the items overlap. What is the explanation for this, and what is the proper way apply height without overlap effect? (I want height, not padding or margins.)
.aaa {background:#ccf;}
.bbb {background:#fcc;}
.bbb li {height:25px;}
<ul class="aaa">
<li>one one one</li>
<li>two, too
<ul>
<li>alpha</li>
<li>beta</li>
<li>gamma</li>
</ul>
</li>
<li>three</li>
<li>here comes four</li>
</ul>
<ul class="bbb">
<li>one one one</li>
<li>two, too
<ul>
<li>alpha</li>
<li>beta</li>
<li>gamma</li>
</ul>
</li>
<li>three</li>
<li>here comes four</li>
</ul>
<li>two, too
<ul> <-- this list is part of your LI
<li>alpha</li>
<li>beta</li>
<li>gamma</li>
</ul>
</li>
Since you have a list nested in a list, the inner list overflows because it is bigger than 25px.
Use min-height instead of height.
The second tier li is inheriting the CSS from the top tier li
You need come CSS like
ul li ul li {/*style to hit the bottom tier*/}
This looks like you are making a menu - Tuts like this (http://www.devinrolsen.com/pure-css-vertical-menu/) could advise you for better code but Padding and margin are recognised techniques to achieve what you apparently want
To make lists horizontal and hide default bullets, is it necessary to give {display:inline} and {float:left} both to the <li> tags or anyone of these alone is enough?
<ul>
<li>First item</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>Last item</li>
</ul>
How to make cross browser (including IE6 and FF2) , pixel perfect horizontal list without bullet in best way?
What is best and short method?
ul {}
li {}
a {}
No, either one alone is enough. You could even use inline-block if you like, although it doesn't have very good support in FF2. Hiding bullets is done with list-style:none;
You could setup a simple test quickly to check these:
#one, #two, #three { list-style:none }
#one li { float:left }
#two li { display:inline }
#three li { display:inline-block }
<ul id="one">
<li>Float left</li>
<li>In this example</li>
</ul>
<div style="clear:both"></div>
<ul id="two">
<li>Display inline</li>
<li>In this example</li>
</ul>
<div style="clear:both"></div>
<ul id="three">
<li>Inline-block</li>
<li>In this example</li>
</ul>
See how they render: http://jsbin.com/opiqu3/
display:inline is not necessary but float:left is necessary to make it horizontal and like you said about hiding default bullets, then even list-style:none is also necessary.