This question already has answers here:
Should I use <ul>s and <li>s inside my <nav>s?
(9 answers)
Closed 9 years ago.
today i wanted to have a closer look over the nav element from html5. and i've seen on most websites that the way it should be used is with an ul li inside. Well that wouldn't be very semantic because the nav element already acts like a list. Even on MDN i've seen the example using nav ul li elements. But how about just simple nav with links inside and even dropdown
<nav>
Some Text
Some Text
Some Text
Some Text
Some Text
Some Text
Some Text
<a href="#" id="dropdown-menu">Dropdown
<nav class="dropdown">
Some Text
Some Text
Some Text
Some Text
Some Text
Some Text
Some Text
</nav>
</a>
</nav>
Is it semantic, is it wrong ? if it's correct the way i used why everyone uses ul li elements inside of nav ?
Update: just for the example i've updated the topic and added the css and js
Javascript
$('#dropdown-menu').on("click", function(e) {
$('.dropdown').slideDown(100);
});
CSS
.dropdown {
display: none;
}
I think good practice (required for wordpress for example) is building navigation this way:
<nav>
<ul>
<li></li>
<li></li>
<li></li>
<li>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
</ul>
</nav>
Always use ul, it's natural - navigation is a list.
Related
This question already has answers here:
Why is my background color not showing if I have display: inline?
(6 answers)
Inline container isn't showing background color when wrapping elements [duplicate]
(1 answer)
Closed 1 year ago.
In this little example I have attached I expected the yellow background to extend to the li tags that are children of the ul but this seems not to be how it behaves when display:inline is applied to the ul tag.
What's the logic behind this behaviour?
P.D. I know how to fix this issue. I could make the ul tag an inline block, but this is not what this question is about. I exactly thought that the below code would have behavef as if display-block was applied. In the end, you have a tag surrounding a content. display:inline makes it show in the same line but shouldn't it big as big as its content?
.li {
background-color:red;
}
.inline-ul {
display:inline;
background-color:yellow;
}
.inline-li {
/*display:inline;
background-color:green;*/
}
<html>
<head>
</head>
<body>
<nav>
<ul class="mainMenu">
<li>Item1</li>
<li class="li">
<span>Item2</span>
<span>Item3</span>
<ul class="inline-ul">
<li class="inline-li">Item11</li>
<li>Item12</li>
<li>Item13</li>
</ul>
</li>
<li>Item3</li>
<li>Item4</li>
</ul>
</nav>
</body>
</html>
How do I indent to the right an li in Bootstrap 4? I have this code but the circle bullet of the li is one character to the left of the <h6>. I got position static.
<h6>Test1</h6>
<li>Test2</li>
put your li elements inside a ul tag.
<h6>Test1</h6>
<ul>
<li>Test2</li>
</ul>
It does not make any sense to locate an <li> element right after an <h> tag. <li> elements are supposed to only be located in a list element such as <ol> or <ul>.
If you want to have a bold text just left to a <ul> list, you need to locate it in another block element (<div> for example), which with proper CSS you can locate just left to the <ul> list.
This question already has answers here:
I need an unordered list without any bullets
(16 answers)
Closed 6 years ago.
Im working on a project and im using some ul and li's.
But i cant seem to figure out how to remove those pesky black dots that come with those lists.
Can any of you help me with this?
Edit: i completely forgot to search this site if there was already an answer (derp) turns out there was! Marked this as a duplicate, thanks for helping me everyone!
Relatable post
Those black dots you are referencing to are called bullets.
They are pretty simple to remove, just add this line to your css:
ul {
list-style-type: none;
}
There you go, this is what I used to fix your problem:
CSS CODE
nav ul { list-style-type: none; }
HTML CODE
<nav>
<ul>
<li>Milk
<ul>
<li>Goat</li>
<li>Cow</li>
</ul>
</li>
<li>Eggs
<ul>
<li>Free-range</li>
<li>Other</li>
</ul>
</li>
<li>Cheese
<ul>
<li>Smelly</li>
<li>Extra smelly</li>
</ul>
</li>
</ul>
</nav>
CSS :
ul{
list-style-type:none;
}
You can take a look at W3School
first question here so please go easy on me :).
I started studying css3 two weeks ago, and now i'm trying to build a pure css3 dropdown menu system.
I got my menu built like this
<body>
<div id="column">
<div id="header">
<heading1>Header.</heading1>
</div>
<div id="menu">
<menu-element class="chosen"> Home page</menu-element>
<menu-element>Project</menu-element>
<a href="Gallery.html">
<menu-element> Gallery
<ul>
<li>1</li>
<li>2</li>
</ul>
</menu-element>
</a>
</div>
....
</body>
I'm working by integrating the css code i studied on a tutorial to work on my css structure.
The step i'm having problem is is the first: hiding the submenu items when not on mouseover.
I tried with
menu-element ul
{
display: none;
}
to hide only ul elements nested in menu-element elements, but it didn't work.. and the ul and its li childs are still there. Could anyone help me out by telling me where i'm wrong?
Your only problem is that you have invalid html tags, (<menu-element> and <heading1>).
Instead of <menu-element> use <nav>, and instead of <heading1> use <h1>.
I think that you are doing your tests in IE, and in some of the old compatibility modes.
In Chrome, Firefox, and IE 11, your code works
fiddle
code fragment to make SO happy:
menu-element ul
{
display: none;
}
It is true that your elements are not valid HTML types, (and of course you should use valid ones!!) but HTML5 compliant browser are quite liberal about that.
Best practice in creating navigation menus is to use an unordered list for the entire menu. This way if styles are not loaded (for whatever reason) it still reads properly. As other have mentioned, and are not valid tags.
I would suggest using the model below:
<nav>
<ul>
<li>Home</li>
<li>Project</li>
<li>
Gallery
<ul class="gallery">
<li>1</li>
<li>2</li>
</ul>
</li>
</ul>
</nav>
And for the css you could use
ul.gallery{
display: none;
}
or
nav ul li ul{
display: none;
}
I use the second option when creating pure css dropdown menus as it is easier to follow along as you create more complicated menus. It also allows you to hide all submenus rather than just the one with the class of gallery.
What CSS makes <a> tags show on a single line, rather than under each other?
Maybe have a link in <li> tag?
I believe you want:
a {
display: block;
}
edit
Anchors by default show inline, but the related CSS is:
a {
display: inline;
}
You could also use inline-block which gives you a bit more functionality (although some older browsers support it poorly).
If you want a link in a <li> tag:
<ul>
<li>
Link here.
</li>
</ul>
CSS:
li {
display:inline-block;
}
Example here
I created an example for you which answers your second question.
<p id="top">This is the top of the file</p>
<ul> Favourite sports
<li>Football</li>
<li>Tennis</li>
<li>Rugby</li>
</ul>
<p>This link goes to the top</p>
The tag li refers to list item. Links are written the same way in ordered and unordered lists.