I am trying to create a dropdown menu with CSS. When I hover on menu item, it doesn't work as expected. It does not show any categories below that item, I don't know why.
I do not want to use JavaScript, I want to use only pure css.
https://jsfiddle.net/3dovsL0g/
*{
margin:0px;
padding:0px;
}
#container ul{
list-style:none;
}
#container ul li{
background-color:#3c3e94;
width:150px;
border:1px solid white;
height:50px;
line-height: 50px;
text-align:center;
float:left;
color:white;
font-size:18px;
position:relative;
}
#container ul ul{
display:none;
}
#container ul li:hover{
background-color:#388222;
}
#container ul li:hover > ul{
display:block;
}
#container ul ul ul{
transform:translateX(100%);
top:0px;
position:absolute;
}
h4{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
<div id="container">
<ul>
<li><h4>Home</h4></li>
<li><h4>About</h4></li>
<li><h4>Entertainment</h4></li>
<ul>
<li><h4>Hollywood</h4></li>
<li><h4>Jollywood</h4></li>
<ul>
<li><h4>steve</h4></li>
<li><h4>jobs</h4></li>
<li><h4>john</h4></li>
</ul>
<li><h4>Bollywood</h4></li>
</ul>
<li><h4>Contact</h4></li>
</ul>
</div>
You'll need to place sub-menus inside the hovering elements, so that they are their child elements and then simply use class to target them. Here try this.
.hasSub:hover .sub-menu{
display: block !important;
}
.hasSub1:hover .sub-menu1{
display: block !important;
}
*{
margin:0px;
padding:0px;
}
#container ul{
list-style:none;
}
#container ul li{
background-color:#3c3e94;
width:150px;
border:1px solid white;
height:50px;
line-height: :50px;
text-align:center;
float:left;
color:white;
font-size:18px;
position:relative;
}
#container ul ul{
display:none;
}
#container ul li:hover{
background-color:#388222;
}
#container ul ul ul{
transform:translateX(100%);
top:0px;
position:absolute;
}
h4{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
.hasSub:hover .sub-menu{
display: block !important;
}
.hasSub1:hover .sub-menu1{
display: block !important;
}
<div id="container">
<ul>
<li><h4>Home</h4></li>
<li><h4>About</h4></li>
<li class="hasSub"><h4>Entertainment</h4>
<ul class="sub-menu">
<li><h4>Hollywood</h4></li>
<li class="hasSub1"><h4>Jollywood</h4>
<ul class="sub-menu1">
<li><h4>steve</h4></li>
<li><h4>jobs</h4></li>
<li><h4>john</h4></li>
</ul>
</li>
<li><h4>Bollywood</h4></li>
</ul>
</li>
<li><h4>Contact</h4></li>
</ul>
</div>
and the fiddle: https://jsfiddle.net/kpdwf9th/1/
Use this code , and change it menu with dropDown
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
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);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dropdown-content {
display: block;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul>
<li>Home</li>
<li>News</li>
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>
You need to nest your <ul> tags within each <li> element. Semantically, sub items should be children to their parents.
.nav { /* style nav bar */
display: flex;
color: #fff;
list-style: none;
padding: 0;
}
.nav li { /* style ALL li tags */
position: relative;
padding: 12px;
background-color: #333;
}
.nav li > ul { /* hide all ul tags at first */
display: none;
list-style: none;
padding: 0;
position: absolute;
z-index: 1;
}
.nav li:hover > ul { /* show ul tags when parent li is hovering */
display: block;
}
.nav li > ul > li > ul { /* move 3rd layer ul to the right */
left: 100%;
top: 0;
}
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Entertainment
<ul>
<li>Hollywood</li>
<li>Jollywood
<ul>
<li>steve</li>
<li>jobs</li>
<li>john</li>
</ul>
</li>
<li>Bollywood</li>
</ul>
</li>
<li>Contact</li>
</ul>
Related
here is the HTML:
http://codepen.io/anon/pen/epvNRG
<select>
<red>
</select>
.
^ is what i tried to use but it doesnt look as good! thanks
What I need:
A dropdown menu on hover. When cursor is on 'glossary' have a dropdown menu below glossary that can say anything! Thanks! Please make it the same size as the glossary box! Aparrt from that, a little transparancy would be cool too!
Thanks!
My suggestion to you would be to either learn some bootstrap becasue it makes a lot of the css coding and such a whole lot easier, or do a quick google search before asking on the form. Anyways:
html:
<html>
<head>
<meta charset="UTF-8">
<title>Watts</title>
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<ul>
<li class="highlight">Home</li>
<li>References</li>
<li>Glossary</li>
<li>
Products ▾
<ul class="dropdown">
<li>Laptops</li>
<li>Monitors</li>
<li>Printers</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
CSS:
body
{
margin: 0;
padding: 0;
background-color: #ccc;
} /* End of body rule */
ul
{
list-style: none;
background-color: #444; /* A very dark shade of grey as a background colour. */
text-align: center;
margin: 0;
padding: 0;
} /* End of ul rule */
li {
width: 120px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
} /* End of li rule */
a
{
color: #fff; /* A white colour. */
text-decoration: none;
display: block;
transition: 0.65s;
} /* End of a rule */
a:hover
{
background-color: #005f5f; /* rgb(0, 95, 95) - A colour similar to teal. */
} /* End of a:hover rule */
.highlight a /* Makes the block of the navigation page that you are on white on the navigation bar. */
{
background-color: #fff; /* A white background colour. */
cursor: default;
color: #444
} /* End of .highlight a rule */
ul{
padding: 0;
list-style: none;
background: #f2f2f2;
}
ul li{
display: inline-block;
position: relative;
line-height: 21px;
text-align: left;
}
ul li a{
display: block;
padding: 8px 25px;
color: #333;
text-decoration: none;
}
ul li a:hover{
color: #fff;
background: #939393;
}
ul li ul.dropdown{
min-width: 125px; /* Set width of the dropdown */
background: #f2f2f2;
display: none;
position: absolute;
z-index: 999;
left: 0;
}
ul li:hover ul.dropdown{
display: block; /* Display the dropdown */
}
ul li ul.dropdown li{
display: block;
}
You can try this pure HTML/CSS Menu:
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:before,:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
nav { width:100%; background:#000; display:inline-block;}
nav ul { margin:0; padding:0;}
nav ul li { margin:0; padding:0; list-style:none; display:inline-block; cursor:default;}
nav ul li a { color:#fff; padding:10px; font:15px 'Roboto', Arial, Helvetica, sans-serif; text-decoration:none; display:inline-block;}
nav > ul > li { float:left;}
nav ul li:hover > a { color:#fff; background:#005f5f;}
nav ul li a.active { color:#fff; background:#3b4747;}
nav ul ul { width:auto; min-width:200px; display:none; background:#131313; position:absolute; z-index:555; text-align:left;}
nav li:hover > ul { display:block;}
nav ul ul ul { left:100%; top:0;}
nav ul ul li { width:100%; display:block; float:none;}
nav ul ul a { width:100%; padding:8px 15px; display:block; color:#fff; border-bottom:1px solid #111;}
nav ul ul li:hover > a { background:#005f5f; color:#fff;}
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li><a>Services</a>
<ul>
<li>Sample Menu</li>
<li>Sample Menu</li>
<li>Sample Menu</li>
<li>Sample Menu</li>
</ul>
</li>
<li>Blog</li>
<li><a>Support</a>
<ul>
<li>Sample Menu</li>
<li>Sample Menu</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</nav>
I'm making a navigation menu.
I got it all working now but when the sub menu pops up all the html is distorting.
All the div's below are going downwards.
Is there somebody who can help me?
Here is the html with CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Show Hide Dropdown Using CSS</title>
<style type="text/css">
#body
{
width: 1200px;
}
ul{
padding: 0;
list-style: none;
}
ul li{
float: left;
width: 100px;
text-align: center;
}
ul li a{
display: block;
padding: 5px 10px;
color: #333;
background: #f2f2f2;
text-decoration: none;
}
ul li a:hover{
color: #fff;
background: #939393;
}
ul li ul{
display: none;
}
ul li:hover ul{
display: block; /* display the dropdown */
}
#uldiv
{
width:1200px;
float:left;
}
#secdiv
{
width:1200px;
float:left;
}
</style>
</head>
<body>
<div id="uldiv">
<ul>
<li>Home</li>
<li>About</li>
<li>
Products
<ul>
<li>Laptops</li>
<li>Monitors</li>
<li>Printers</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
<div id="secdiv">
here some text whish will not move while the menu is popping up.
</div>
</body>
</html>
You need to add :
ul li:hover ul {
display: block; /* display the dropdown */
position:absolute; /* <--- this line */
}
To take the submenu out of the document flow and doesn't push the below content down.
You also need to add :
ul li ul li{
float:none;
}
So that the sub menu items don't display on the same line and stack below each other.
DEMO
Full code :
#body {
width: 1200px;
}
ul {
padding: 0;
list-style: none;
}
ul li {
float: left;
width: 100px;
text-align: center;
}
ul li a {
display: block;
padding: 5px 10px;
color: #333;
background: #f2f2f2;
text-decoration: none;
}
ul li a:hover {
color: #fff;
background: #939393;
}
ul li ul {
display: none;
}
ul li:hover ul {
display: block;
/* display the dropdown */
position:absolute;
}
ul li ul li{
float:none;
}
#uldiv {
width:1200px;
float:left;
}
#secdiv {
width:1200px;
float:left;
}
<div id="uldiv">
<ul>
<li>Home
</li>
<li>About
</li>
<li> Products
<ul>
<li>Laptops
</li>
<li>Monitors
</li>
<li>Printers
</li>
</ul>
</li>
<li>Contact
</li>
</ul>
</div>
<div id="secdiv">here some text whish will not move while the menu is popping up.</div>
Give position:absolute to the ul
Fiddle
ul li ul {
position:absolute;
display: none;
}
I have been trying to add a drop down menu to this code but always seem to get turned around. I just want a basic look to the subnav with a simple rollover effect. Every time i try different code it uses home image in the drop down menu and will not disappear when it is not hovered over. Ideas?
HTML:
<ul class="navbar">
<li class="navbar1">Home
<ul class="subnav">
<li>Menu 1 </li>
<li>Menu 2 </li>
</ul>
</li>
</ul>
CSS:
ul.navbar {
width:1000px;
list-style:none;
height:40px;
}
ul.navbar li {
display:inline;
}
ul.navbar li a {
height:40px;
float:left;
text-indent:-9999px;
}
/* Home 0 */
ul.navbar li.navbar1 a {
width:86px;
background:url(../pelican%20outfitters/navbar2.fw.png)
no-repeat 0 0;
}
ul.navbar li.navbar1 a:hover {
background-position:0 -40px;
}
ul.navbar li.navbar1 a.current {
background-position:0 -80px;
}
HTML
<nav>
<ul class="navbar">
<li class="navbar1">Home
<ul class="subnav">
<li>Menu 1
</li>
<li>Menu 2
</li>
</ul>
</li>
</ul>
</nav>
CSS
nav {
margin: 20px auto;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul li
{
width:100px;
}
ul li ul li
{ width:200px;
}
nav ul {
font-size: 25px;
background: white;
padding: 0px;
border-radius: 10px;
border-style: solid;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content:"";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: black;
position:relative;
z-index:1;
}
nav ul li:hover a {
color: white;
position:relative;
z-index:1;
}
nav ul li a {
display: block;
padding: 15px 20px;
color: black;
text-decoration: none;
}
nav ul ul {
background: #000000;
border-radius: 0px 0px 10px 10px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
}
nav ul ul li a {
padding: 15px 20px;
}
nav ul ul li a:hover {
background: #2E2E2E;
border-radius: 10px;
}
Output:
Working Fiddle
You should delete the text-indent:-9999px and add this to your css
Delete row:
ul.navbar li a { text-indent:-9999px }
Css:
.navbar li ul {display:none;}
.navbar li:hover ul {display:block;}
Than you have a basic navbar with hidden subnavs.
From here you can try it with your image.
The demo is your code with the new code..
DEMO
More like you want is, dont delete the css.. but only add those 2 lines and this 1:
.navbar li:hover li a{ text-indent:1px; background:white; }
DEMO 2 (without your img (don't know what it is)).
Latest update after the fiddle comment:
You should specify your html and css.. a just added a class to the first link class="home" and to accomodations class="accomodations"
And changed it in the css..
/* Home */
ul.navbar li.navbar1 a.home {
width:86px;
background:url(http://s12.postimg.org/rszejjscd/navbar2_fw.png)
no-repeat 0 0;
}
/* Accomodations */
ul.navbar li.navbar2 a.accomodations {
width:220px;
background: url(http://s12.postimg.org/rszejjscd/navbar2_fw.png) no-repeat -86px 0;
}
DEMO 3
I've tried making horizontal drop down navigation bars following tutorials, however they are never centered and I can't figure out how to center them. I tried going in the opposite direction and centering my navigation bar first, and then attempting to make it a drop down menu, though this seems to throw everything off. This is the code I have.
EDIT: The problem I am having is that the submenu is displayed when the page is loaded, along with a bullet point, which I'm sure can be fixed by setting the list-style to none, however I'm not sure where in the CSS this should be.
I'm trying to create a menu similar to THIS. I understand this uses joomla and I am not.
#header {
height: 100px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#content {
max-width: 700px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
#footer {
height: 85px;
padding-top: 40px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#menu {
margin: 0 auto;
display: inline-block;
list-style: none;
padding: 0;
border-top: 1 solid #ccc;
border-left: 1 solid #ccc;
border-bottom: 1 solid #ccc;
}
#menu li {
float: left;
}
#menu li a {
display: block;
padding: 10px 10px;
text-decoration: none;
font-weight: bold;
}
#menu li a:hover {
color: #c00;
}
<ul id="menu">
<li>Home
</li>
<li>Kandi
<ul>
<li>Claim Kandi
</li>
</li>
<li>Events
</li>
<li>Artists
</li>
<li>Community
</li>
<li>Merchandise
</li>
</ul>
Add this CSS:
#menu, #menu ul {
margin:0 auto;
padding:0;
}
#menu li {
float: left;
position: relative;
list-style: none;
}
#menu > li:hover > ul {
display: block;
}
#menu > li > ul {
display: none;
position: absolute;
}
#menu li a {
white-space: nowrap;
}
http://jsfiddle.net/tcKvH/1/
use this css
#menu{
position:absolute;
top:150px;
left:8%;
padding:0;
margin:0;
}
#menu ul{
padding:0;
margin:0;
line-height:30px;
}
#menu li{
position:relative;
float:left;
list-style:none;
background:rgba(0,0,0,1);
border-radius:5px;
}
#menu ul ul{
position:absolute;
visibility:hidden;
padding:0;
margin:0;
top:30px;
}
#menu ul li a{
text-align:center;
font:"Arial Black", Arial;
font-size:24px;
color:rgba(255,255,255,9);
width:150px;
height:30px;
display:block;
text-decoration:none;
}
#menu ul li:hover{
background-color:rgba(128,128,128,1);
text-decoration:none;
}
#menu ul li:hover ul{
visibility:visible;
z-index:1;
}
#menu ul li:hover ul li a{
background:rgba(0,0,0,9);
z-index:1;
border-bottom:1px solid rgba(160,160,164,1);
opacity:0.9;
text-decoration:none;
border-radius:5px;
}
#menu ul li ul li:hover{
background:rgba(128,128,128,1);
opacity:0.8;
text-decoration:underline;
}
with this html code
<div id="menu">
<ul>
<li>Home</li></ul>
<ul>
<li>Video <!--This is in main menu-->
<ul>
<li>Technology</li> <!--This is in drop downmenu-->
<li>Tutorial</li> <!--This is in drop downmenu-->
</ul>
</li>
</ul>
http://i.stack.imgur.com/OP0kc.jpg
the navigation menu i have created using the CSS and Html code is not working correctly.
The alignment of the navigation menu is not perfect i want in this way : http://i.stack.imgur.com/h4oPK.jpg
I want to convert this to CSS..
Please help
<style>
/* Targeting both first and second level menus */
#nav li {
list-style:none;
float: left;
position: relative;
}
#nav li a {
display: block;
padding: 8px 12px;
text-decoration: none;
}
#nav li a:hover {
background-color:red;
color:#FFF;
opacity:1;
}
/* Targeting the first level menu */
#nav {
top:150px;
min-width:850px;
background:#fff;
opacity:0.5;
display: block;
height: 34px;
z-index: 100;
position: absolute;
}
#nav > li > a {
}
/* Targeting the second level menu */
#nav li ul {
color: #333;
display: none;
position: absolute;
width:850px;
}
#nav li ul li {
display: inline;
}
#nav li ul li a {
background: #fff;
border: none;
line-height: 34px;
margin: 0;
padding: 0 8px 0 10px;
}
#nav li ul li a:hover {
background-color:red;
color:#FFF;
opacity:1;
}
/* Third level menu */
#nav li ul li ul{
top: 0;
}
ul.child {
background-color:#FFF;
}
/* A class of current will be added via jQuery */
#nav li.current > a {
background: #f7f7f7;
float:left;
}
/* CSS fallback */
#nav li:hover > ul.child {
left:0;
top:34px;
display:inline;
position:absolute;
text-align:left;
}
#nav li:hover > ul.grandchild {
display:block;
}
</style>
<ul id="nav">
<li>Home</li>
<li>
Products
<ul class="child">
<li>Hard Drives</li>
<li>Monitors</li>
<li>Speakers
<ul class="child">
<li>10 watt</li>
<li>20 watt</li>
<li>30 watt</li>
</ul>
</li>
<li>Random Equipment</li>
</ul>
</li>
<li>
Services
<ul class="child">
<li>Repairs</li>
<li>Installations</li>
<li>Setups</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
Fixed. I think this is what you want http://dabblet.com/gist/2792978
Simply remove position: relative from #nav li and give it to #nav.