CSS
#nav > li {
list-style:none;
letter-spacing:3px;
}
<ul id="nav">
<li>Home</li>
<li>About US</li>
<li>Services
<ul>
<li>Web Development</li>
<li>Mobile Development</li>
<li>Consultancy</li>
</ul>
</li>
</ul>
I am using child selector to make the list style none, which only unstyles children list items. But, letter-spacing property is adding spacing to the grandchildren list items. It is confusing me.
The default behaviour of letter-spacing, text-* and font-* are to inherit from the parent. So you have reset on your children:
#nav > li {
list-style: none;
letter-spacing: 3px;
}
#nav > li li {
letter-spacing: normal;
}
<ul id="nav">
<li>Home</li>
<li>About US</li>
<li>Services
<ul>
<li>Web Development</li>
<li>Mobile Development</li>
<li>Consultancy</li>
</ul>
</li>
</ul>
#nav > li {
list-style:none;
letter-spacing:3px;
ul{
list-style:none;
letter-spacing:0;
}
}
or
#nav > li {
list-style:none;
letter-spacing:3px;
ul{
li{
list-style:none;
letter-spacing:0;
}
}
}
Related
Switching out the list-style-type doesn't seem to do anything for a ul li ul li. Not sure if it's possible.
https://jsfiddle.net/swfkmo9t/
<ul>
<li>
<ul>
<li>this is a test</li>
</ul>
</li>
</ul>
ul li ul li::marker{
list-style-type: square;
}
::marker is a pseudo with a limited set of properties, not an element with list-style property. Use simply ul li ul li {
Read more on: ::marker - Allowable Properties
ul li ul li {
list-style: square;
}
ul li ul li::marker {
color: red;
}
<ul>
<li>
<ul>
<li>this is a test</li>
</ul>
</li>
</ul>
The problem in your css is don't give list-style-type property to ::marker. Give the list-style-type property to the li tag.
ul li ul li{
list-style-type: square;
}
<ul>
<li>
<ul>
<li>this is a test</li>
</ul>
</li>
</ul>
I am having trouble targeting the <li> of a <ul> that is a child of another <li> using a CSS child combinator selector - >.
I am needing to add a list_style_type:SomethingElse to only those list items and list-style-type: none; for all others.
I am already using the following to remove the list style:
.snap-drawer ul {
padding: 0;
margin: 0;
list-style-type: none;
}
And the following does'nt chang anything:
.snap-drawer ul > li {
list-style-type: disc !important;
}
The HTML:
<div class="snap-drawer">
<ul>
<li class="li-item">...</li>
<li class="li-item">...</li>
<li class="li-item">
<ul>
<li class="li-item">...</li> <==== Target all these only
<li class="li-item">...</li> <==== Target all these only
</ul>
</li>
</ul>
</div>
Option1
You are removing the padding then the bullet isn't visible.
Also target the ul inside li item. Try:
.snap-drawer ul > li > ul {
padding-left:25px;
list-style-type: disc !important;
}
.snap-drawer ul {
padding: 0;
margin: 0;
list-style-type: none;
}
.snap-drawer ul > li > ul {
padding-left: 25px;
list-style-type: disc !important;
}
<div class="snap-drawer">
<ul>
<li class="li-item">...</li>
<li class="li-item">...</li>
<li class="li-item">
<ul>
<li class="li-item">...</li> <==== Target all these only
<li class="li-item">...</li> <==== Target all these only
</ul>
</li>
</ul>
</div>
Option2
You can try the > selector just for the first ul too:
.snap-drawer > ul {
padding: 0;
margin: 0;
list-style-type: none;
}
.snap-drawer > ul {
padding: 0;
margin: 0;
list-style-type: none;
}
<div class="snap-drawer">
<ul>
<li class="li-item">...</li>
<li class="li-item">...</li>
<li class="li-item">
<ul>
<li class="li-item">...</li> <==== Target all these only
<li class="li-item">...</li> <==== Target all these only
</ul>
</li>
</ul>
</div>
What you need is this:
.snap-drawer ul ul > li {
list-style-type: disc !important;
}
Or more simply:
.snap-drawer ul ul li {
list-style-type: disc;
}
I have created a vertical navigational menu in css with two sub-menus.
But I can't figure out how to position them in one column so that they work properly.
Is this possible?
html
<ul>
<li>works
<ul>
<li>something</li>
<li>something</li>
<li>something</li>
<ul>
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
<li>Category 4</li>
<li>Category 5</li>
</ul>
<li>something</li>
<li>something</li>
</ul>
</li>
<li>photos
<ul>
<li>something</li>
<li>something</li>
</ul>
</li>
<li>friends</li>
<li>contact</li>
</ul>
</div></html>
css
#menu {
font-size: 14px;
font-family: "Courier New", Courier, monospace;
}
#menu ul {
margin: 0px;
list-style-type: none;
}
#menu ul li {
position: relative;
}
#menu ul li a {
line-height: normal;
color: #000;
text-decoration: none;
}
#menu ul li ul {
display: none;
position: absolute;
top: 0px;
left: 180px;
float: left;
z-index: 99999;
width: 180px;
}
#menu ul li ul li {
min-width: 180px;
}
#menu ul li ul ul {
float: left;
top: 0px;
}
#menu ul li:hover > ul { display:block;
}
First of all your html structure is messy. the clean structure could be something like this:
<div id="menu">
<ul>
<li>
works
<li>
works subcategory
<ul>
<li>something</li>
<li>something</li>
<li>something</li>
</ul>
</li>
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
<li>Category 4</li>
<li>Category 5</li>
</li>
<li>something</li>
<li>something</li>
<li>
photos
<ul>
<li>something</li>
<li>something</li>
</ul>
</li>
<li>friends</li>
<li>contact</li>
</ul>
</div>
You had mistakes in closing tags,..
And i suggest you to use css resets while making dropdown menus. because user-agent predefined styles get you in trouble (try Normalize.css)
In CSS: you don't need to float the 2nd-level ul blocks and also setting list items position property to relative and using top and left properties for children ul is not a good solution.
I styled your menu a little bit and it looks fine. you can view it here: http://codepen.io/anon/pen/sdomr
In my HTML doc I have a nested list with style:
li {
list-style-type:none;
border:1px solid;
margin:3px;
}
li li {
list-style:none;
}
<ul>
<li>something
<ul>
<li>hello</li>
<li>there</li>
</ul>
</li>
</ul>
With my current CSS rule borders looks like this:
I want them to look like this, but without inserting <span> tags:
Any ideas?
Maybe something like that:
li {
clear: both;
width: 200px;
list-style-type:none;
border:1px solid;
margin:3px;
}
li ul{
float: left;
}
<ul>
<li>something
<ul>
<li>hello</li>
<li>there</li>
</ul>
</li>
<li>something
<ul>
<li>hello</li>
<li>there</li>
</ul>
</li>
</ul>
The result:
Currently my css is as follows:
#topbar:hover ul{ display: inline;}
#topbar {
float: left;
margin-left: 20px;
margin-right: 20px;
font-family:"Georgia";
}
#topbar ul {
display: none;
top:30px;
position: absolute; border-style:solid; padding-left:10px; padding-right:10px;
border-width:1px; background-color:white;list-style-type: none;}
}
.clear {
clear: both;
The structure of my Ul and Li at the moment:
<div id="topbar">
Title
<ul>
<li>A</li>
<li>B</li>
</ul>
</div>
<div id="topbar">
Type
<ul>
<li>A</li>
<li>B</li>
</ul>
</div>
<div id="topbar">
Format
<ul>
<li>A</li>
<li>B</li>
</ul>
</div>
I would to have only 1 div tag therefore nested suits the way to perform such a task. The following is what I have come out with:
<div id="topbar">
<ul>
<li> Title
<ul>
<li>A</li>
<li>B</li>
</ul>
</li>
<li> Type
<ul>
<li>A</li>
<li>B</li>
</ul>
</li>
<li> Format
<ul>
<li>A</li>
<li>B</li>
</ul>
</li>
</ul>
</div>
Another reason for doing a nest in ul is because I needed to add #topbar{width:80%}. After organsing my ul and li, I am currently stuck at the css. Can anyone give me a hand for these nested css?
Try nesting your list items like this:
<ul id="topbar">
<li>Title
<ul>
<li>A</li>
<li>B</li>
</ul>
</li>
<li>Type
<ul>
<li>A</li>
<li>B</li>
</ul>
</li>
<li>Format
<ul>
<li>A</li>
<li>B</li>
</ul>
</li>
</ul>
And you can style these items specifically with the > selector
#topbar > li {
/* Title, Type, Format */
}
#topbar > li > ul {
/* sub menus */
}
Working Example: http://jsfiddle.net/hunter/SySqG/
Looks like you just need to add a few ul and li to the styles.
#topbar ul li {
float: left;
margin-left: 20px;
margin-right: 20px;
font-family:"Georgia"; }
#topbar ul li:hover ul{ display: inline;}
#topbar ul li ul{
display: none;
top:30px;
position: absolute; border-style:solid; padding-left:10px;
padding-right:10px;
border-width:1px; background-color:white;list-style-type: none;}
.clear {
clear: both; }
Example: http://jsfiddle.net/Xt4jR/1/