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>
Related
I'm new to html and css. I follow a tutorial in youtube. This is all about navigational bar and drop down in html and css.
The name Ria, Kezia, and Gelia should be display when I hover my mouse in Support option.
* {
margin: 0px;
padding: 0px;
}
#container ul {
list-style: none;
/*This will remove the bullet*/
}
#container ul li {
background-color: #3C4794;
/*Adds a back-color.*/
width: 150px;
border: 1px solid white;
height: 50px;
line-height: 50px;
text-align: center;
/*Show the text in the middle*/
float: left;
color: white;
/*Font color*/
font-size: 18px;
}
#container ul li:hover {
background-color: #388222;
/*Change the color when hovering the mouse.*/
}
<div id="container">
<ul>
<li>Support</li>
<ul>
<li>Ria</li>
<li>Kezia</li>
<li>Gelia</li>
</ul>
<li>CCD</li>
<li>Scanning</li>
<li>Claims</li>
</ul>
Add CSS styles to dropdown button and try this code.
<head>
<style>
*{
margin:0px;
padding:0px;
}
#container ul{
list-style:none; /*This will remove the bullet*/
}
#container ul li{
background-color:#3C4794; /*Adds a back-color.*/
width:150px;
border:1px solid white;
height:50px;
line-height:50px;
text-align:center; /*Show the text in the middle*/
float:left;
color:white; /*Font color*/
font-size:18px;
}
#container ul li:hover {
background-color:#388222; /*Change the color when hovering the mouse.*/
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
top:50px;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div id="container">
<ul>
<li>
<div class="dropdown">
<ul>
<li>Support</li>
</ul>
<div class="dropdown-content">
<ul>
<li>Ria</li>
<li>Kezia</li>
<li>Gelia</li>
</ul>
</div>
</div>
</li>
<li>CCD</li>
<li>Scanning</li>
<li>Claims</li>
</ul>
</body>
* {
margin: 0px;
padding: 0px;
}
#container ul {
list-style: none;
/*This will remove the bullet*/
}
#container ul li {
background-color: #3C4794;
/*Adds a back-color.*/
width: 150px;
border: 1px solid white;
height: 50px;
line-height: 50px;
text-align: center;
/*Show the text in the middle*/
float: left;
color: white;
/*Font color*/
font-size: 18px;
}
#container ul li:hover {
background-color: #388222;
/*Change the color when hovering the mouse.*/
}
#container ul li ul {
display: none;
z-index: 100;
position: relative;
}
#container ul li:hover ul {
display: block;
}
<div id="container">
<ul>
<li>Support
<ul>
<li>Ria</li>
<li>Kezia</li>
<li>Gelia</li>
</ul>
</li>
<li>CCD</li>
<li>Scanning</li>
<li>Claims</li>
</ul>
</div>
You can do it this way:
* {
margin: 0px;
padding: 0px;
}
#container ul {
list-style: none;
position:absolute;
/*This will remove the bullet*/
}
#container ul li {
background-color: #3C4794;
/*Adds a back-color.*/
width: 150px;
border: 1px solid white;
height: 50px;
line-height: 50px;
text-align: center;
/*Show the text in the middle*/
float: left;
color: white;
/*Font color*/
font-size: 18px;
}
#container ul li:hover {
background-color: #388222;
/*Change the color when hovering the mouse.*/
}
#sub {
display: none;
}
#container ul li:hover #sub {
display: block;
}
<div id="container">
<ul>
<li>Support
<ol id="sub">
<li>Ria</li>
<li>Kezia</li>
<li>Gelia</li>
</ol>
</li>
<li>CCD</li>
<li>Scanning</li>
<li>Claims</li>
</ul>
</div>
JSFiddle
Old JSFiddle (with JS)
You have to add some css property for dropdown. Here you code has been edited
* {
margin: 0px;
padding: 0px;
}
#container ul {
list-style: none;
/*This will remove the bullet*/
}
#container ul li {
background-color: #3C4794;
/*Adds a back-color.*/
width: 150px;
border: 1px solid white;
height: 50px;
line-height: 50px;
text-align: center;
/*Show the text in the middle*/
float: left;
color: white;
/*Font color*/
font-size: 18px;
}
#container ul li:hover {
background-color: #388222;
/*Change the color when hovering the
mouse.*/
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div id="container">
<ul>
<li class="dropdown">Support
<ul class="dropdown-content">
<li>Ria</li>
<li>Kezia</li>
<li>Gelia</li>
</ul>
</li>
<li>CCD</li>
<li>Scanning</li>
<li>Claims</li>
</ul>
here i added some css code in your style and added some clss in your html elements
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
You need to place your submenu in li element and hide it by CSS, then you can write styles for pseudo-class if you want that submenu to appear on hover
So, first that you need, move inner ul element in li, like that:
<li>Support
<ul>
<li>Ria</li>
<li>Kezia</li>
<li>Gelia</li>
</ul>
</li>
Further you need set right styles.
li need to have position: relative, this is let inner ul element take the right position
Inner ul should be hidden by default state and be appearing on hover on parent element;
This styles should help:
ul > li {
position: relative;
}
li > ul {
display: none;
bottom: 0;
left: 0;
}
li:hover > ul {
display: block
}
I can't figure out why the hover state in my css does not work. I've been successful in hiding the sub navigation, but can't get it to reappear on rollover. I Any help would be appreciated. Thanks.
Here's the html:
<nav>
<ul>
<li>writings</li>
<ul>
<li>devotionals</li>
<li>published</li>
<li>articles</li>
</ul>
<li>fundraising</li>
<li>about</li>
<li>contact</li>
</ul>
</nav>
and the css:
.nav {
position: relative;
margin-left: 200px;
margin-top: -50px;
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.nav > ul > li {
float: left;
font-size: 30px;
}
.nav ul::after {
content:'';
display: block;
clear: both;
}
.nav ul li:hover > ul {
display: block;
}
.nav ul ul {
float: left;
display: block;
position: absolute;
top: 90%;
display: none;
line-height: 5px;
}
nav ul li a {
display: inline-block;
color: rgb(92,178,227);
font-family: 'Josefin Sans', sans-serif;
padding: 10px 20px;
text-decoration: none;
}
You need the sub nav inside of the list item:
<li>writings
<ul>
<li>devotionals</li>
<li>published</li>
<li>articles</li>
</ul>
</li>
I made a menu, and I want the dropdown to go centered underneath the 'Fruitsoorten' tab. But now all three of the items are next to each other.
Does anyone know how to fix this? Thanks in advance.
nav {
float: right;
border-radius: 15px;
margin-right: 15%;
}
nav ul {
list-style-type: none;
margin-top: 55px;
background-color: black;
}
nav li {
display: inline-block;
position: relative;
padding: 10px;
}
nav li ul {
display: none;
}
nav li li {
display:
}
nav li:hover ul {
display: block;
}
nav a {
text-decoration: none;
color: white;
font-size: 20px;
}
nav li:hover {
background-color: gray;
}
<nav>
<ul>
<li>Home</li>
<li>
Fruitsoorten
<ul>
<li>Kersen</li>
<li>Appels</li>
<li>Pruimen</li>
</ul>
<li>
<li>Team</li>
<li>Agenda</li>
<li>Foto's</li>
<li>Vacatures</li>
<li>Contact</li>
</ul>
</nav>
You can also try this styles.
http://codepen.io/nehemc/pen/LkyQvq
nav {
float: right;
border-radius: 15px;
margin-right: 15%;
}
nav ul {
list-style-type: none;
margin-top: 55px;
background-color: black;
}
nav li {
display: inline-block;
position: relative;
}
nav a {
text-decoration: none;
color: white;
font-size: 20px;
padding: 10px;
display:block;
}
nav ul ul {
display: none;
position: absolute;
z-index: 999;
left: 0;
margin-top: 0;
}
nav li:hover ul {
display: block;
}
nav li:hover {
background-color: gray;
}
Add following code to reflect
nav ul { margin-top: 0; }
nav li ul {
display: none;
position: absolute;
left: 0;
z-index: 9;
}
Also clear your HTML code with proper closing of </li>
To affect your inline-block styling to main ul only,
Do this:
nav>ul>li {
display: inline-block;
position: relative;
padding: 10px;
}
instead of
nav li { display: inline-block; position: relative; padding: 10px; }
nav {
float: right;
border-radius: 15px;
margin-right: 15%;
}
nav ul {
list-style-type: none;
margin-top: 55px;
background-color: black;
}
nav>ul>li {
display: inline-block;
position: relative;
padding: 10px;
}
nav li ul {
display: none;
}
nav li li {
display:
}
nav li:hover ul {
display: block;
}
nav a {
text-decoration: none;
color: white;
font-size: 20px;
}
nav li:hover {
background-color: gray;
}
<nav>
<ul>
<li>Home
</li>
<li>Fruitsoorten
<ul>
<li>Kersen
</li>
<li>Appels
</li>
<li>Pruimen
</li>
</ul>
</li>
<li>Team
</li>
<li>Agenda
</li>
<li>Foto's
</li>
<li>Vacatures
</li>
<li>Contact
</li>
</ul>
</nav>
is that what you want?
nav {
float: right;
border-radius: 15px;
margin-right: 15%;
}
nav ul {
list-style-type: none;
background-color: black;
}
nav li {
display: inline-block;
position: relative;
padding: 10px;
}
nav li ul {
display: none;
}
nav li li {
display:
}
nav li:hover ul {
display: block;
position: absolute;
left: 0;
padding:0;
}
nav a {
text-decoration: none;
color: white;
font-size: 20px;
}
nav li:hover {
background-color: gray;
}
ul.inner li{width:83%}
<nav>
<ul>
<li>Home</li>
<li>Fruitsoorten
<ul class="inner">
<li>Kersen</li>
<li>Appels</li>
<li>Pruimen</li>
</ul>
<li>
<li>Team</li>
<li>Agenda
<li>Foto's</li>
<li>Vacatures</li>
<li>Contact</li>
</ul>
</nav>
I have a dropdown below ive creaeted, but im having troulbe centering the the menu. Ive tried to put <center> tags around it and also set the ul to margin auto 0 but its not working. Is there anything im missing?
<style type="text/css">
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #1e7c9a;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover {
background: #3b3b3b;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #3b3b3b; }
li:hover li a:hover {
background: #1e7c9a;
}
</style>
</head>
<body>
<ul id="menu">
<li>Home</li>
<li>Portfolio
<ul>
<li>Web Design</li>
<li>Graphic Design</li>
<li>Logo Design</li>
<li>Blog Design</li>
</ul>
</li>
<li>Projects
<ul>
<li>This is a project</li>
<li>So is this</li>
<li>and this</li>
<li>don't forget this too</li>
</ul>
</li>
<li>Contact
<ul>
<li>Support</li>
<li>Quote</li>
<li>General Enquiry</li>
</ul>
</li>
</ul>
I went ahead and put it on jsfiddle Here
I assume that you actually want to center the list items rather than just the menu.
JSfiddle Demo
Revised CSS
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0 auto;
padding: 0;
list-style: none;
text-align: center; /* added this */
font-size:0; /* whitespace adjustment */
}
ul li {
font-size:1rem; /* font-size reset */
display: block;
position: relative;
/* float: left; removed this */
display: inline-block;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #1e7c9a;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover {
background: #3b3b3b;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #3b3b3b; }
li:hover li a:hover {
background: #1e7c9a;
}
Do you want the whole menu centered? If so, it helps to stick that all within something, like a table or div
so I added the following to your code:
css
#navbar {
width: 50%;
margin: 0 auto;
}
html
<div id="navbar">
all your ul/li's
</div>
all together
<style type="text/css">
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #1e7c9a;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover {
background: #3b3b3b;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #3b3b3b; }
li:hover li a:hover {
background: #1e7c9a;
}
#navbar {
width: 50%;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="navbar">
<ul id="menu">
<li>Home</li>
<li>Portfolio
<ul>
<li>Web Design</li>
<li>Graphic Design</li>
<li>Logo Design</li>
<li>Blog Design</li>
</ul>
</li>
<li>Projects
<ul>
<li>This is a project</li>
<li>So is this</li>
<li>and this</li>
<li>don't forget this too</li>
</ul>
</li>
<li>Contact
<ul>
<li>Support</li>
<li>Quote</li>
<li>General Enquiry</li>
</ul>
</li>
</ul>
</div>
Here is a JSFiddle that demo's what I think you're after: JSFiddle
Basically, I changed your parent <li> to display: inline-block and removed the float: left property. To center those parent nav items, I applied text-align: center to the parent <ul>. Then I changed the nested dropdowns ul ul to be text-align: left and then set those <li>'s to display: block.
Final CSS (changed some selectors to target differently):
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
text-align: center; /* added this */
}
ul > li {
display: inline-block; /* changed from display: block */
position: relative;
/*float: left;*/
}
ul ul { text-align: left; } /* added this */
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #1e7c9a;
margin-left: 1px;
white-space: nowrap;
}
ul ul li { display: block; } /* added this */
ul li a:hover {
background: #3b3b3b;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #3b3b3b; }
li:hover li a:hover {
background: #1e7c9a;
}
I'm trying to make a basic dropdown menu with css and html. However when I hover on the li that has to drop down, my whole menu comes down with it.
This is my code:
<nav class="icons">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
<li>Account
<ul id="login">
<li>Change password</li>
<li>Update details</li>
<li>Logout</li>
</ul>
</li>
</ul>
</nav>
And the CSS
nav {
height: 70px;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
ul {
margin: 0;
padding: 0;
list-style: none;
margin-left: 5%;
}
ul li {
display: inline-block;
width: 15%;
text-align: center;
line-height: 70px;
}
ul li a {
text-decoration: none;
color: #fff;
font-size: 2em;
display: block;
}
ul li a:hover {
border-bottom: solid black 1px;
}
ul#login{
margin: 0;
padding: 0;
list-style: none;
}
ul#login li {
display: block;
width: 30%;
text-align: center;
line-height: 70px;
}
ul#login li a {
text-decoration: none;
color: #fff;
font-size: 2em;
display: block;
}
ul#login li ul li{
width: 20%;
}
ul#login li ul li a {
text-decoration: none;
color: #fff;
font-size: 0.7em;
display: block;
}
ul#login li a:hover {
border-bottom: solid black 1px;
}
I know it's a lot of CSS for such a basic menu but I don't know how to make it more compact.
Can someone please tell me what I'm doing wrong with the dropdown menu?
Add this css
ul li{
position:relative;
}
#login{
position:absolute;
top:71px;
left:0;
}
FIDDLE