How do I access the style <li> elements so I can set their property to - list-style: none;?
<div class="dataTables_paginate paging_bootstrap pagination">
<ul>
<li class="prev disabled">? Previous</li>
<li class="active">1</li>
<li>2</li>
<li class="next">Next ? </li>
</ul>
</div>
.dataTables_paginate ul {
list-style: none;
margin: 0;
padding: 0;
}
.dataTables_paginate li {
display: inline-block;
}
<div class="dataTables_paginate paging_bootstrap pagination">
<ul>
<li class="prev disabled">? Previous</li>
<li class="active">1</li>
<li>2</li>
<li class="next">Next ? </li>
</ul>
</div>
You should use the ul selector to remove the list styling.
ul {
list-style-type: none;
}
To change just one set of ulgive the give your ul a class or ID.
Related
I am trying to create a slanted/diagonal list, but want to avoid having several nested uls, is there a way to do this, here is the code I have so far:
<ul className={style.steps}>
<li>
<p className={style.step}>Lorem</p>
<ul className={style.steps}>
<li>
<p className={style.step}>Ipsum</p>
<ul className={style.steps}>
<li>
<p className={style.step}>dolor</p>
<ul className={style.steps}>
<li>
<p className={style.step}>sit</p>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
If you can update how the code outputs, you don't need nth-selectors, especially if the list is dynamic and changes length, you can use CSS vars.
You can set a default value using :root, then you can add the custom property value on each li element --index: number. You can change the CSS var on the element to whatever you need.
:root {
--margin-value: 10px;
}
ul,
li {
margin: 0;
padding: 0;
}
li {
margin-left: calc(var(--index) * var(--margin-value));
}
<ul>
<li style="--index: 1">One</li>
<li style="--index: 2">Two</li>
<li style="--index: 3">Three</li>
<li style="--index: 4">Four</li>
<li style="--index: 5">Five</li>
</ul>
The :nth-child selector would allow you to set different spacing rules on different <li>s within a single list.
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
ul {
list-style: none;
}
ul li:nth-child(1) {
margin-left: 0;
}
ul li:nth-child(2) {
margin-left: 30px;
}
ul li:nth-child(3) {
margin-left: 60px;
}
ul li:nth-child(4) {
margin-left: 90px;
}
<ul>
<li>Lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
</ul>
You did not use the javascript tag, but it could be handy here , so not really an answer but another approach.
Demo below:
var elMargin = 0;
for (let e of document.getElementsByClassName('indent')) {
elMargin = elMargin + 1;
e.style.marginLeft = elMargin + 'em';
}
ul {counter-reset:lis}
li:before{counter-increment:lis;content:counter(lis);
<ul>
<li class="indent"></li>
<li class="indent"></li>
<li class="indent"></li>
<li class="indent"></li>
<li class="indent"></li>
<li class="indent"></li>
<li class="indent"></li>
</ul>
I'm trying to get a drop down menu for my navbar so that when I hover over the tabs it opens a drop down menu with more options. Here is a fiddle of my code. The very final product should look like this, for now I just want to fix the drop down on hover part of it.
Here is a snippet of code im using in css to try and achieve this:
.dropdown {
display: none
}
.navbar-list li:hover .dropdown {
display: relative;
color: white;
text-decoration: none;
}
You are trying wrong approach, please change your css part
.navbar-list li:hover .dropdown {
display: block;
color: white;
text-decoration: none;
}
<ul class="navbar-list">
<li class="navbar-tags">OUR DNA
<ul class="dropdown">
<li>Risk</li>
</ul>
</li>
update code
Your HTML structure is wrong, and you need to use display: block on hover, not display: relative
But re: the HTML, a ul can't be a direct child of a ul. You need to nest the dropdowns in an li. That is not only correct markup, but it allows the hover to persist when you hover over an li that has nested menus. Otherwise, you would need to use li:hover + .dropdown to show the next .dropdown menu, but your :hover will stop once your mouse moves off of the li.
Also, each ul.dropdown that is in a single nested nav element could probably just be li's of a single ul, but what you have isn't incorrect, so I didn't change that.
.dropdown {
display: none
}
.navbar-tags:hover > .dropdown {
display: block;
color: white;
text-decoration: none;
}
.navbar-list a {
color: black;
text-decoration: none;
}
.navbar-tags {
margin: 20px;
}
.navbar-tags, .dropdown {
padding: 0;
list-style-type: none;
}
<ul class="navbar-list">
<li class="navbar-tags">
OUR DNA
<ul class="dropdown">
<li>Risk</li>
</ul>
</li>
<li class="navbar-tags">PROGRAMS
<ul class="dropdown">
<li>Adventure Sport</li>
</ul>
<ul class="dropdown">
<li>Entertainment</li>
</ul>
<ul class="dropdown">
<li>Collegiate</li>
</ul>
<ul class="dropdown">
<li>Individual</li>
</ul>
<ul class="dropdown">
<li>Commercial</li>
</ul>
</li>
<li class="navbar-tags">RESEARCH
<ul class="dropdown">
<li>Corporate Survey</li>
</ul>
<ul class="dropdown">
<li>Individual Survey</li>
</ul>
</li>
<li class="navbar-tags">STORIES</li>
</ul>
1 ) Your HTML structure is wrong.
2) use display: block instead of display: relative.
Change your Code Like THis :
.dropdown {
display: none
}
.navbar-list li:hover > .dropdown {
display: block;
color: white;
text-decoration: none;
}
.navbar-list a {
color: black;
text-decoration: none;
}
.navbar-tags {
padding: 0;
list-style-type: none;
margin: 20px;
}
<ul class="navbar-list">
<li class="navbar-tags">OUR DNA
<ul class="dropdown">
<li>Risk</li>
</ul>
</li>
<li class="navbar-tags">PROGRAMS
<ul class="dropdown">
<li>Professional</li>
</ul>
<ul class="dropdown">
<li>Adventure Sport</li>
</ul>
<ul class="dropdown">
<li>Entertainment</li>
</ul>
<ul class="dropdown">
<li>Collegiate</li>
</ul>
<ul class="dropdown">
<li>Individual</li>
</ul>
<ul class="dropdown">
<li>Commercial</li>
</ul>
</li>
<li class="navbar-tags">RESEARCH
<ul class="dropdown">
<li>Corporate Survey</li>
</ul>
<ul class="dropdown">
<li>Individual Survey</li>
</ul>
</li>
<li class="navbar-tags">STORIES</li>
</ul>
I have problem with the menu in my project in particular with the show him. I want when I hover the Tips for health, Recipes and inside of the last one the sub-menu of Salads, Fresh and Smoothies to show.
This is the HTML code:
`
<div id="nav">
<ul class="nav-list">
<li>Home</li>
<li>Tips for health</li>
<li>
<ul class="sub-nav-list">
<li>The healing properties</li>
<li>5 important spices that you should include in your diet</li>
<li>Bad habits and their removal</li>
<li>Water as a source of life</li>
</ul>
</li>
<li>Recipes</li>
<li>
<ul class="sub-nav-list">
<li><a href="#"Salads</a></li>
<li>Lettuce</li>
<li>French salad</li>
<li><a href="salata%20cherveno%20cveklo.html"Red Beet Salad</a></li>
</ul>
</li>
<li>
<ul class="sub-nav-list">
<li>Fresh</li>
<li>Sweet fresh</li>
<li>Fresh detox</li>
<li>Citrus fresh</li>
</ul>
</li>
<li>
<ul class="sub-nav-list">
<li>Smoothies</li>
<li>Смути шоколад</li>
<li>Chocolate smoothie</li>
<li>Smoothie with banana and pineapple</li>
</ul>
</li>
<li>Contacts</li>
</ul>
</div>
And this is the CSS code:
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #F6F2E8;
}
li a {
display: block;
color: #A6BB79;
padding: 8px 0 8px 16px;
text-decoration: none;
}
.sub-nav-list{
display: none;
}
ul.nav-list li > ul.sub-nav-list li a:hover {
color: red;
display: block;
}
Do you mean that when you hover a parent item '<li>Tips for health</li>' you want the sub navigation ul '<ul class="sub-nav-list"></ul>' to show?
If so you have a few things you need to change.
You need to rearrange your html so that the ul.sub-nav-list are within the parent li's
You need to target the ul.sub-nav-list rather than the li a's with the css to display them
For example;
<div id="nav">
<ul class="nav-list">
<li>Home</li>
<li>
Tips for health
<ul class="sub-nav-list">
<li>The healing properties</li>
<li>5 important spices that you should include in your diet</li>
<li>Bad habits and their removal</li>
<li>Water as a source of life</li>
</ul>
</li>
<li>
Recipes
<ul class="sub-nav-list">
<li><a href="#"Salads</a></li>
<li>Lettuce</li>
<li>French salad</li>
<li><a href="salata%20cherveno%20cveklo.html"Red Beet Salad</a></li>
</ul>
</li>
<li>
Fresh
<ul class="sub-nav-list">
<li>Sweet fresh</li>
<li>Fresh detox</li>
<li>Citrus fresh</li>
</ul>
</li>
<li>
<li>Smoothies<
<ul class="sub-nav-list">
<li>Смути шоколад</li>
<li>Chocolate smoothie</li>
<li>Smoothie with banana and pineapple</li>
</ul>
</li>
<li>Contacts</li>
</ul>
</div>
This now has the correct structure.
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #F6F2E8;
}
li a {
display: block;
color: #A6BB79;
padding: 8px 0 8px 16px;
text-decoration: none;
}
.sub-nav-list{
display: none;
}
ul.nav-list li:hover > ul.sub-nav-list {
color: red;
display: block;
}
This will display any ul that is a child of an li that is hovered
Hi I am looking to display my ordered list this:
so the first node and the first nested node appear on the top line and the remaining nested nodes appear under the 2nd column (under red).
Apples Red
Green
Yellow
Banana Yellow
html:
<ul class="lst" id="list_Apple">
<li>Apple</li>
<ul>
<li id="Apple">Red</li>
<li id="Apple">Green</li>
<li id="Apple">Yellow</li>
</ul>
</ul>
<ul class="lst" id="list_Banana">
<li>Banana</li>
<ul>
<li id="Banana">Yellow</li>
</ul>
</ul>
There is a slight mistake in your html. The <ul> tag should be inside a <li>.
HTML:
<ul class="lst" id="list_Apple">
<li>Apple</li>
<li>
<ul>
<li id="Apple">Red</li>
<li id="Apple">Green</li>
<li id="Apple">Yellow</li>
</ul>
</li>
</ul>
<ul class="lst" id="list_Banana">
<li>Banana</li>
<li>
<ul>
<li id="Banana">Yellow</li>
</ul>
</li>
</ul>
And add this CSS:
.lst {
clear: both;
}
.lst li {
list-style: none;
}
.lst > li {
float: left;
}
Here's a Fiddle: http://jsfiddle.net/rayg8ua9/1/
lithanks... Yes I missed the li tag.
.lst {
clear: both;
padding-top: 10px;
}
.lst li {
list-style: none;
width:100px;
}
.lst > li {
float: left;
}
How do I make a sub-menu appear when hovering over? I'm not seeing what's wrong with what I have - (but there's obviously something wrong since it doesn't work!)
HTML
<div>
<ul>
<li><a id="ALink" href="#">A</a></li>
<ul id="SubMenu">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<li><a id="BLink" href="#">B</a></li>
<li><a id="CLink" href="#">C</a></li>
</ul>
</div>
CSS
#SubMenu {
display: none;
width: 200px;
height: 200px;
background: #00C;
}
#ALink:hover #SubMenu {
display: block;
}
JSFiddle - From the code so far it is suposed to show a menu when hovering over option "A".
You have to have the submenu in that element, that will be linked with it:
<div>
<ul>
<li><a id="ALink" href="#">A
<ul id="SubMenu">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</a>
</li>
<li><a id="BLink" href="#">B</a></li>
<li><a id="CLink" href="#">C</a></li>
</ul>
</div>
The below code should work.
HTML
<ul class="topmenu">
<li class="submenu">A
<ul>
<li>Product 1</li>
<li>Product 2</li>
<li>Product 3</li>
</ul>
</li>
<li>B</li>
<li>C</li>
</ul>
CSS
The below code is to formatting and indentation.
ul.topmenu, ul.topmenu ul {
display: block;
margin: 0;
padding: 0;
}
ul.topmenu li {
display: inline;
list-style: none;
margin: 0;
padding-right: 1.5em;
}
The sub-menu is still showing up on the page, so you would have to hide it:
ul.topmenu li ul {
visibility: hidden;
}
Then all you need is for the menu to appear when the user hovers over the enclosing list item:
ul.topmenu li.submenu:hover ul {
visibility: visible;
}