I created a navigation bar. It contains li elements and some of the li elements contains drop down menu. On hovering the specific li element the drop down menu will become visible. The problem is that the drop down menu does not appear under its parent li element. Instead all of them appear in the same position (under the logo) away from their parent elements. What am i missing?
#navigation {
height: 50px;
width: 95%;
margin: auto;
box-shadow: 0px 0 1px 1px #ddd;
padding: 10px;
background-color: #fff;
}
#navigation #nav {
list-style: none;
margin: 0;
padding: 0;
}
#navigation #nav li.nav-block,
#navigation #nav li#logo-container {
display: inline;
margin-left: 10px;
padding: 20px 0px;
width: 50px;
text-align: center;
height: 40px;
line-height: 50px;
font-family: sans-serif;
margin: 2px 0px;
}
#navigation #nav li a.nav-button,
#navigation #nav li a#logo {
text-decoration: none;
color: #333;
padding: 15px 40px;
}
#navigation #nav li.nav-block:hover {
background-color: skyblue;
}
#navigation #nav li.nav-block:hover a.nav-button {
color: #fff;
}
a.category {
cursor: default;
}
#logo-container {
margin-right: 10px;
}
#logo {
font-family: sans-serif;
font-weight: bold;
color: #333;
}
#logo-span {
color: skyblue;
}
.nav-dropdown-menu {
display: none;
z-index: 11;
position: absolute;
width: 200px;
min-height: 50px;
}
.nav-dropdown-menu>ul {
display: block;
}
.nav-dropdown-menu>ul>.dropdown-li {
display: block !important;
background-color: #fff;
border: 1px solid #fff;
box-shadow: 0 0 1px 1px #ddd;
width: 100%;
}
#navigation #nav li.nav-block:hover>.nav-dropdown-menu {
display: block;
}
.nav-dropdown-menu>ul>.dropdown-li a {
text-decoration: none;
padding: 10px 50px;
color: #333;
}
.nav-dropdown-menu>ul>.dropdown-li:hover {
background-color: #333;
}
.nav-dropdown-menu>ul>.dropdown-li:hover a {
color: #fff;
}
<div id="navigation">
<ul id="nav">
<li id="logo-container"><a id="logo">My <span id="logo-span">Logo</span></a></li>
<li class='nav-block'><a class='nav-button category'>Handy</a>
<div class='nav-dropdown-menu'>
<ul>
<li class='dropdown-li'><a href='home.php?brand_id=1&cat_id=2'>Dell</a></li>
<li class='dropdown-li'><a href='home.php?brand_id=4&cat_id=2'>Samsung</a></li>
</ul>
</div>
<li class='nav-block'><a class='nav-button category'>Tablet</a>
<div class='nav-dropdown-menu'>
<ul>
<li class='dropdown-li'><a href='home.php?brand_id=2&cat_id=9'>Sony</a></li>
</ul>
</div>
<li class="nav-block"><a class="nav-button" href="registration.php">Sign Up</a></li>
<li class="nav-block"><a class="nav-button" href="main_login.php">Login</a></li>
</ul>
</div>
Have a look into this. Give position;relative to your li and set left and right of your nav-dropdown-menu
#navigation {
height: 50px;
width: 95%;
margin: auto;
box-shadow: 0px 0 1px 1px #ddd;
padding: 10px;
background-color: #fff;
}
#navigation #nav {
list-style: none;
margin: 0;
padding: 0;
}
#navigation #nav li.nav-block,
#navigation #nav li#logo-container {
display: inline;
margin-left: 10px;
padding: 20px 0px;
width: 50px;
text-align: center;
height: 40px;
line-height: 50px;
font-family: sans-serif;
margin: 2px 0px;
}
#navigation #nav li a.nav-button,
#navigation #nav li a#logo {
text-decoration: none;
color: #333;
padding: 15px 40px;
}
#navigation #nav li.nav-block:hover {
background-color: skyblue;
}
#navigation #nav li.nav-block:hover a.nav-button {
color: #fff;
}
a.category {
cursor: default;
}
#logo-container {
margin-right: 10px;
}
#logo {
font-family: sans-serif;
font-weight: bold;
color: #333;
}
#logo-span {
color: skyblue;
}
.nav-block {
position: relative;
}
.nav-dropdown-menu {
display: none;
z-index: 11;
position: absolute;
left: -39px;
right: 0;
width: 200px;
min-height: 50px;
}
.nav-dropdown-menu>ul {
display: block;
}
.nav-dropdown-menu>ul>.dropdown-li {
display: block !important;
background-color: #fff;
border: 1px solid #fff;
box-shadow: 0 0 1px 1px #ddd;
width: 100%;
}
#navigation #nav li.nav-block:hover>.nav-dropdown-menu {
display: block;
}
.nav-dropdown-menu>ul>.dropdown-li a {
text-decoration: none;
padding: 10px 50px;
color: #333;
}
.nav-dropdown-menu>ul>.dropdown-li:hover {
background-color: #333;
}
.nav-dropdown-menu>ul>.dropdown-li:hover a {
color: #fff;
}
<div id="navigation">
<ul id="nav">
<li id="logo-container"><a id="logo">My <span id="logo-span">Logo</span></a></li>
<li class='nav-block'><a class='nav-button category'>Handy</a>
<div class='nav-dropdown-menu'>
<ul>
<li class='dropdown-li'><a href='home.php?brand_id=1&cat_id=2'>Dell</a></li>
<li class='dropdown-li'><a href='home.php?brand_id=4&cat_id=2'>Samsung</a></li>
</ul>
</div>
<li class='nav-block'><a class='nav-button category'>Tablet</a>
<div class='nav-dropdown-menu'>
<ul>
<li class='dropdown-li'><a href='home.php?brand_id=2&cat_id=9'>Sony</a></li>
</ul>
</div>
<li class="nav-block"><a class="nav-button" href="registration.php">Sign Up</a></li>
<li class="nav-block"><a class="nav-button" href="main_login.php">Login</a></li>
</ul>
</div>
Related
I have made a css dropdown menu out of only css and html. My problem is when I hover over the nav bar- my page content moves to the right. Then when I hover over the dropdown menu, the page content moves back to the left. I have not found anything that can help me so far. I have attached the relevant code below.
Please help me, and thank you
* {
padding: 0;
margin: 0;
}
nav {
background-color: #cccccc;
width: 100%;
height: 80px;
}
ul {
float: left;
}
ul li {
position: relative;
list-style: none;
float: left;
line-height: 80px;
font-size: 20px;
color: #c92d39;
}
ul li a{
display: block;
text-decoration: none;
color: #c92d39;
padding: 0 30px;
}
ul li a:hover {
color: black;
border-bottom: 1px solid #c92d39;
}
ul li:hover ul {
display: block;
}
ul li ul {
display: none;
position: absolute;
background-color: #e5e5e5;
border-radius: 0 0 3px 3px;
}
ul li ul li a:hover {
background-color: #b2b2b2;
color: #c92d39;
border-bottom: none;
}
ul li ul li {
font-size: 15px;
width: 100%;
text-align: center;
}
h1 {
color: #c92d39;
padding: 30px;
}
h2 {
color: #c92d39;
padding: 5px 30px 10px 30px;
}
p {
padding: 0px 30px;
}
a {
text-decoration: none;
}
#logo {
background-color: #cccccc;
padding: 0 51px 0 75px;
font-size: 30px;
font-weight: bold;
}
.page-body {
background-color: #e5e5e5;
}
.wrapper {
margin: 0 300px 0 300px;
padding-left: 0px;
height: 100%;
background-color: white;
}
.footer {
background-color: #cccccc;
width: 100%;
height: 80px;
}
.empty_box {
height: 1000px;
width: 100%;
}
#contacts {
margin: 0px 0px 0px 60px;
padding: 0 20px;
border-top: 1px solid #cccccc;
}
#contacts:hover {
border-top: 1px solid #c92d39;
}
#copyright {
font-size: 10px;
float: right;
padding: 0px 30px 0 770px;
}
#copyright:hover {
background-color: #cccccc;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Basecode</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav>
<ul>
<li id="logo">Cultural Asia</li>
</ul>
<ul>
<li>Home</li>
<li>
Attractions
<ul>
<li>attraction1</li>
<li>attraction2</li>
<li>attraction3</li>
</ul>
</li>
<li>
Packages
<ul>
<li>package1</li>
<li>package2</li>
<li>package3</li>
</ul>
</li>
<li>Contacts</li>
</ul>
</nav>
<div class="page-body">
<div class="wrapper">
<p>hi</p>
<div class="empty_box"></div>
</div>
</div>
<div class="footer">
<ul>
<li>Contact Details</li>
<li id="copyright">Copyright Lachlan Dunn</li>
</ul>
</div>
</body>
</html>
You need to clear your floats.
.page-body {
…
clear: left;
}
Demo
* {
padding: 0;
margin: 0;
}
nav {
background-color: #cccccc;
width: 100%;
height: 80px;
}
ul {
float: left;
}
ul li {
position: relative;
list-style: none;
float: left;
line-height: 80px;
font-size: 20px;
color: #c92d39;
}
ul li a {
display: block;
text-decoration: none;
color: #c92d39;
padding: 0 30px;
}
ul li a:hover {
color: black;
border-bottom: 1px solid #c92d39;
}
ul li:hover ul {
display: block;
}
ul li ul {
display: none;
position: absolute;
background-color: #e5e5e5;
border-radius: 0 0 3px 3px;
}
ul li ul li a:hover {
background-color: #b2b2b2;
color: #c92d39;
border-bottom: none;
}
ul li ul li {
font-size: 15px;
width: 100%;
text-align: center;
}
h1 {
color: #c92d39;
padding: 30px;
}
h2 {
color: #c92d39;
padding: 5px 30px 10px 30px;
}
p {
padding: 0px 30px;
}
a {
text-decoration: none;
}
#logo {
background-color: #cccccc;
padding: 0 51px 0 75px;
font-size: 30px;
font-weight: bold;
}
.page-body {
background-color: #e5e5e5;
clear: left;
}
.wrapper {
margin: 0 300px 0 300px;
padding-left: 0px;
height: 100%;
background-color: white;
}
.footer {
background-color: #cccccc;
width: 100%;
height: 80px;
}
.empty_box {
height: 1000px;
width: 100%;
}
#contacts {
margin: 0px 0px 0px 60px;
padding: 0 20px;
border-top: 1px solid #cccccc;
}
#contacts:hover {
border-top: 1px solid #c92d39;
}
#copyright {
font-size: 10px;
float: right;
padding: 0px 30px 0 770px;
}
#copyright:hover {
background-color: #cccccc;
}
<nav>
<ul>
<li id="logo">Cultural Asia</li>
</ul>
<ul>
<li>Home</li>
<li>
Attractions
<ul>
<li>attraction1</li>
<li>attraction2</li>
<li>attraction3</li>
</ul>
</li>
<li>
Packages
<ul>
<li>package1</li>
<li>package2</li>
<li>package3</li>
</ul>
</li>
<li>Contacts</li>
</ul>
</nav>
<div class="page-body">
<div class="wrapper">
<p>hi</p>
<div class="empty_box"></div>
</div>
</div>
<div class="footer">
<ul>
<li>Contact Details</li>
<li id="copyright">Copyright Lachlan Dunn</li>
</ul>
</div>
The problem is that you add a bottom-border to element which pushes paragraph out of its position. do
ul li a:hover {
color: black;
}
instead of
ul li a:hover {
color: black;
border-bottom: 1px solid #c92d39;
}
or if you really want that border check out css box-sizing property documentation
I'm having trouble writing a code for a simple drop down menu but cant understand what I'm doing wrong still new to coding. Whenever I bring my cursor over the respective dropdown li tag the hover color effect is there but nothing comes down. In a previous attempt when the code was a a little different the list id appeared but it was in an inline manner and was align horizontally not vertically plz help.
#navbar {
background-color: #9C9C9C;
margin: 0px 200px 0px 200px;
height: 30px;
overflow: hidden;
}
#nav {
padding: 0px;
margin: 0px;
font-family: arial;
}
#main {
display: inline;
}
a {
display: block;
text-align: center;
float: left;
width: 100px;
padding: 3px;
line-height: 25px;
text-decoration: none;
color: white;
margin-top: 0px;
}
a:hover {
background-color: #d3d3d3;
color: black;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display block;
}
#searchbar {
margin: 5px 5px 0px 0px;
float: right;
}
<div id="navbar">
<div>
<ul id="nav">
<li id="main">Home</li>
<li id="main">Products</li>
<li id="main">More
<ul class="c">
<li class="B"><a id="A">Article1</a></li>
<li class="B"><a id="A">Article2</a></li>
<li class="B"><a id="A">Article3</a></li>
<li class="B"><a id="A">Article4</a></li>
</ul>
</li>
<li id="main">About US</li>
</ul>
</div>
<div id="searchbar"><input type="text" name="search" /><button id="button">GO</button></div>
</div>
First of all, you have id="main" applied to multiple elements. id is meant to be unique and applied to only one element.
Second, your hover effect was just a little incomplete. See my changes below.
#navbar {
background-color: #9C9C9C;
margin: 0px 200px 0px 200px;
height: 30px;
/*overflow: hidden; don't do this if you want dropdowns */
}
#nav {
padding: 0px;
margin: 0px;
font-family: arial;
}
#main {
display: inline;
}
#nav>li>a {
display: block;
text-align: center;
float: left;
width: 100px;
padding: 3px;
line-height: 25px;
text-decoration: none;
color: white;
margin-top: 0px;
}
#nav>li>a:hover {
background-color: #d3d3d3;
color: black;
}
#nav>li {
position: relative;
display: inline-block;
}
#nav>li ul {
display: none;
position: absolute;
}
#nav>li:hover ul {
display: block;
bottom: -80px;
padding: 10px;
left: 0;
min-width: 100px;
}
#searchbar {
margin: 5px 5px 0px 0px;
float: right;
}
<div id="navbar">
<div>
<ul id="nav">
<li>Home</li>
<li>Products</li>
<li>More
<ul class="c">
<li class="B"><a id="A">Article1</a></li>
<li class="B"><a id="A">Article2</a></li>
<li class="B"><a id="A">Article3</a></li>
<li class="B"><a id="A">Article4</a></li>
</ul>
</li>
<li>About US</li>
</ul>
</div>
<div id="searchbar"><input type="text" name="search" /><button id="button">GO</button></div>
</div>
you need to target ul li ul which you will show and hide ... and #main id can not be duplicate on the same page.. working example as below
#navbar {
background-color: #9C9C9C;
margin: 0px 200px 0px 200px;
height: 30px;
overflow: hidden;
}
#nav {
padding: 0px;
margin: 0px;
font-family: arial;
}
#main {
display: inline;
}
a {
display: block;
text-align: center;
float: left;
width: 100px;
padding: 3px;
line-height: 25px;
text-decoration: none;
color: white;
margin-top: 0px;
}
a:hover {
background-color: #d3d3d3;
color: black;
}
ul li{display: inherit;}
ul li ul {
display: none;
width: auto;
position: absolute;
top: 35px;
background: #ccc;
margin: 0;
padding: 0;
}
ul li ul li{display:block; list-style-type:none}
ul li:hover ul {
display: block;
z-index:1000;
}
#searchbar {
margin: 5px 5px 0px 0px;
float: right;
}
<div id="navbar">
<div>
<ul id="nav">
<li class="nestedchild">More
<ul class="c">
<li class="B"><a id="A">Article1</a></li>
<li class="B"><a id="A">Article2</a></li>
<li class="B"><a id="A">Article3</a></li>
<li class="B"><a id="A">Article4</a></li>
</ul>
</li>
<li id="main">About US</li>
</ul>
</div>
<div id="searchbar"><input type="text" name="search" /><button id="button">GO</button></div>
</div>
Your css should be like that.
.first .link {
color: black;
transform: rotate(-90deg);
width: auto;
border-bottom: 2px solid #FFFFFF;
position: relative;
top: 0vh;
}
.first {
background: green;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.menu {
background-color:red;
}
.bottom-line {
border-bottom:5px solid pink;
}
#navbar{
background-color: #9C9C9C;
margin: 0 auto;
padding: 30px 0;
width: 1200px;
}
#nav{
padding: 0px;
margin: 0px;
font-family: arial;
float: left;
list-style: none;
}
#main{
display: inline;
}
a{
display: block;
text-align: center;
float: left;
width: 100px;
padding: 3px;
line-height: 25px;
text-decoration: none;
color: white;
margin-top: 0px;
}
a:hover{
background-color: #d3d3d3;
color: black;
}
ul li {
float: left;
position: relative;
}
ul li ul {
display: none;
position: absolute;
list-style: none;
top: 32px;
z-index: 5;
background-color: #ddd;
padding-left: 0;
}
ul li:hover ul {
display: block;
}
#searchbar {
margin: 5px 5px 0px 0px;
float: right;
}
and You can also see demo here
I have horizontal menu bar, and I trying to add sub menu for one of item, but I am not able to add it, Its appending to my main menu, please someone help me to where i missing
thanks
HTML
<div id="talltabs-maroon">
<ul>
<li class="first">Home <span>Page</span></li>
<li class="active"><span>About us</span></li>
<li class="dropdown"><a class="dropbtn" href="#"> <span> Report </span></a>
<ul class="dropdown-content" style="left:0">
<li>
<a href="">
<p>Valve Report</p>
</a>
</li>
<li>
<a href="">
<p>Cylinder Report</p>
</a>
</li>
</ul>
</li>
<li class="last">Contact <span>Us</span></li>
</ul>
</div>
CSS for Main menu
#talltabs-maroon {
clear: left;
float: left;
padding: 0;
border-top: 3px solid #CD324F;
width: 100%;
overflow: hidden;
font-family: Georgia, serif;
height: 90px;
position: inherit;
}
#talltabs-maroon ul {
float: left;
margin: 0;
padding: 0;
list-style: none;
position: relative;
left: 50%;
text-align: center;
}
#talltabs-maroon ul li {
display: block;
float: left;
list-style: none;
margin: 0;
padding: 0;
position: relative;
right: 50%;
}
#talltabs-maroon ul li a {
display: block;
float: left;
margin: 0 3px 0 0;
padding: 0px 10px 6px 10px;
background: #CD324F;
text-decoration: none;
color: #fff;
}
#talltabs-maroon ul li a p:hover {
color: aqua;
}
#talltabs-maroon ul li a:hover {
padding: 20px 10px 6px 10px;
color: black
}
#talltabs-maroon ul li.active a,
#talltabs-maroon ul li.active a:hover {
padding: 25px 10px 6px 10px;
border-width: 5px;
border-color: aqua;
color: aqua;
}
CSS for drop down menu i tried.
.dropbtn {
list-style-type: none;
color: white;
padding: 14px;
font-size: 14px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: block;
}
.dropdown-content {
list-style-type: none;
display: none;
position: absolute;
right: 0;
/*background-color: black;*/
background-image: url('../../Images/black-olive.jpg'); /*dropdowm popup*/
min-width: 160px;
box-shadow: 0px 8px 16px 5px rgba(0,0,0,0.2);
z-index: 1;
padding-right: 2px;
margin-right: 2px;
}
.dropdown-content a {
color: white;
padding: 10px 14px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
/*background-color: gray;*/
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
/*background-color: #3e8e41;*/
}
pleas help me.
thanks
tink.
Here is my answer for same example, I changed complete css,
body {
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
}
ul li {
display: inline-block;
margin-right: -1px;
position: relative;
padding: 15px 20px;
background: #CD324F;
cursor: pointer;
color: black;
height: 40px;
width: auto;
text-align:center;
}
ul li a{
color:black;
}
ul li:hover {
background: #CD324F;
color: #fff;
height: 45px;
}
ul li a:hover {
color: #fff;
}
ul li ul {
padding: 0;
position: absolute;
top: 68px;
left: 0;
width: 160px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
}
ul li ul li {
background: #ce5068;
display: block;
color: #CD324F;
height: 35px;
}
ul li ul li:hover {
background: #CD324F;
height: 35px;
}
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
<div style="height: 77px; width:100%; margin-top:65px;text-align:center; border-top:solid; border-top-color:#CD324F">
<ul><li>Home</li>
<li>About</li>
<li>
Portfolio
<ul>
<li>Web Design</li>
<li>Web Development</li>
<li>Illustrations</li>
</ul>
</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
Result: on hover portfolio, drop down will appear
Working example on JSFiddle.
I really recommend to look at bootstrap's drop down menu. It is easy to use and most things are already done for you. good luck
Here is the link: https://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp
your code is bit confusing , i have created a simple demo for you how to do it.
here is my HTML code
body {
background: #212121;
font-size:22px;
line-height: 32px;
color: #ffffff;
word-wrap:break-word !important;
font-family: 'Open Sans', sans-serif;
}
h1 {
font-size: 60px;
text-align: center;
color: #FFF;
}
h3 {
font-size: 30px;
text-align: center;
color: #FFF;
}
h3 a {
color: #FFF;
}
a {
color: #FFF;
}
h1 {
margin-top: 100px;
text-align:center;
font-size:60px;
font-family: 'Bree Serif', 'serif';
}
#container {
margin: 0 auto;
}
p {
text-align: center;
}
nav {
margin: 50px 0;
background-color: #E64A19;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav ul li {
display:inline-block;
background-color: #E64A19;
}
nav a {
display:block;
padding:0 10px;
color:#FFF;
font-size:20px;
line-height: 60px;
text-decoration:none;
}
nav a:hover {
background-color: #000000;
}
/* Hide Dropdowns by Default */
nav ul ul {
display: none;
position: absolute;
top: 60px; /* the height of the main nav */
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
display:inherit;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
width:170px;
float:none;
display:list-item;
position: relative;
}
<div id="container">
<nav>
<ul>
<li>Home</li>
<li>WordPress
<!-- First Tier Drop Down -->
<ul>
<li>Themes</li>
<li>Plugins</li>
<li>Tutorials</li>
</ul>
</li>
<li>Web Design
<!-- First Tier Drop Down -->
<ul>
<li>Resources</li>
<li>Links</li>
<li>Tutorials
</ul>
</nav>
</div>
I've looked through other questions but none seem to explain the problem I'm having. I want to create a drop down menu to an already existing navigation bar, and I think it's a problem with the way I've named the classes.
Here is my HTML code for the nav bar
<ul class="customMenu">
<li class="customList"><a class="menuActif" href="#">Home</a></li>
<li class="customList extendMenuClass"><a class="extendMenu" href="#">Cities</a></li>
<div class="extendedDiv">
Paris
Lyon
Toulouse
</div>
<li class="customList">Phrases</li>
<li class="customList">Bank Accounts</li>
<li class="customList">Important Notes</li>
<li class="customList">CAF</li>
<li class="customList" style="float:right"><a class="menuActif" onClick="verifDecon()">Déconnexion</a></li>
</ul>
And here is the CSS I have tried to implement:
.customMenu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #00264d;
position: fixed;
top: 0;
width: 100%;
}
.customList {
float: left;
}
.customList a, .extendMenu{
font-family: Sans Serif;
font-size: 23px;
text-decoration: none;
text-align: center;
padding: 16px 17px;
display: block;
color: white;
}
.customList a:hover, .extendMenuClass:hover .extendMenu{
background-color: #00264d;
color: red;
}
.menuActif{
background-color: red;
color: red;
}
.menuActif:hover{
background-color: white;
color: #00264d;
}
.customList.extendMenuClass{
display: inline-block;
}
.extendedDiv{
display: none;
background-color: #00264d;
position: absolute;
min-width: 200px;
box-shadow: 10px 10px 10px 2px rgba(0,0,0,0.2);
z-index: 1;
}
.extendedDiv a{
display: block;
color: white;
padding: 15px 15px;
}
.extendedDiv a:hover{
color: red;
}
.extendMenuClass:hover .extendedDiv{
display: block;
}
I works otherwise, the menu just doesn't drop down. Can anyone help? Thanks a lot!
Your selector to show the menu on hover is .extendMenuClass:hover .extendedDiv, but .extendedDiv is not a child of .extendMenuClass. Updated that so that it is a child and that selector will work.
Then you need to remove overflow: hidden; from .customMenu since .extendedDiv will bleed below/outside of .customMenu and will be hidden if overflow is hidden.
.customMenu {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #00264d;
position: fixed;
top: 0;
width: 100%;
}
.customList {
float: left;
}
.customList a, .extendMenu{
font-family: Sans Serif;
font-size: 23px;
text-decoration: none;
text-align: center;
padding: 16px 17px;
display: block;
color: white;
}
.customList a:hover, .extendMenuClass:hover .extendMenu{
background-color: #00264d;
color: red;
}
.menuActif{
background-color: red;
color: red;
}
.menuActif:hover{
background-color: white;
color: #00264d;
}
.customList.extendMenuClass{
display: inline-block;
}
.extendedDiv{
display: none;
background-color: #00264d;
position: absolute;
min-width: 200px;
box-shadow: 10px 10px 10px 2px rgba(0,0,0,0.2);
z-index: 1;
}
.extendedDiv a{
display: block;
color: white;
padding: 15px 15px;
}
.extendedDiv a:hover{
color: red;
}
.extendMenuClass:hover .extendedDiv{
display: block;
}
<ul class="customMenu">
<li class="customList"><a class="menuActif" href="#">Home</a></li>
<li class="customList extendMenuClass"><a class="extendMenu" href="#">Cities</a>
<div class="extendedDiv">
Paris
Lyon
Toulouse
</div></li>
<li class="customList">Phrases</li>
<li class="customList">Bank Accounts</li>
<li class="customList">Important Notes</li>
<li class="customList">CAF</li>
<li class="customList" style="float:right"><a class="menuActif" onClick="verifDecon()">Déconnexion</a></li>
</ul>
Common syntax for navigation is nesting unordered lists inside other unordered lists.
so you'd set it up like:
<ul class="main-nav">
<li>1</li>
<li class="dropdown">2
<ul class="dropdown-list">
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
</li>
<li>3</li>
</ul>
It's a lot easier to keep parent and child elements in order.
I just set it up a little easier for you to follow and continually add items:
HTML:
<ul class="customMenu">
<li style="background:red;">Home</li>
<li class="extend">Cities
<ul class="dropdown">
<li>Paris</li>
<li>Lyon</li>
<li>Toulouse</li>
</ul>
</li>
<li>Phrases</li>
<li>Bank Accounts</li>
<li>Important Notes</li>
<li>CAF</li>
<li style="background: red; float: right;">Déconnexion</li>
</ul>
CSS:
ul.customMenu {
width: 100%;
background: #00264d;
}
ul.customMenu li {
display: inline-block;
}
ul.customMenu li a {
display: block;
font-size: 23px;
color: #fff;
text-decoration: none;
padding: 16px 17px;
}
ul.customMenu li a:hover {
color: red;
}
ul.customMenu li ul.dropdown {
display: none;
position: absolute;
top: 55px;
left: -5px;
background: red;
overflow: hidden;
}
ul.customMenu li ul.dropdown li a {
display: block;
width: 100%;
padding: 16px 20px;
}
ul.customMenu li ul.dropdown li a:hover {
color: #fff;
background: #cc0000 !important;
}
li.extend {
position: relative;
}
li.extend:hover ul.dropdown {
display: block !important;
}
I want my dropdown menu with position: absolute to move the content in div#main 136px down. It didnt work using nav ul li:hover #main {margin-top: 136px;}. I want to solve the problem via html/css if possible! Site:
body {
margin: 0;
padding: 0;
background-color: #327ead;
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
color: #c4c4c4;
}
a {
text-decoration: none;
color: #c4c4c4;
}
b {
letter-spacing: 2px;
}
div#head {
width: 100%;
background-color: #3c3c3c;
height: 53px;
}
nav {
background-color: #3c3c3c;
width: 930px;
margin: 0 auto;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
text-align: left;
position: relative;
}
nav ul li {
display: inline-block;
}
nav ul li:hover {
border-bottom: 4px solid #327ead;
}
nav ul li:hover > ul {
display: block;
}
nav ul li a:hover {
color: #327ead;
}
nav ul ul li:hover {
border-bottom: none;
}
nav ul li a {
display: block;
padding: 10px 15px;
font-size: 25px;
}
nav ul ul {
display: none;
position: absolute;
background-color: #3c3c3c;
width: 400px;
height: 136px;
text-align: left;
}
nav ul ul li {
display: block;
font-size: 16px;
padding: 4px 0 4px 10px;
}
nav ul ul li a {
font-size: 16px;
padding: 0;
}
ul.news1 {
margin: 4px 0 0 0;
}
ul.news2 {
margin: 4px 0 0 400px;
}
ul.news3 {
margin: 4px 0 0 800px;
width: 130px;
}
div#main {
width: 930px;
margin-left: auto;
margin-right: auto;
color: #c4c4c4;
text-align: justify;
}
div#mostrecentnews {
background-color: #3c3c3c;
margin: 10px 0 10px 0;
padding: 4px 8px;
}
<div id="head">
<nav>
<ul>
<li>News
<ul class="news1">
<li><b>Today's News</b></li>
<li>content...</li>
<li>content...</li>
<li>content...</li>
<li>Browse More...</li>
</ul>
<ul class="news2">
<li><b>Top Weekly News</b></li>
<li>content...</li>
<li>content...</li>
<li>content...</li>
<li>Browse More...</li>
</ul>
<ul class="news3">
<li><b>History</b></li>
<li>May</li>
<li>April</li>
<li>March</li>
<li>Browse More...</li>
</ul>
</li>
</ul>
</nav>
</div>
<div id="main">
<img src="data/RL-Takumi.jpg">
<div id="mostrecentnews">
<b>Welcome to RocketLeague-Data.com!</b><br>
content...content...content...content...content...content...content...content...content...content...content...
</div>
</div>
REFINED:
Used JQuery:
var down = false;
$('#btn').hover(function () {
if (down == true) {
$('#main').css("margin-top", "0");
down = false;
} else {
$('#main').css("margin-top", "136px");
down = true;
}
});
FIDDLE