I had problem to load the li in nested navigation. Here is the problem suppose i'm having a five elements(li) in the parent ul. If i click on any element(li), I can see 30 child elements(ul li) in list. Now the problem is how do I have assign them in three rows?
Below is the structure. I have tried like splitting the them into rows but no use.
ul(parent)
li
li
li>ul(child)
li li(1) li(11) li(21)
li li (2) li(12) li(22)
.. (3) .. ..
.. .. ..
(10th li) (20th li)(30th li)
I am not following you question 100% but it sounds like you are trying to nest more than one level deep? If you are ..
Simple just nest some more ul elements within the li tags.
<ul>
<li>1</li>
<li>2</li>
<li>
3
<ul>
<li>3.1
<ul>
<li>3.1.1</li>
<li>3.2.1</li>
</ul>
</li>
<li>3.2
<ul>
<li>3.2.1</li>
<li>3.2.2</li>
</ul>
</li>
<li>3.3
<ul>
<li>3.3.2</li>
<li></li>
</ul>
</li>
</ul>
</li>
<li>4</li>
<li>5</li>
</ul>
SEE THE DEMO. Is this what you want? Basically, you will have to define the width for the second ul and float your li. Your code should be like:
ul.primary {
position: relative;
}
ul ul {
width: 400px;
position: absolute;
top:0; left: 0;
}
ul ul li {
float: left;
}
Related
How to turn off CSS link in HTML?
I have this in my styles.css page
li {
display: inline;
padding: 80px;
}
This makes:
<li>Home</li>
Appear horizontal.
However when I want to use an ordered list in HTML, the numbers will not appear.
I think because the CSS applies to all <li> tags.
You could try ul li to only inline items in an unordered list.
ul li {
display: inline;
padding: 80px;
}
Or better, use a class to designate lists that should display inline:
.inline-list li {
display: inline;
padding: 80px;
}
<ul class="inline-list">
<li>Home</li>
...
Ordered list has the ol tag, the ul tag is an unordered list
In your css, change the ul to ol and you will be able to css an ordered list
If you want the number to appear then you have to add ol tag.
<ol>
<li>Home</li>
<li>About</li>
</ol>
Then, if you want them to be inline, you can do
li {
padding: 80px;
}
ol {
display: flex;
}
Example:
https://jsfiddle.net/sngzv67o/
You can do it by:
a:link {
text-decoration: none;
}
w3school
At least thre exists 2 possibilities;
the first (but i guess no the one you seeked) is to specifiy the path for style, if you can something like will satisfy your need
ul > li {
display: inline;
padding: 80px;
}
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<ol>
<li>1</li>
<li>3</li>
<li>4</li>
</ol>
this way, the inlining will only apply to unordered list items.
Another solution is to use vanilla js to explictly remove the style
ul > li {
display: inline;
padding: 80px;
}
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<ol>
<li>1</li>
<li>3</li>
<li>4</li>
</ol>
<input type='button' onclick='document.getElementsByTagName("style")[0].remove()' value='Remove style tag'>
I have the below shown css only menu, but am wondering how I can, when the browser window gets smaller and the menu items doesnt fit, how I can move them one by one! onto the last, right most item "more..." so they create a sub menu there instead. Please see the following pictures of how first item "seventh" and "eighth" are moved onto "more..." and the second picture shows what should happen when you hover over "seventh", it should reveal its original sub menu items.
My current code: (pen with same for easier resizing: https://codepen.io/anon/pen/oZoMbK)
* {box-sizing:border-box;}
.nav{
background-color:#d6336c;
font-size:20px;
}
.nav ul{
list-style: none;
}
.nav ul li{
padding:2px 20px;
float: left;
position:relative;
background: #1bc2a2;
white-space: nowrap;
}
.nav ul li ul {
display:none;
position: absolute;
background-color:orange;
left: 0;
}
.nav ul li ul, .nav li li {
min-width: 100%;
}
.nav ul li:hover > ul{
display: block;
}
.nav ul ul ul{
left:100%;
top:0;
}
.nav a{
color:#ffffff;
}
ul,li{
margin:0;
padding:0;
}
<div class="nav">
<ul>
<li>first</li>
<li>second
<ul>
<li>sub1 first</li>
<li>sub1 second
<ul>
<li>sub2 first</li>
<li>sub2 second
<ul>
<li>sub3 first</li>
<li>sub3 second</li>
<li>sub3 third</li>
</ul>
</li>
</ul>
</li>
<li>sub2 third</li>
</ul>
</li>
<li>third
<ul>
<li>.
<li>.
<li>.
</ul>
</li>
<li>fourth</li>
<li>fifth</li>
<li>sixth</li>
<li>seventh
<ul>
<li>cats</li>
<li>dogs
<ul>
<li>beagle</li>
<li>boxer</li>
</ul>
</li>
<li>birds</li>
</ul>
</li>
<li>eighth</li>
<li>more...</li>
</ul>
</div>
First image when hovering "more...":
Second image, when hovering "seventh" under "more...":
I cant figure out how its done, only with media queries but I dont want set specific values as the menu items width might change/be dynamic. The following two pens somehow moves the items one by one as they dont fit when resizing the screen:
https://codepen.io/VPenkov/pen/wMZBOg & https://codepen.io/tejasukmana/pen/bZKNrJ
I really want to keep this css only, no javascript.
thanks in advance for any help!
Frank
When writing html/doxygen, ul, li are frequently used. For a nested list. I want to the first layer to be "disc", the second layer to be "square", and the thrid layer to be "dash".
<ul>
<li> ...
<ul type=square>
<li> ...
<ul class="dash">
<li> ...
<li> ...
</ul>
</ul>
</ul>
Is there way to avoid typing things like type=square or class="dash". Once I write a nested ul list, it can be default be set to different type and class depending on what the nested layer it is located?
Anyway to do it in CSS?
You can use CSS in this manner:
ul {
list-style: disc
}
ul ul {
list-style: circle;
}
ul ul ul {
list-style: square;
}
Demo:http://jsfiddle.net/GCu2D/1736/
square is a valid list-type, below is an example. You can use :before pseudo selector to achieve dash.
ul[type=square] {
list-style: square;
}
ul.dash {
list-style: none;
}
ul.dash >li:before {
content:"-";
position: absolute;
margin-left: -14px
}
<ul>
<li> ...
<ul type=square>
<li> ...
<ul class="dash">
<li> ...
<li> ...
</ul>
</ul>
</ul>
this is my html file:-
<div id="load">
<ul>
<li>Activities
<ul>
<li>Physical1
<ul>
<li>Cricket
<ul>
<li>One Day</li>
</ul>
</li>
</ul>
</li>
<li>Test1
<ul>
<li>Test At Abc</li>
</ul>
</li>
<li>Test2
<ul>
<li>Test At Xyz</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
i want to set in to css hover.
i dont konw about css hover much so give me suggestion for this.
this is my output i needed.
hover in Acvivities display
Physical1
Test1
Test2
hover in Physcial1 display Cricket...
thanks...
ul > li > ul {
display: none; // hide all submenus
}
li:hover > ul {
display: block; // show sub menu when parent li is hovered
}
DEMO
ul li ul
{
display:none;
}
ul > li:hover > ul
{
display:block;
}
http://jsfiddle.net/AyLYe/
I won't provide the whole code, but with this base you can adapt the code to display the rest of what you need.
Before we start, see this tutorial I found with a google search: http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu I scanned it at a glance and it looks pretty good, it will at least guide you through the concepts and the process.
Here's a JSFiddle:http://jsfiddle.net/Kq7vD/
Heres the CSS that makes it work:
#load ul li ul {
display: none;
}
#load ul li:hover ul {
display: block;
}
Note that by removing #load you can cause this to work across every list in your menu. The downside to this is that the css rules then apply to every list on your site, even if it shouldn't be a menu. It is recommended that you keep your rules relatively specific for this reason.
EDIT to address your comment:
If your HTML structure includes a DIV before each UL, even the nested UL's then your css rules will need to adapt to that new structure. In particular, it's also important to note that you will not set the UL to display: none/block; anymore but the DIVs.
Assuming a structure like:
<div id="load">
<div>
<ul>
<li>
<div>
<ul>
<li></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
Your code would then look like...
#load div ul li div {
display: none;
}
#load div ul li:hover div {
display: block;
}
I am trying to create a simple drop-down menu which hides the sub-menu anchors until a main menu anchor is being hovered over.
html markup
<ul>
<li>1</li>
<li>2</li>
<li>
3
3.1
3.2
</li>
</ul>
css styles
<style>
ul li a:nth-child(n+2){
display:none;
}
ul li a:nth-child(n+2):hover{
display:block;
}
ul li a:hover + a:nth-child(n+2) {
display: block;
}
</style>
currently this only displays the first anchor of the sub-menu (3.1) when I need it to be able to display all other anchors of the sub-menu 3.2....3.n, how do I achieve this?
You should use this:
HTML:
<ul id="container">
<li>1</li>
<li>2</li>
<li>3
<ul>
<li>3.1</li>
<li>3.2</li>
</ul>
</li>
</ul>
CSS:
#container>li>ul{
display:none;
}
#container>li:hover>ul{
display:block;
}
Demo: http://jsfiddle.net/Tx4z7/
You could add also a padding to the submenu:
#container>li>ul{
padding-left:20px;
}
Demo: http://jsfiddle.net/Tx4z7/1/