I have been trying to create a dropdown menu which appears to be working with some success but the catch is...It presents the dropdown menu on the right side of the element instead of directly under it.
I suspect it has something to do with either position or padding but I wasn't able to figure it out.
Thanks for taking a look, I'm still new to css and it means a lot!
html
<nav id="navigatie" class="nav">
<ul>
<li><a class="active" href="index.html">Home</a>
<li>Producten</li>
<li>Personaliseren</li>
<li><a>Over ons</a>
<ul>
<li>Blog</li>
<li>Contact</li>
<li>FAQ</li>
</ul>
</li>
</ul>
</nav>
css
html {
background: #936A4A;
}
nav {
position: absolute;
width: 100%;
top: 0;
left: 0;
background: #F5F5F5;
}
ul {
display: flex;
flex-wrap: wrap;
padding: 0;
}
ul li {
width: 25%;
}
ul li > ul {
display: none;
flex-direction: column;
}
ul li:hover > ul {
display: flex;
flex-wrap: wrap;
}
ul li > ul li {
width: 100%;
height: 100%;
}
li {
display: flex;
flex: auto;
}
li a {
color: #B85750;
text-decoration: none;
}
.active {
pointer-events: none
}
Yes, you need to position the submenu absolutely in relation to the parent li.
html {
background: #936A4A;
}
nav {
position: absolute;
width: 100%;
top: 0;
left: 0;
background: #F5F5F5;
}
ul {
display: flex;
flex-wrap: wrap;
padding: 0;
}
ul li {
width: 25%;
position: relative;
}
ul li>ul {
position: absolute;
left: 0;
top: 100%;
width: 100%;
background: lightblue;
/* display: none; */
flex-direction: column;
}
ul li:hover>ul {
display: flex;
flex-wrap: wrap;
}
ul li>ul li {
width: 100%;
}
li {
display: flex;
flex: auto;
}
li a {
color: #B85750;
text-decoration: none;
}
.active {
pointer-events: none
}
<nav id="navigatie" class="nav">
<ul>
<li><a class="active" href="index.html">Home</a>
<li>Producten</li>
<li>Personaliseren</li>
<li><a>Over ons</a>
<ul>
<li>Blog</li>
<li>Contact</li>
<li>FAQ</li>
</ul>
</li>
</ul>
</nav>
Please take a look at the following solution.
html {
background: #fff;
}
.parent-container{
position: relative;
width:100%;
height: 100%;
}
nav {
background: #F5F5F5;
}
ul {
list-style: none;
margin: 0;
padding-left: 0;
}
li {
background: #936A4A;
display: block;
float: left;
padding: 1rem;
position: relative;
text-decoration: none;
transition-duration: 0.5s;
}
li a {
color: #fff;
}
li:hover {
cursor: pointer;
}
ul li ul {
visibility: hidden;
opacity: 0;
min-width: 5rem;
position: absolute;
transition: all 0.5s ease;
margin-top: 1rem;
left: 0;
display: none;
background: lightblue;
}
ul li:hover > ul,
ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
ul li ul li {
clear: both;
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<link href="app.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="parent-container">
<nav role="navigation" class="nav" id="navigatie">
<ul>
<li><a class="active" href="index.html">Home</a>
<li>Producten</li>
<li>Personaliseren</li>
<li>Over ons
<ul class="dropdown">
<li>Blog</li>
<li>Contact</li>
<li>FAQ/<li>
</ul>
</li>
</ul>
</nav>
</div>
</body>
</html>
Related
the animation dosent work for some reason ( im using normalize dont know if it have an effect + a default start )
i copied the code but it didnt work for me
its second project im rly a real beginner so any advise is welcome
thanks in advance^^
*/ html */
<nav>
<a href="./index.html"
><img src="./eduford_img/logo.png" alt="Uni logo"
/></a>
<div class="nav-links">
<ul>
<li>Home</li>
<li>About</li>
<li>Course</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</nav>
*/ css */
nav {
display: flex;
padding: 2% 6%;
justify-content: space-between;
align-items: center;
}
nav img {
width: 150px;
}
.nav-links {
flex: 1;
text-align: right;
}
.nav-links ul li {
display: inline-block;
position: relative;
padding: 8px 12px;
}
.nav-links ul li a {
color: #fff;
font-size: 16px;
text-decoration: none;
}
.nav-links ul li a ::after {
content: "";
width: 0%;
height: 2px;
background: var(--primary-400);
display: block;
margin: auto;
transition: var(--transition);
}
.nav-links ul li:hover::after {
width: 100%;
}
Since you put the ::after on the <a> element, you need .nav-links ul li:hover a::after, not .nav-links ul li:hover::after:
*/ html */
<nav>
<a href="./index.html"
><img src="./eduford_img/logo.png" alt="Uni logo"
/></a>
<div class="nav-links">
<ul>
<li>Home</li>
<li>About</li>
<li>Course</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</nav>
*/ css */
nav {
display: flex;
padding: 2% 6%;
justify-content: space-between;
align-items: center;
}
nav img {
width: 150px;
}
.nav-links {
flex: 1;
text-align: right;
}
.nav-links ul li {
display: inline-block;
position: relative;
padding: 8px 12px;
}
.nav-links ul li a {
color: #fff;
font-size: 16px;
text-decoration: none;
}
.nav-links ul li a::after {
content: "";
width: 0%;
height: 2px;
background: var(--primary-400);
display: block;
margin: auto;
transition: var(--transition);
}
.nav-links ul li:hover a::after {
width: 100%;
}
An example with a few modifications so that it works on this site:
body {
background: black
}
nav {
display: flex;
padding: 2% 6%;
justify-content: space-between;
align-items: center;
}
nav img {
width: 150px;
}
.nav-links {
flex: 1;
text-align: right;
}
.nav-links ul li {
display: inline-block;
position: relative;
padding: 8px 12px;
}
.nav-links ul li a {
color: #fff;
font-size: 16px;
text-decoration: none;
}
.nav-links ul li a::after {
content: "";
width: 0%;
height: 2px;
background: red;
display: block;
margin: auto;
transition: width 0.5s;
}
.nav-links ul li:hover a::after {
width: 100%;
}
```
<nav>
<a href="./index.html"
><img src="./eduford_img/logo.png" alt="Uni logo"
/></a>
<div class="nav-links">
<ul>
<li>Home</li>
<li>About</li>
<li>Course</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</nav>
I want to make a dropdown menu just using html and css. However, I am unable to do it. I want to make the others list item a dropdwon menu. Can anyone help me with that?
Here's my CSS code:
```
nav {
background-color: #01a6f0;
}
.navbar {
list-style: none;
float: right;
margin-right: 10rem;
margin-top: 2.6rem;
margin-bottom: .5rem;
}
.navbar li {
display: inline-block;
padding: 1rem 1rem;
}
.navbar li:hover {
background-color: #01A6FE;
}
.navbar li a {
color: #fff;
}
```
Here's the HTML code
```
<nav>
<ul class="navbar">
<li>Home</li>
<li>Puzzles</li>
<li>Stories</li>
<li>Goods</li>
<li class="dropdown-link">Others
<ul class="dropdown-menu">
<li>Under The Sea</li>
<li>Middle The Sea</li>
<li>Ovver The Sea</li>
</ul>
</li>
</ul>
</nav>
Try this example with just HTML and CSS:
It is from this site if you want to read more about this code:
https://css-tricks.com/solved-with-css-dropdown-menus/
a {
text-decoration: none;
}
nav {
font-family: monospace;
}
ul {
background: darkorange;
list-style: none;
margin: 0;
padding-left: 0;
}
li {
color: #fff;
background: darkorange;
display: block;
float: left;
padding: 1rem;
position: relative;
text-decoration: none;
transition-duration: 0.5s;
}
li a {
color: #fff;
}
li:hover {
background: red;
cursor: pointer;
}
ul li ul {
background: orange;
visibility: hidden;
opacity: 0;
min-width: 5rem;
position: absolute;
transition: all 0.5s ease;
margin-top: 1rem;
left: 0;
display: none;
}
ul li:hover > ul,
ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
ul li ul li {
clear: both;
width: 100%;
}
<nav role="navigation">
<ul>
<li>One</li>
<li>Two
<ul class="dropdown">
<li>Sub-1</li>
<li>Sub-2</li>
<li>Sub-3</li>
</ul>
</li>
<li>Three</li>
</ul>
</nav>
My dropdown menu currently looks like this :
The Home is not quite at the correct position like how I would like it at the top left, how do I fix this? Many thanks for the help.
* {
margin: 0;
padding: 0;
}
nav {
width: 1600px;
}
ul {
list-style: none;
background-color: #333;
}
ul li {
width: 200px;
background: #333;
float: left;
height: 35px;
line-height: 35px;
text-align: center;
margin-right: 2px;
position: relative;
float: none;
display: inline-block;
}
ul li:hover {
background: #0e6ea8;
}
ul li a {
color: #fff;
text-decoration: none;
font-family: sans-serif;
display: block;
border: none;
}
ul li ul li {
border-top: 1px solid #fff;
}
ul li ul {
display: none;
}
ul li:hover ul {
display: block;
}
ul li ul .first {
position: absolute;
left: 201px;
top: 0;
display: none;
}
ul li ul :hover .first {
display: block;
}
ul li ul .second {
position: absolute;
left: 201px;
top: 0;
display: none;
}
ul li ul :hover .second {
display: block;
}
ul li ul li ul .seconda {
position: absolute;
left: 201px;
top: 0;
display: none;
}
ul li ul li ul:hover .seconda {
display: block;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<nav>
<div class="nav navbar-fixed-top">
<ul>
<li>Home</li>
<li>Options<span> ▾</span>
<ul>
<li><a href="#">Consumer
Management <span>▶</span></a>
<ul class="first">
<li>www.e-homes.com.my</li>
</ul>
</li>
<li><a href="#">Project Admin
Tool <span>▶</span></a>
<ul class="second">
<li>Download</li>
<ul class="seconda">
<li>Download MR</li>
<li>Download PO</li>
<li>Download Invoice
</li>
<li>Download lalalala
</li>
</ul>
</ul>
</li>
</ul>
</div>
</nav>
I know its just a small thing I missed, would appreciate some guidance on this thank you so much again.
You have a missing ul and li before the second last closing element.
Add d-flex on the ul after navbar-fixed-top element <div class="nav navbar-fixed-top"> <ul class="d-flex">
* {
margin: 0;
padding: 0;
}
nav {
width: 1600px;
}
ul {
list-style: none;
background-color: #333;
}
ul li {
width: 200px;
background: #333;
float: left;
height: 35px;
line-height: 35px;
text-align: center;
margin-right: 2px;
position: relative;
float: none;
display: inline-block;
}
ul li:hover {
background: #0e6ea8;
}
ul li a {
color: #fff;
text-decoration: none;
font-family: sans-serif;
display: block;
border: none;
}
ul li ul li {
border-top: 1px solid #fff;
}
ul li ul {
display: none;
}
ul li:hover ul {
display: block;
}
ul li ul .first {
position: absolute;
left: 201px;
top: 0;
display: none;
}
ul li ul :hover .first {
display: block;
}
ul li ul .second {
position: absolute;
left: 201px;
top: 0;
display: none;
}
ul li ul :hover .second {
display: block;
}
ul li ul li ul .seconda {
position: absolute;
left: 201px;
top: 0;
display: none;
}
ul li ul li ul:hover .seconda {
display: block;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<nav>
<div class="nav navbar-fixed-top">
<ul class="d-flex">
<li>Home</li>
<li>Options<span> ▾</span>
<ul>
<li><a href="#">Consumer
Management <span>▶</span></a>
<ul class="first">
<li>www.e-homes.com.my</li>
</ul>
</li>
<li><a href="#">Project Admin
Tool <span>▶</span></a>
<ul class="second">
<li>Download</li>
<ul class="seconda">
<li>Download MR</li>
<li>Download PO</li>
<li>Download Invoice
</li>
<li>Download lalalala
</li>
</ul>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
Your HTML structure is incorrect (closing tags missing) and your CSS contains an error for ul li. Corrected below.
* {
margin: 0;
padding: 0;
}
nav {
width: 1600px;
}
ul {
list-style: none;
background-color: #333;
}
ul li {
width: 200px;
background: #333;
float: left;
height: 35px;
line-height: 35px;
text-align: center;
margin-right: 2px;
position: relative;
/* float: none; REMOVED */
display: inline-block;
}
ul li:hover {
background: #0e6ea8;
}
ul li a {
color: #fff;
text-decoration: none;
font-family: sans-serif;
display: block;
border: none;
}
ul li ul li {
border-top: 1px solid #fff;
}
ul li ul {
display: none;
}
ul li:hover ul {
display: block;
}
ul li ul .first {
position: absolute;
left: 201px;
top: 0;
display: none;
}
ul li ul :hover .first {
display: block;
}
ul li ul .second {
position: absolute;
left: 201px;
top: 0;
display: none;
}
ul li ul :hover .second {
display: block;
}
ul li ul li ul .seconda {
position: absolute;
left: 201px;
top: 0;
display: none;
}
ul li ul li ul:hover .seconda {
display: block;
}
<nav>
<div class="nav navbar-fixed-top">
<ul>
<li>Home</li>
<li>Options<span> ▾</span>
<ul>
<li><a href="#">Consumer
Management <span>▶</span></a>
<ul class="first">
<li>www.e-homes.com.my</li>
</ul>
</li>
<li><a href="#">Project Admin
Tool <span>▶</span></a>
<ul class="second">
<li>Download
<ul class="seconda">
<li>Download MR</li>
<li>Download PO</li>
<li>Download Invoice
</li>
<li>Download lalalala
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
I want to do some dropdown menu on this navigation menu, but it's not working and aswell I would like to center it. I tried to use display:inline; command, but it didnt help.
https://jsfiddle.net/fLdasLv4/
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: absolute;
left: 0%;
top: 0%;
width: 100%;
height: 8%;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 20px 25px;
text-decoration: none;
font-size: 100%;
font-family:Lucida Sans Unicode;
}
li a:hover {
background-color: #111;
}
li a:active{
background-color: grey;
}
ul li:hover > ul
{
display:block
}
<ul>
<li><a class="active" href="#home" font size="16">Home</a></li>
<li><a class="kaires" href="#news">Dropd</a></li>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<li>Something</li>
<li>Contact us</li>
</ul>
Could do something like this?
use flexbox to center it, then hide sub menu first use
ul li ul {
display: none;
}
On hover the menu display the submenu use:
/* Sub menu item */
ul li ul li {
width: 100%;
display: block;
}
/* Show Sub menu on hover */
ul li:hover > ul {
position: absolute;
display: block;
background: green;
width: 30%; /* Sub menu width */
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
width: 100%;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 20px 25px;
text-decoration: none;
font-size: 100%;
font-family: Lucida Sans Unicode;
}
li a:hover {
background-color: #111;
}
li a:active {
background-color: grey;
}
ul li ul {
display: none;
}
/* Sub menu item */
ul li ul li {
width: 100%;
display: block;
}
/* Show Sub menu on hover */
ul li:hover > ul {
position: absolute;
display: block;
background: green;
width: 30%; /* Sub menu width */
}
.container {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
<ul class="container">
<li><a class="active" href="#home" font size="16">Home</a></li>
<li><a class="kaires" href="#news">Dropd</a>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</li>
<li>Something</li>
<li>Contact us</li>
</ul>
Firstly your html markup for the sub-menu was not correctly done. Also you can't put an overflow on the main container if you want the sub-menus to show. You can use flebox to center the nav without changing markup or writing more codes. See sample below..
nav {}
ul {
display: flex;
justify-content: center;
list-style-type: none;
margin: 0;
padding: 0;
/** overflow: hidden; Removed this(this wouldn't allow the submenu show) **/
background-color: #333;
position: absolute;
/**left: 0%; **/
top: 0%;
width: 100%;
/** height: 8%;Removed This**/
}
ul ul {
top: 100%;
display: block;
height: auto;
visibility: hidden;
}
li {
/** float: left; **/
position: relative;
}
li a {
display: block;
color: white;
text-align: center;
padding: 20px 25px;
text-decoration: none;
font-size: 100%;
font-family:Lucida Sans Unicode;
}
li a:hover {
background-color: #111;
}
li a:active{
background-color: grey;
}
ul li:hover > ul {
display:block;
visibility: visible;
}
li > ul li {
float: none;
}
<ul>
<li><a class="active" href="#home" font size="16">Home</a></li>
<li><a class="kaires" href="#news">Dropd</a>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</li>
<li>Something</li>
<li>Contact us</li>
</ul>
I have a basic horizontal nav menu, where a drop down list shows on hover. When the drop down links are single words everything works fine, but if the links are more than one word, ie "Lori Ipsum", the line breaks. I'm looking for the lines to keep their full width, so "Lori Ipsum" would be shown on the same line.
How can I prevent the line break?
Recreated in a code pen: http://codepen.io/agconti/pen/zvjkm
html:
<nav role='navigation'>
<ul>
<li>Home</li>
<li>
About
<ul>
<li>Lorem ipsum</li>
<li>Aliquam tincidunt</li>
<li>Vestibulum auctor</li>
</ul>
</li>
<li>Clients</li>
<li>Contact Us</li>
</ul>
</nav>
css:
html {
font-size: 1.5em;
}
a {
color: white;
text-decoration: none;
width: 100%;
}
li {
transition: color 0.15s ease-out, background-color 0.1s ease-in;
}
ul {
list-style: none;
background: blue;
margin: 0;
}
ul li {
padding: 1em;
margin: 0;
display: inline-block;
position: relative;
}
ul li:hover {
background: pink;
}
ul li:hover > ul {
display: block;
}
ul ul {
background-color: pink;
position: absolute;
display: none;
padding: 0;
left: 0;
top: 100%;
}
ul ul li {
box-sizing: border-box;
display: block;
minwidth: 100%;
}
ul ul li:hover {
background: #ffa6b6;
color: white;
}
set li default width;
or use
li a {
white-space: nowrap;
}
Maybe I am missing something, but you have a pretty good solution as is, and you could
fix the text wrap problem by specifying a width to the nest ul as follows:
ul ul {
background-color: tan;
position: absolute;
display: none;
padding: 0;
left: 0;
top: 100%;
width: 300px;
}
I used 300px but you can pick a suitable value.
html {
font-size: 1.5em;
}
a {
color: white;
text-decoration: none;
}
li {
transition: color 0.15s ease-out, background-color 0.1s ease-in;
}
ul {
list-style: none;
background: blue;
margin: 0;
}
ul li {
padding: 1em;
margin: 0;
display: inline-block;
position: relative;
}
ul li:hover {
background: pink;
}
ul li:hover > ul {
display: block;
}
ul ul {
background-color: tan;
position: absolute;
display: none;
padding: 0;
left: 0;
top: 100%;
width: 300px;
}
ul ul li {
/* white-space: nowrap;*/
box-sizing: border-box;
display: block;
min-width: 100%;
}
ul ul li:hover {
background: #ffa6b6;
color: white;
}
ul ul li a {
width: 200%;
}
<nav role='navigation'>
<ul>
<li>Home</li>
<li>
About
<ul>
<li>Lorem ipsum</li>
<li>Aliquam tincidunt</li>
<li>Vestibulum auctor</li>
</ul>
</li>
<li>Clients</li>
<li>Contact Us</li>
</ul>
</nav>
<section class="hero">
<div class="mask"></div>
</section>
li a {
white-space: nowrap;
}