If I have an Ul that contains
<UL class="level2">
<li>
<a>Link1</a>
</li>
<li>
<a> Link2</a>
</li>
<li>
<a> Link 3</a>
</li>
<li class="hasChildren">
<a>Navigation</a>
<ul>
<li>Navigation 1 </li>
<li>Navigation 2</li>
<li>Navigation 3 </li>
<li>Navigation 4</li>
<li>Navigation 5</li>
</ul>
</li>
I need to display the li that don't have children in block and I need the li that haschildren to be displayed inline next to it not under it any idea
I need to have :
Link1 Navigation
Link2 Navigation1 Navigation4
Link3 Navigation2 Navigation5
Navigation3
Something like this?
CSS:
ul {
width: 600px;
position: relative;
margin: 0;
padding: 0;
}
li {
display: block;
width: 300px;
background: Red;
}
li.hasChildren {
position: absolute;
top: 0;
right: 0;
background: Green;
}
li.hasChildren ul {
width: auto;
margin: 0;
padding: 0;
}
li.hasChildren ul li {
background: Green;
}
HTML:
<ul>
<li>Item #1</li>
<li>Item #2</li>
<li class="hasChildren">
Item #3
<ul>
<li>Sub-item #1</li>
<li>Sub-item #2</li>
</ul>
</li>
<li>Item #4</li>
<li>Item #5</li>
</ul>
Related
CSS hover li tag inside the first ul select, Not select the first ul inside ul tag.
For example below the code.
ul li:hover ul {display: block;}
ul li ul {
position: absolute;
width: 200px;
display: none;
}
ul li ul li {
background: #555;
display: block;
}
<ul>
<li> ( hover this li)
Dropdown Link
<ul> ( Select this ul only )
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3
<ul> ( not select this ul )
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
</ul>
</li>
</ul>
Your Answer is :
<ul>
<li class="link1"> ( hover this li)
<a href="#" >Dropdown Link</a>
<ul class="first-ul"> ( Select this ul only )
<li>Link 1</li>
<li>Link 2</li>
<li class="link2"><a href="#" >Link 3</a>
<ul class="second-ul" > ( not select this ul )
<li>Link 1</li>
<li>Link 2</li>
<li><a href="#" >Link 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
CSS
.link1:hover .first-ul{display: block;}
.first-ul {
position: absolute;
width: 200px;
display: none;
}
.link2:hover .second-ul{display: block;}
.second-ul {
position: absolute;
width: 200px;
display: none;
}
.second-ul, .first-ul {
background: #555;
display: none;
}
.secondUL{display:none}
View Code in Codepen: Open
I have a list with up to four sub levels. Bullets are made with :before.
I have some trouble getting the 2nd line of text line up with the first one.
I have tried setting padding and text-indent like this:
ul {
padding-left: 1em;
text-indent: -1em;
}
- but it doesn't work. Setting list-style-position: outside doesn't seem to work either.
JSFIDDLE here
Any ideas?
Its better to use position: absolute instead of float to align bullets.
.menu {
width: 250px;
}
ul.nav>li>a {
position: relative;
}
/* First level */
ul.nav>li>a:before {
position: absolute;
font-family: 'Glyphicons Halflings';
font-size: 7px;
color: #901a1e;
content: "\e080";
border: 1px solid #d7d7d7;
left: 0;
top: 13px;
}
/* Sub levels */
ul.nav>li ul li>a {
display: inline-block;
vertical-align: top;
padding-left: 10px;
position: relative;
}
ul.nav>li ul li>a:before {
position: absolute;
font-size: 9px;
color: #901a1e;
content: "\25A0";
left: 0;
top: 3px;
}
ul li {
list-style-type: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<div class="menu">
<ul class="nav">
<li>Home</li>
<li>Sub menu here
<ul>
<li>Link 2.1 - one more very, very, very, long text</li>
<li class="active">Link 2.2 - active</li>
<li>Link 2.3</li>
</ul>
</li>
<li>Separated link
</li>
<li>Separated link
<ul>
<li>Link 2.1
<ul>
<li>Link 3.1</li>
<li>Link 3.2</li>
<li>Link 3.3
<ul>
<li>Link 4.1 - one more very, very, very, long text</li>
<li>Link 4.2</li>
<li>Link 4.3</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>One more very, very, very, long separated link</li>
<li>One more separated link</li>
</ul>
</div>
use the same line-height on :before as on the a element
see snippet :
.menu {
width: 250px;
}
/* First level */
ul.nav>li>a:before {
float: left;
margin: 3px 6px 4px 0;
font-family: 'Glyphicons Halflings';
font-size: 7px;
color: #901a1e;
content: "\e080";
border: 1px solid #d7d7d7;
}
/* Sub levels */
ul.nav>li ul li>a:before {
float: left;
margin-right: 6px;
font-size: 9px;
color: #901a1e;
content: "\25A0";
line-height:16px;
}
ul li {
list-style-type: none;
}
ul li a {
line-height:16px;
}
<div class="menu">
<ul class="nav">
<li>Home</li>
<li>Sub menu here
<ul>
<li>Link 2.1 - one more very, very, very, long text</li>
<li class="active">Link 2.2 - active</li>
<li>Link 2.3</li>
</ul>
</li>
<li>Separated link
</li>
<li>Separated link
<ul>
<li>Link 2.1
<ul>
<li>Link 3.1</li>
<li>Link 3.2</li>
<li>Link 3.3
<ul>
<li>Link 4.1 - one more very, very, very, long text</li>
<li>Link 4.2</li>
<li>Link 4.3</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>One more very, very, very, long separated link</li>
<li>One more separated link</li>
</ul>
</div>
Below code should work:
.menu {
width: 250px;
}
ul{
list-style:none;
}
/* Setting the position of <a> and a:before*/
ul.nav li a{
position:relative; /* Setting this to relative so that we position a:before absolute to <a> */
padding-left:10px; /* We are moving the text to right by 10px */
display:block;
}
ul.nav li a:before{
position:absolute; /* This is the main css rule which gets our desired result */
left:-5px; /* setting the left position */
top:4px; /* setting the top position */
}
/* Setting Styles of <li> */
ul.nav>li>a:before {
font-family: 'Glyphicons Halflings';
font-size: 7px;
color: #901a1e;
content: "\e080";
border: 1px solid #d7d7d7;
}
ul.nav>li ul li>a:before {
font-size: 9px;
color: #901a1e;
content: "\25A0";
}
<div class="menu">
<ul class="nav">
<li>Home</li>
<li>Sub menu here
<ul>
<li>Link 2.1 - one more very, very, very, long text</li>
<li class="active">Link 2.2 - active</li>
<li>Link 2.3</li>
</ul>
</li>
<li>Separated link
</li>
<li>Separated link
<ul>
<li>Link 2.1
<ul>
<li>Link 3.1</li>
<li>Link 3.2</li>
<li>Link 3.3
<ul>
<li>Link 4.1 - one more very, very, very, long text</li>
<li>Link 4.2</li>
<li>Link 4.3</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>One more very, very, very, long separated link</li>
<li>One more separated link</li>
</ul>
</div>
I have an unsorted list which I want do display in a tile-like style using CSS.
This is my list:
<ul>
<li>Area 1</li>
<ul>
<li>Topic 1</li>
<li>Topic 2</li>
<li>Topic 3</li>
<li>Topic 4</li>
</ul>
<li>Area 2</li>
<ul>
<li>Topic 5</li>
<li>Topic 6</li>
</ul>
</ul>
This is the needed Output:
Unfortunately I cannot post images here (due to my low reputation).
+---------------------------+
| Area 1 |
+---------------------------+
+-------+ +-------+ +-------+
|Topic 1| |Topic 2| |Topic 3|
+-------+ +-------+ +-------+
+-------+
|Topic 4|
+-------+
+---------------------------+
| Area 2 |
+---------------------------+
+-------+ +-------+
|Topic 5| |Topic 6|
+-------+ +-------+
In a first step it would be enough if the list is only these 2 steps deep.
I checked several approaches using CSS, but failed.
Can someone help me please with the solution or an approach?
Best regards,
Stefan
- LIVE DEMO
- RESPONSIVE
Corrected HTML:
<ul>
<li><span>Area 1</span>
<ul>
<li>Topic 1</li>
<li>Topic 2</li>
<li>Topic 3</li>
<li>Topic 4</li>
</ul>
</li>
<li><span>Area 2</span>
<ul>
<li>Topic 5</li>
<li>Topic 6</li>
</ul>
</li>
</ul>
CSS:
ul{
width:300px;
list-style:none;
padding:0;
text-align:center;
overflow:auto;
}
ul > li{
margin-bottom:15px;
}
li span{
display:block;
clear:both;
background:#5A9BD5;
padding:15px 0;
}
ul ul li{
float:left;
width:90px;
margin:15px 15px 0 0;
}
ul ul li:nth-child(3){
margin-right:0;
}
ul li a{
background:#5A9BD5;
display:block;
width:100%;
padding:15px 0;
}
There's a few approaches you could take. One is to use floats, like so:
ul li {
clear: left;
}
ul li ul li {
clear: none;
float: left;
width: 33.33%;
}
Another is display: inline-block. But note you'd need to remove any whitespace and line breaks from between the list items (in the HTML):
ul li li {
display: inline-block;
width: 33.33%;
}
Note IE7 doesn't do inline-block. To make it work there (if necessary) add this:
.ie7 ul li li {
display: inline;
zoom: 1;
}
(I use conditional commments to add the .ie7 class to the HTML element)
First thing. You cannot have a <ul> directly under a parent <ul>.
<ul>
<li>Area 1</li>
<!-- this is wrong -->
<ul>
<li>Topic 1</li>
<li>Topic 2</li>
<li>Topic 3</li>
<li>Topic 4</li>
</ul>
<li>Area 2</li>
<!-- this is wrong -->
<ul>
<li>Topic 5</li>
<li>Topic 6</li>
</ul>
</ul>
So you can change the markup this way:
<ul>
<li>Area 1</li>
<li class="tiles">
<ul>
<li>Topic 1</li>
<li>Topic 2</li>
<li>Topic 3</li>
<li>Topic 4</li>
</ul>
</li>
<li>Area 2</li>
<li class="tiles">
<ul>
<li>Topic 5</li>
<li>Topic 6</li>
</ul>
</li>
</ul>
Now the CSS:
ul, li {display: block; list-style: none; margin: 0; padding: 0;}
ul {background: #fff;}
li {line-height: 50px; width: 100%; text-align: center; background: #66f; margin: 5px;}
li.tiles ul li {width: 33%; float: left; margin: 5px 0; background: none;}
li.tiles ul {overflow: hidden;}
li.tiles {text-align: left; margin: 0;}
a {color: #fff; text-decoration: none; display: block; background: #66f; margin: 5px;}
Fiddle: http://jsfiddle.net/praveenscience/LjCHW/1/
Without the use of class attribute.
HTML
<ul>
<li>Area 1</li>
<li>
<ul>
<li>Topic 1</li>
<li>Topic 2</li>
<li>Topic 3</li>
<li>Topic 4</li>
</ul>
</li>
<li>Area 2</li>
<li>
<ul>
<li>Topic 5</li>
<li>Topic 6</li>
</ul>
</li>
</ul>
CSS
ul, li {display: block; list-style: none; margin: 0; padding: 0;}
ul {background: #fff;}
li {line-height: 50px; width: 100%; text-align: center; background: #66f; margin: 5px;}
li ul li {width: 33%; float: left; margin: 5px 0; background: none;}
li ul {overflow: hidden;}
a {color: #fff; text-decoration: none; display: block; background: #66f; margin: 5px;}
Fiddle: http://jsfiddle.net/praveenscience/LjCHW/2/
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 this JSFiddle, the last .tab class doesn't get the correct border-radius effect (top right rounded corner).
I think I have my logic correct in saying :last-child selects the last .tab of .tabbed in this case.
What am I doing wrong?
CSS:
body {
background: black;
color: white;
padding: 5px; }
.tabbed {
height: 550px;
}
.tabbed .tab {
padding: 6px 14px;
background: rgba(255,255,255,0.25);
border: 1px solid rgba(255,255,255,0.4);
border-radius: 0px;
border-left-width: 0;
float: left;
}
.tabbed .tab:first-child {
border-radius: 3px 0 0 0;
border-left-width: 1px;
}
.tabbed .tab:last-child {
border-radius: 0 3px 0 0;
}
HTML:
<ul class='tabbed'>
<li class='tab'>Menu 1</li>
<li class='tab'>Menu 2</li>
<li class='tab'>Menu 3</li>
<li class='tab'>Menu 4</li>
<li class='tab'>Menu 5</li>
<li> <br/><br/> </li>
<li class='dummy'>Content 1</li>
<li class='dummy'>Content 2</li>
<li class='dummy'>Content 3</li>
<li class='dummy'>Content 4</li>
<li class='dummy'>Content 5</li>
</ul>
According to this documentation:
The :first-child pseudo class means "if this element is the first
child of its parent". :last-child means "if this element is the last
child of its parent". Note that only element nodes (HTML tags) count,
these pseudo-classes ignore text nodes.
See also W3C doc
It is not applied in your case because the last .tab is not the last child of the parent ul.
If you create two lists, then the css is applied as expected.
In a comment, you state: "It needs to be on the same ul parent. Or another ul, below the last li on the first ul." If that is so, then do this:
<ul class='tabbed'>
<li class='tab'>Menu 1</li>
<li class='tab'>Menu 2</li>
<li class='tab'>Menu 3</li>
<li class='tab'>Menu 4</li>
<li class='tab'>Menu 5</li>
<li>
<ul>
<li class='dummy'>Content 1</li>
<li class='dummy'>Content 2</li>
<li class='dummy'>Content 3</li>
<li class='dummy'>Content 4</li>
<li class='dummy'>Content 5</li>
</ul>
</li>
</ul>
Then this css (with modern browsers):
.tabbed {
height: 550px; }
.tabbed .tab {
padding: 6px 14px;
background: rgba(255,255,255,0.25);
border: 1px solid rgba(255,255,255,0.4);
border-radius: 0px;
border-left-width: 0;
float: left; }
.tabbed .tab:first-child {
border-radius: 3px 0 0 0;
border-left-width: 1px; }
.tabbed .tab:nth-last-child(2) {
border-radius: 0 3px 0 0; }
.tabbed li:last-child {
clear: left;
}
See this fiddle.
To expand on Didier G.'s answer, what you should really be using here is the :first-of-type & :last-of-type pseudo selectors. However, the :nth-of-type selector (and its similar shorthand versions) does not appear to support using a classname for searching, only selecting, e.g. the following will select the first child of .tabbed, if and only if it has the class .tab:
.tabbed .tab:first-of-type
whereas this will select the first child of .tabbed that is of type li:
.tabbed li:first-of-type
I cannot find any reference explicitly stating this behavior, but it is vaguely implied in the specification:
The :nth-of-type(an+b) pseudo-class notation represents an element that has an+b-1 siblings with the same expanded element name
Where an expanded element name is the tag name, and cannot be a class or ID selector.
You can see this behavior live on JSFiddle.
Here's how i would do it:
body {
background: black;
color: white;
padding: 5px; }
.content {clear:both;}
.tall {
height: 550px;
}
.tabbed .tab {
padding: 6px 14px;
background: rgba(255,255,255,0.25);
border: 1px solid rgba(255,255,255,0.4);
float: left; }
.tabbed .tab:first-child {
border-radius: 3px 0 0 0;
border-left-width: 1px; }
.tabbed .tab:last-child {
border-radius: 0 3px 0 0; }
And because i think it seems inappropriate to include the content within a class called tabbed, change the HTML to be structured as:
<div class="tall">
<ul class='tabbed'>
<li class='tab'>Menu 1</li>
<li class='tab'>Menu 2</li>
<li class='tab'>Menu 3</li>
<li class='tab'>Menu 4</li>
<li class='tab'>Menu 5</li>
</ul>
<ul class="content">
<li class='dummy'>Content 1</li>
<li class='dummy'>Content 2</li>
<li class='dummy'>Content 3</li>
<li class='dummy'>Content 4</li>
<li class='dummy'>Content 5</li>
</ul>
</div>
<hr/><!-- just here to show you the height remains -->