I'm looking for advice on creating a drop down menu using Unordered Lists. I have managed to get a horizontal unordered list by using the following CSS and HTML. I'd like to make it so on some of the menus a drop down menu appears.
I've tried multiple different methods and haven't managed to get it right.
CSS
#nav li {
display: inline;
padding-right: 22px;
vertical-align: middle;
text-align: center;
}
#nav li a {
color: #f9f7ee;
background-image:url(images/bullet.gif);
background-repeat:no-repeat;
padding-left: 16px;
text-decoration: none;
}
#nav li a:hover {
background-image:url(images/bulletsolid.gif);
background-repeat:no-repeat;
padding-left: 16px;
color: #f9f7ee;
}
HTML
<ul id="nav">
<li>About</li>
<li>Teaching</li>
<li>Performing</li>
<li>Media</li>
<li>Blog</li>
<li>Links</li>
<li>Contact</li>
</ul>
This isn't too hard with css involving nesting your unordered lists and hiding the nested ones until the parent li is hovered. Here's a quick example if you wanted drop down below About. your html for it would look like so.
<ul id="nav">
<li>About
<ul>
<li>drop down below about 1</li>
<li>drop down below about 2</li>
</ul>
</li>
</ul>
#nav ul {
display: none;
}
#nav li:hover > ul {
display: block;
}
This will hide the child ul until the parent ul's li is hovered basically.
If your interested in building accesibile CSS check out a list apart
http://www.alistapart.com/articles/horizdropdowns/
There one of my favourites sites for good standards and proper CSS foundation
Related
I am making a website and I want to make a drop-down list but I have a trouble.
I want to do something like this:
Option A Option B Option C Option D Option E
and a dropdown list to B with 4 options but when I do it, it looks like that:
Option A Option B
.....................Option 1
.....................Option 2
.....................Option 3
.....................Option 4
...........................................Option C Option D Option E
this is my code:
.option {
display: inline-block;
}
.option>li {
display: inline;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<nav>
<ul>
<div class="option">
<li>Home</li>
<li>Services
<ul>
<li>3D
<li>2D
<li>Websites
<li>IT help
</ul>
</li>
</div>
<div class="option">
<li>Gallery
<li>Contact
<li>About Me
</div>
</ul>
</nav>
</body>
</html>
</nav>
Restructure your HTML
Close your li tags. Make sure you are closing them properly like
this:
<li>Home</li>
Nest all of the top level menu items (Home, Services, Gallery, Contact, About Me) in a single ul
Your HTML should look something like this
<nav>
<ul>
<li>Home</li>
<li>Services
<ul>
<li>3D</li>
<li>2D</li>
<li>Websites</li>
<li>IT help</li>
</ul>
</li>
<li>Gallery</li>
<li>Contact</li>
<li>About Me</li>
</ul>
</nav>
Add style
Add a class to the Services li to indicate that it is a dropdown. I am calling mine dropdown
Remove those pesky dots on each list item using list-style: none; padding: 0;
To arrange the top level ul horizontally, make it a flexbox by applying display: flex; on the ul. I would also add flex-wrap: none; to make sure the list does not try to wrap its elements on small screens.
I recommend giving each element of the flexbox a constant width and aligning the text how you like like. I used width: 80px; text-align: center;
Lastly, hide the elements of your dropdown by setting the inner ul's display to none. And show the dropdown by setting display to block. I did this using the class open
ul {
list-style: none;
padding: 0;
}
nav > ul {
display: flex;
flex-wrap: none;
}
nav > ul > li {
width: 80px;
text-align: center;
}
nav > ul > li.dropdown > ul > * {
display: none;
}
nav > ul > li.dropdown.open > ul > * {
display: block;
}
<nav>
<ul>
<li>Home</li>
<li class="dropdown">Services
<ul>
<li>3D</li>
<li>2D</li>
<li>Websites</li>
<li>IT help</li>
</ul>
</li>
<li>Gallery</li>
<li>Contact</li>
<li>About Me</li>
</ul>
</nav>
Add interaction
Now if you want to actually make the submenu expand, I recommend using JavaScript. In the code snippet above, all you need to do is toggle the class open on any li with the dropdown class.
There are infinite possibilities, but a good place to start is this W3 Schools tutorial on building clickable dropdown menus. Be mindful of accessibility features as well by reading this W3 tutorial on building accessible flyout menues.
Here is a tutorial on building a CSS only accessible dropdown menu; although I recommend sticking to JS solutions, because they are more versatile.
Rudimentary example using JS
const dropdownMenuItems = document.querySelectorAll("li.dropdown");
const toggleDropdown = (e, el) => {
if (e.target.classList.contains("dropdown-control")) {
el.classList.toggle("open");
}
};
dropdownMenuItems.forEach((el) => {
el.addEventListener("click", (e) => toggleDropdown(e, el));
});
ul {
list-style: none;
padding: 0;
}
nav > ul {
display: flex;
flex-wrap: none;
}
nav > ul > li {
width: 80px;
text-align: center;
}
nav > ul > li.dropdown > ul > * {
display: none;
}
nav > ul > li.dropdown.open > ul > * {
display: block;
}
<nav>
<ul>
<li>Home</li>
<li class="dropdown">Services
<ul>
<li>3D</li>
<li>2D</li>
<li>Websites</li>
<li>IT help</li>
</ul>
</li>
<li>Gallery</li>
<li>Contact</li>
<li>About Me</li>
</ul>
</nav>
Closing thoughts
I kept the styling really barebones. You can of course style however you like. It seems like you are mostly asking about how to get the arrangement right.
It probably makes sense to change the Services a tag to a button if it does not behave like a link. This is important for screen readers to know how to treat that element.
Here's how I would do it: It's a little bare, but it works. I would make each li have the class of option and get rid of the divs so that it is more consistent and simpler. Also, you were missing all of your closing li tags, which messed some things up. I also added a simple :hover mechanism so that it will hide and show when you hover over it.
.option {
display: inline-block;
vertical-align: top;
width: 75px;
margin: 0;
padding: 0;
}
.dropdown {
display: none;
padding: 0;
list-style-type: none;
}
.contains-dropdown:hover > .dropdown{
display: block
}
option>li {
display: inline;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<nav>
<ul>
<li class="option">Home</li>
<li class="option contains-dropdown">
Services
<ul class="dropdown">
<li>3D</li>
<li>2D</li>
<li>Websites</li>
<li>IT help</li>
</ul>
</li>
<li class="option">Gallery</li>
<li class="option">Contact</li>
<li class="option">About Me</li>
</ul>
</nav>
</body>
</html>
</nav>
This question already has answers here:
How to make a <ul> display in a horizontal row
(9 answers)
Closed 1 year ago.
I am trying to create a menu using html, I have added my link in an unordered list (ul) has shown below. In my css i added a display:inline; to the links so that they would display in a link like a menu but for some reason it doesn't seem to work.
#menu a {
text-decoration: none;
}
#menu ul {
list-style: none;
}
#menu ul li a {
display: inline;
}
<div id="menu">
<ul>
<li>Home
</li>
<li>About Us
</li>
<li>Special Offers
</li>
<li>Meet Our Staff
</li>
<li>Contact
</li>
</ul>
</div>
You are targeting the anchors, which are already inline by default. I believe you mean to target the list items:
#menu ul li {
display: inline;
}
JSFiddle
You were very close!
The only thing wrong with your code, is that display: inline; should be on your <li> elements instead of your <a> elements :
#menu a {
text-decoration: none;
}
#menu ul {
list-style: none;
}
#menu ul li {
display: inline;
}
<div id="menu">
<ul>
<li>Home
</li>
<li>About Us
</li>
<li>Special Offers
</li>
<li>Meet Our Staff
</li>
<li>Contact
</li>
</ul>
</div>
(see also this Fiddle)
Try this: ul li { float: left; padding-right:10px; }
https://jsfiddle.net/n4aak3nk/1/
I have tried creating a div, deleting the div, trying to get the ul displayed as inline, everything, but my unordered list is still not displaying as inline. What am I missing?
p {
font-family: orbitron;
}
h1 {
color: black;
text-align: center;
font-family: orbitron;
}
ul {
dispaly: inline;
}
<nav>
<ul id="navigation_bar">
<li class="About">About Game</li>
<li>Screenshots</li>
<li>About creator</li>
<li>Forums</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
Not the ul should be inline, the lis in the ul should be. Change your selector like this:
ul li {
display: inline;
}
or this:
ul > li {
display: inline;
}
Also, you’ve got a typo: dispaly should be display.
I am trying to make a horizontal drop down menu in CSS. However, it appears vertically:
I want the two topmost menu items to be horizontal. What can I do, besides making a table with one row?
ul ul {
display: none;
}
ul li:hover > ul {
display: block;
}
<ul>
<li>
abc
<ul>
<li>abc</li>
<li>abc</li>
</ul>
</li>
<li>
abc
<ul>
<li>abc</li>
<li>abc</li>
</ul>
</li>
</ul>
You can try floating the list items:
.root {
overflow: hidden; /* clear float */
}
.root > li {
float: left;
}
<ul class="root">
<li>
abc
<ul>
<li>abc</li>
<li>abc</li>
</ul>
</li>
<li>
abc
<ul>
<li>abc</li>
<li>abc</li>
</ul>
</li>
</ul>
You can add submenu a class/id with
.inline-menu{
display: inline;
}
http://jsfiddle.net/dyaskur/fby9fan6/
The gist of your question is actually this: what is the difference between inline and block elements? This is a fundamental question that is important to understanding the basics of layout in CSS/HTML. There is a good write-up on this topic and some of the trade-offs of the various approaches at:
http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/
Basically, <li> is block-level tag, meaning that it displays as its own "block" element: receives a layout (settable dimensions), by default takes the entire width of the parent element, and has a forced break after the rendered element (is on a line to itself).
So, that leaves us with a number of approaches for having your menu items sit side-by-side:
Use inline-level elements for your menu items
Use block-level elements and float them
Use block-level elements and style them as inline-block
All of these approaches are detailed in the above link. Personally, I prefer to use floated block elements. I have a fiddle with some rough css to give you an idea. Note that there are some considerations in how to display your submenus as well. You'll note that I've implemented these as having display: block, with no float, because we want them to stack vertically.
HTML
<ul class="menu">
<li>
foo
<ul class="submenu">
<li>subfoo1</li>
<li>subfoo2</li>
</ul>
</li>
<li>
bar
<ul class="submenu">
<li>subbar1</li>
<li>subbar2</li>
</ul>
</li>
</ul>
CSS
ul.menu {
list-style: none;
}
ul.menu > li{
float: left;
position: relative;
}
ul.menu li {
background-color: #cccccc;
padding: 5px 20px;
}
ul.menu > li + li {
border-left: solid black 2px;
}
ul.menu li:hover > ul {
display: block;
}
ul.menu li a,ul.menu li a:link, ul.menu li a:hover, ul.menu li a:visited {
color: black;
text-decoration: none;
}
ul.submenu{
display: none;
list-style: none;
position:absolute;
left: 0;
padding: 0;
}
ul.submenu li {
float:none;
display: block;
}
ul.submenu > li + li {
border-top: solid black 1px;
}
You can just remove some <li> tags:
<ul>
<li>
abc
<ul>
abc
abc
</ul>
</li>
<li>
abc
<ul>
abc
abc
</ul>
</li>
</ul>
I'm currently trying to create a drop-down menu from nested unordered lists. I have the menu working however I'm having some issues with regards to styling. The overall link that triggers the drop-down is clickable and needs to have a blue background with white text however, the drop-down elements need to have a grey background which is inherited from the overall navigation container. All I need to do is modify the text colour however whatever I method I try it always modifies the drop-down text colour as well as the heading link colour.
My CSS can be found below along with an example of the current display and the html used to generate the menu:
/*CSS*/
#coolMenu,
#coolMenu ul {
list-style: none;
}
#coolMenu {
float: right;
}
#coolMenu > li {
float: left;
}
#coolMenu li a {
display: block;
/*height: 2em;
line-height: 2em;
*/
/*padding: 0 1.5em;*/
text-decoration: none;
color: #ffffff;
}
#coolMenu ul {
position: absolute;
display: none;
z-index: 999;
}
#coolMenu li:hover ul {
display: block;
}
.dropdown a li{
color: #124162 !important;
}
#style_me > li > a{
color: #124162 !important;
}
/HTML/
<nav id="navigation" class="navigation">
<ul>
<li class="current">Home</li>
<li>Who Are We?</li>
<li>Why Join Us?</li>
<li>Contact Us</li>
</ul>
/* This is the menu element that needs styling */
<ul id="coolMenu">
/* THis should be blue background white text */
<li>Login / Register
<ul id="style_me">
/* These should be grey background blue text */
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
</ul>
</li>
</ul>
</nav>
Any help would be greatly appreciated. It's been a couple of years since I've had to do any CSS and my memory is a bit flakey!
This should do what you want:
#style_me li a {
color: #124162 !important;
}
(just spaces instead of >) And, perhaps, you won't need that !important.
Update: try even more specific CSS selector if what you posted is being overridden.
#coolMenu li #style_me li a {
color: #124162 !important;
}