I'm trying to make a nav for a website in html and css. It is very simple, and the only thing I want is to display dropdown menus and color them when hovered.
Right now I'm almost there, however I still have two problems:
The elements are overlapping
When you hover a submenu, there are two "hover" squared backgrounds
displayed.
I have the following CSS:
header {
background-color: rgb(147, 147, 147);
position: fixed;
top: 0;
margin: 0;
padding: 0;
left: 0;
height: 8%;
width: 100%;
border-bottom: 0.3em rgb(44, 171, 185) outset;
box-shadow: 0 0.18em 0.625em rgba(0, 0, 0, 0.50);
}
header nav ul {
list-style-type: none;
top: 0;
margin: 0;
}
.active {
background-color: rgba(0, 0, 0, 0.35);
}
header nav ul li.active:hover {
background-color: rgba(48, 67, 91, 0.64);
}
header nav ul li {
position: relative;
display: block;
}
header nav ul li a {
display: block;
line-height: 40px;
padding: 8px;
margin: 0;
top: 0;
float: left;
text-decoration: none;
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
background-color: inherit;
}
header nav ul li:hover:not(.active) {
background-color: rgba(48, 67, 91, 0.35);
}
header nav ul li.dropdown ul {
display: none;
}
header nav ul li.dropdown:hover ul {
display: block;
position: absolute;
}
header nav ul li ul li {
display: block;
float: none;
padding: 30px;
}
And my html is the following:
<body>
<header>
<nav>
<ul>
<li class="active">Element1</li>
<li>Element2</li>
<li class="dropdown">Menu
<ul>
<li>Submenu1</li>
<li>Submenu2</li>
</ul>
</ul>
</nav>
</header>
</body>
What I want is to change the background of the hovered element and to display correctly the subelements in the dropdowns.
I hope I was clear enough, thank you
You can see the code here: https://jsfiddle.net/hdd260s4/
Hello I changed according to your requirement. Please use this code.let me know any query.
<!DOCTYPE html>
<html>
<head>
<style>
header {
background-color: rgb(147, 147, 147);
position: fixed;
top: 0;
margin: 0;
padding: 0;
left: 0;
height: 56px;
width: 100%;
border-bottom: 0.3em rgb(44, 171, 185) outset;
box-shadow: 0 0.18em 0.625em rgba(0, 0, 0, 0.50);
}
header nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
header nav li {
float: left;
}
header nav ul li a {
display: block;
line-height: 40px;
padding: 8px;
text-decoration: none;
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
background-color: inherit;
}
header nav li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
text-decoration: none;
}
.active {
background-color: rgba(0, 0, 0, 0.35);
}
header nav ul li.active:hover {
background-color: rgba(48, 67, 91, 0.64);
}
header nav li a:hover, .dropdown:hover .dropbtn {
background-color: rgba(48, 67, 91, 0.35);
}
header nav li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: rgba(48, 67, 91, 0.35);
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.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;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li class="active">Element1</li>
<li>Element2</li>
<li class="dropdown">
Menu
<div class="dropdown-content">
Submenu1
Submenu2
Submenu3
</div>
</li>
</ul>
</header>
</nav>
</body>
</html>
I uploaded My code here please see this demo.https://jsfiddle.net/hansraj/bmbuLcfk/
Please try this and change according to you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Show Hide Dropdown Using CSS</title>
<style type="text/css">
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: 100%; /* 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;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>About</li>
<li>
Products ▾
<ul class="dropdown">
<li>Laptops</li>
<li>Monitors</li>
<li>Printers</li>
</ul>
</li>
<li>Contact</li>
</ul>
</body>
</html>
I uploaded My code here please see this demo.https://jsfiddle.net/hansraj/z2sojhbm/
Related
so I am pretty new to development and come across a problem, I think I am missing somthing but I can't tell. So I am building a nav bar and then a drop down menu. I believe that the li is in the ul so that why it is not coming out of it. So how could I fix this. If you know any website that would be good let me know thank you
Code:
https://codepen.io/Giannilmgc/pen/JjrgZdr?editors=1111
Output:
https://codepen.io/Giannilmgc/full/JjrgZdr
To see what wrong keep your cursor over the to do tab and scroll down
#import url("https://fonts.googleapis.com/css2?family=Inter:wght#300&display=swap");
/* Here is the body style where we change the background */
body {
background: linear-gradient(135deg, #36454f 0%, #ffdd3c 100%);
margin: 5px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: auto;
background-color: white;
border-radius: 50px;
}
li {
float: left;
width: 16.667%;
transition-duration: 1s;
}
li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition-duration: 1s;
}
li:hover {
background-color: black;
}
li a:hover {
background-color: #36454f;
color: white;
}
#homepageLink {
background-color: #cccccc;
}
.dropdown {
position: relative;
display: inline-block;
}
ul li ul {
display: none;
position: absolute;
background-color: #cccccc;
width: 20%;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 10;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #36454f;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
<head>
<title> My Site </title>
<link rel="stylesheet" href="CSS/Homepage-Css.css" />
</head>
<body>
<body>
<div>
<ul>
<li>HomePage</li>
<li>Journal</li>
<li>Calander </li>
<li class="dropdown">To do
<ul class="dropdown-content">
<a herf="#">Latin</a>
<a herf="#">Scince</a>
<a herf="#">Ela</a>
</ul>
</li>
<li>Service</li>
<li>Contact</li>
</ul>
</div>
<div class="time">
<span id="display_ct"></span>
</body>
<!-- Adding Script to the bottom ... Very Imporantent -->
<script src="Javascript/Homepage-Java.js"></script>
Thank you
In the dropdown class you have set the position in relative. Change it to absolute and your drop down menu will come out.
.dropdown {
position: absolute;
display: inline-block;
}
you put display none on the dropdown and try to show it when its hover on li.
but when the mouse go out from li the display:none on dropdown is return.
try to make it with after pseudo element and change the code from .dropdown { position: relative; display: inline-block; }
to:li:after.dropdown { position: relative; display: inline-block; }
it will work but not an ideal, improve it with css
If you want to create a dropdown menu with pure CSS there is this example from w3schools
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>
I have two pages of code. I want the first page's dropdown menu to look like the second page's dropdown menu. The second page is some code I copied and pasted from W3 Schools.
The problem is on the first page the drop down menu's width is the same as the navigation bar. I want to have a smaller width for the navigation bar and I can't figure out how why it is the same width of navigation bar.
First Page
ul {
margin: 0;
padding: 0;
background-color: green;
overflow: hidden;
list-style-type: none;
}
li {
float: left;
}
li a,
.dropbtn {
display: inline-block;
padding: 50px 100px;
text-decoration: none;
color: white;
}
li a:hover {
color: white;
background-color: #333;
}
.dropdown {
display: inline-block;
}
.dropcont {
display: none;
position: absolute;
background-color: #333 min-width:200px;
z-index: 1;
}
.dropcont a {
color: white;
padding: 12px 16px;
display: block;
text-align: left;
}
.dropdown:hover .dropcont {
display: block;
}
<ul>
<li> Home</li>
<li> Your Home</li>
<li>Home Sales</li>
<li class="dropdown">
Home profile
<div class="dropcont">
Home2
Home3
Home4
</div>
</li>
</ul>
Second Page
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;
}
<ul>
<li>Home</li>
<li>News</li>
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
Here is the updated css :
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color:green;
}
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:#333;
}
li.dropdown {
display: inline-block;
}
.dropcont {
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;
}
.dropcont a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropcont a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropcont {
display: block;
}
<ul>
<li> Home</li>
<li> Your Home</li>
<li>Home Sales</li>
<li class="dropdown">
Home profile
<div class="dropcont">
Home2
Home3
Home4
</div>
</li>
</ul>
I want to see a dropdown menu as soon as I hover on the About button, but when I do, I can only see half of it. What am I doing wrong in my code?
Code:
.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);
}
body {
background-color: #1A1617
}
ul {
text-align: center;
list-style-type: 0px;
margin: 0px;
padding: 20px;
background-color: black;
overflow: hidden;
}
li a {
color: white;
padding: 8px 16px;
text-decoration: none;
}
li {
display: inline;
}
li a:hover {
background-color: red;
text-size: 10px;
}
.dropdown:hover .dropdown-content {
display: block;
}
<!DOCTYPE html>
<html>
<body>
<ul>
<li>Home</li>
<li>News</li>
<div class="dropdown">
<li>About</li>
<div class="dropdown-content"><p>Check</p></div>
</div>
</ul>
</body>
</html>
Issue:
You are using overflow: hidden in the ul element, which doesn't allow its children (li, div) to exceed their parent's width and height and that's the reason why your dropdown menu is cut.
Corrected Code:
.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);
}
body {
background-color: #1A1617
}
ul {
text-align: center;
list-style-type: 0px;
margin: 0px;
padding: 20px;
background-color: black;
/*overflow: hidden; ← REMOVE THAT */
}
li a {
color: white;
padding: 8px 16px;
text-decoration: none;
}
li {
display: inline;
}
li a:hover {
background-color: red;
text-size: 10px;
}
.dropdown:hover .dropdown-content {
display: block;
}
<html>
<body>
<ul>
<li>Home</li>
<li>News</li>
<div class="dropdown">
<li>About</li>
<div class="dropdown-content"><p>Check</p></div>
</div>
</ul>
</body>
</html>
I have completely redone this almost entirely from scratch; a few issues related to recommended web design standards were not introduced that should have been, I hope you can learn from my work here today:
The actual problem was linked to setting a relative element within the .dropdown class.
Here in the HTML5 Code I created:
<!DOCTYPE html>
<html lang="en-UK">
<head>
<meta charset="UTF-8">
<title>Red And Black Navigation Bar</title>
<style>
body {
background-color: #1A1617;
font-family: Verdana, Arial, Helvetica, sans-serif;
min-width: 320px;
}
ul {
text-align: center;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
border: 1px solid white;
}
li {
display: inline;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 20px 16px;
text-decoration: none;
font-size: large;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: center;
}
.dropdown:hover .dropdown-content {
display: block;
padding: 5px;
}
.goCenter {
text-align: center;
color: white;
font-weight: bold;
}
</style>
</head>
<body>
<ul>
<li><a class="achome.html">Home</a></li>
<li>News</li>
<li class="dropdown">
About
<div class="dropdown-content">
<p>The About Goes Here...</p>
</div>
</li>
</ul>
<p class="goCenter"></p>
</body>
</html>
Hi I have a website with a dropdown menu and for some reason its items stack horizontally.
The HTML is like this
<li id="menuitem">a</li>
<ul id="dropdown">
<li id="dropdownelement">b</li>
</ul>
And the CSS sets the ul to hidden unless hover. And li elements to relative
https://jsfiddle.net/u8pmtc4z/
There are a few problems with your implementation.
You can test this demo and see if this is the desired behaviour.
You should set the ul ul elements to be positioned absolute, and your ul li to relative with an inline-block display prop.
Then, change your #navbar ul li:hover ul to be like this:
#navbar ul li:hover ul {
display: block;
position: absolute;
left: 0;
padding: 0;
}
This sets the nested dropdown to be positioned below the parent as well as aligned to the left.
Also, you have used the #accountDropDownElement id twice in your markup. I replaced it as a class in my demo because ids must be unique!
Here's the full code:
#navbar ul {
position: relative;
display: inline-table;
list-style-type: none;
width: 965px;
}
#navbar ul:after {
content: "";
clear: both;
display: block;
}
#navbar ul ul {
display: none;
position: absolute;
top: 66px;
left: 0;
padding: 0;
}
#navbar ul ul li {
float: none;
position: relative;
}
#navbar ul li {
float: left;
padding: 0 10px;
border-radius: 25px;
}
#navbar ul li:hover > a {
border: 1px rgb(204, 255, 102) solid;
background-color: rgb(204, 255, 102);
box-shadow: none;
}
#navbar ul li:hover ul {
display: block;
position: absolute;
left: 0;
padding: 0;
}
#navbar ul li:hover ul li {
float: none;
}
#navbar ul li a {
border-radius: 25px;
border: 1px rgb(57, 232, 38) solid;
background-color: rgb(57, 232, 38);
box-shadow: 0px 3px 3px rgba(0,0,0,0.5);
color: white;
display: block;
float: left;
font-family: "micross";
font-size: 30px;
padding: 15px;
text-decoration: none;
}
#navbar ul li a:hover {
border: 1px rgb(204, 255, 102) solid;
background-color: rgb(204, 255, 102);
box-shadow: none;
}
#accountButton:hover {
cursor: pointer;
}
#accountDropDownImage {
float: left;
}
.accountDropDownElement {
width: 100px;
background-color: rgb(57, 232, 38);
color: white;
font-size: 20px;
margin: 0;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
}
<link rel="stylesheet" href="CSS/style.css">
<link rel="stylesheet" href="CSS/navbar.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div id="navbar">
<ul id="navbarList">
<li id="homeButton">Home</li>
<li id="blogButton">Blog</li>
<li id="downloadsButton">Downloads</li>
<li id="managerButton">Manager</li>
<li id="accountButton"><a id='accountAButton' href='manager.php'>Luke</a>
<ul id='dropDownList'>
<li><p class='accountDropDownElement'>Logout</p></li>
<li><p class='accountDropDownElement'>Login</p></li>
</ul>
</li>
</ul>
</div>
If you adjust the width in your css to be 65 instead of 965 you will see the links stack on the left as Im assuming your wanting.
i found this menu that's exactly what i want. It works in all modern browsers and IE 7/8. I need to find a fix for it to work in IE6. Any help would be greatly appreciated.
http://lab.returnwt.net/htmlcss/tabmenu/
The problem with this menu in IE6 is that it's using selectors like this:
header ul#menu li:hover ul
IE6 only supports :hover on a elements.
Fortunately, there's a really easy fix to make this menu work in IE6.
It's called Whatever:hover
Download the (minified) csshover3.htc file.
Add this CSS:
body {
behavior: url("csshover3.htc");
}
Here's a self-contained file that I tested to work with IE6, provided that the csshover3.htc file is in the same folder:
<!DOCTYPE html>
<html>
<head>
<title>Simple Tabbed Navigation - CSS3</title>
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<meta charset="utf-8" />
<style>
body {
behavior: url("csshover3.htc");
}
body
{
background: #efefef url(images/bg_main.png);
font: 13px Helvetica, Arial;
margin: 0;
}
header
{
background: url(images/bg_head.png);
display: block; /* Compatibility fix */
}
header:after
{
background: rgba(0, 0, 0, 0.1);
content: ' ';
height: 1px;
position: absolute;
width: 100%;
z-index: 10;
}
header ul#menu
{
border-bottom: 5px solid #fff;
margin: 0;
overflow: hidden;
padding: 0 10px;
padding-top: 100px;
list-style: none
}
header ul#menu li
{
float: left;
}
header ul#menu li a
{
background: #b1d0dd;
border-top: 1px solid #d0e2ea;
color: #fff;
font-weight: bold;
display: block;
line-height: 34px;
margin-right: 2px;
padding: 0 20px;
text-decoration: none;
text-shadow: 0 -1px rgba(0, 0, 0, 0.25);
border-radius: 3px 3px 0 0; /* Currently working on Firefox 4.0b (Nightly), Chrome 8.0.xxxx and Opera 10.63+ */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#B1D0DD), to(#89b8cc));
background-image: -moz-linear-gradient(top, #B1D0DD, #89B8CC);
}
header ul#menu li > ul
{
display: none;
}
header ul#menu li a:hover
{
background: #fff;
border-top-color: #fff;
color: #666;
text-shadow: none;
}
header ul#menu ul {
background: #fff;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
display: none;
margin-left: 0;
margin: 0;
padding: 5px 0 0 0;
position: absolute;
z-index: 999;
}
header ul#menu ul li
{
border: 1px solid rgba(0, 0, 0, 0.1);
border-width: 0 1px;
float: none;
list-style: none;
margin: 0;
padding: 0;
}
header ul#menu ul li a
{
background: none;
border-bottom: 1px solid #ededed;
border-top: none;
color: #666;
font-weight: normal;
font-size: 12px;
margin: 0 20px;
padding: 0;
text-shadow: none;
width: 118px;
}
header ul#menu li a.home-icon span
{
background: url(images/home-icon.png) no-repeat center center;
display: block;
text-indent: -999em;
overflow: hidden;
text-align: left;
direction: ltr;
width: 16px;
}
header ul#menu li a.home-icon:hover span
{
background-image: url(images/home-icon-hover.png);
}
header ul#menu ul li:last-child a
{
border-bottom: none;
}
header ul#menu li:hover ul
{
display: block;
}
header ul#menu ul li a:hover
{
color: #000;
}
header ul#menu ul li:last-child
{
border-bottom: none
}
</style>
</head>
<body>
<header>
<ul id="menu">
<li><span>Home</span></li>
<li>
Community
<ul>
<li>Recent Activity</li>
<li>Member Forum</li>
<li>Member List</li>
<li>Member Groups</li>
</ul>
</li>
<li>Pet Help</li>
<li>Pets for Sale</li>
<li>Pet Services</li>
</ul>
</header>
</body>
</html>