I am having a bit of trouble with the drop down box. I want my <a> elements to be without underline and in the middle of the dropdown-content. You can see my code, I want to remove the underlines from the dropdown-content and I want it to be red when it is hovered. However whenever I try to do that, it gives a false defect.
Here is the code. Test it to see the problem logically!
<!DOCTYPE html>
<html>
<head>
<style>
/* Building navigation bar */
ul {
text-align: center;
list-style-type: none;
margin: 0;
padding-bottom: 5px;
background-color: black;
display: block;
}
li a {
text-decoration: none;
padding: 14px 20px;
color: white;
}
li a:hover {
background-color: red;
}
li {
display: inline;
}
/* Building about dropdown and the dropdown content */
.container {
width: 15em;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
text-align: center;
position: absolute;
display: none;
background-color: black;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>News</li>
<div class="dropdown">
<li>About</li>
<div class="dropdown-content"><ul>
<a style="text-decoration = none;" href="#theMan.html">Hey</a>
Hey
</ul>
</div>
</div>
</ul>
</body>
</html>
You have a fair amount of invalid HTML in there. Divs cannot be children of ul. You might want to validate your HTML first.
Therefore with a little re-structuring of the HTML to make it valid.
ul {
text-align: center;
list-style-type: none;
margin: 0;
padding: 0;
padding-bottom: 5px;
background-color: black;
display: block;
}
li a {
text-decoration: none;
display: block;
padding: 10px;
color: white;
}
li a:hover {
background-color: red;
}
li {
display: inline-block;
}
/* Building about dropdown and the dropdown content */
.container {
//width: 15em;
}
.dropdown {
position: relative;
}
.dropdown-content {
text-align: center;
position: absolute;
top: 100%;
left: 0;
display: none;
background-color: black;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
<ul>
<li>Home
</li>
<li>News
</li>
<li class="dropdown">About
<ul class="dropdown-content">
<li><a style="text-decoration = none;" href="#theMan.html">Hey</a>
</li>
<li>Hey
</li>
</ul>
</li>
</ul>
Check My Fiddle
ul {
text-align: center;
list-style-type: none;
margin: 0;
padding-bottom: 5px;
background-color: black;
display: block;
}
li a {
text-decoration: none;
padding: 14px 20px;
color: white;
}
li a:hover {
background-color: red;
}
li {
display: inline;
}
/* Building about dropdown and the dropdown content */
.container {
width: 15em;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
text-align: center;
position: absolute;
display: none;
background-color: black;
color: white;
}
/*added lines*/
.dropdown-content a{
text-decoration:none;
}
.dropdown-content a:hover{
color:red;/*font-color will be red*/
}
/*added lines ends here*/
.dropdown:hover .dropdown-content {
display: block;
}
<body>
<ul>
<li>Home</li>
<li>News</li>
<div class="dropdown">
<li>About</li>
<div class="dropdown-content"><ul>
Hey
Hey
</ul>
</div>
</div>
</ul>
</body>
1.) You have to put your submenu entries into li tags (they are in a ul tag!)
2.) The .dropdown-content selector/rule has to be changed to .dropdown-content ul
3.) quite some other stuff, but that wasn't part of the question.
ul {
text-align: center;
list-style-type: none;
margin: 0;
padding-bottom: 5px;
background-color: black;
display: block;
}
li a {
text-decoration: none;
padding: 14px 20px;
color: white;
}
li a:hover {
background-color: red;
}
li {
display: inline;
}
/* Building about dropdown and the dropdown content */
.container {
width: 15em;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content ul {
text-align: center;
position: absolute;
display: none;
background-color: black;
color: white;
padding: 0;
}
.dropdown:hover .dropdown-content ul {
display: block;
}
<ul>
<li>Home
</li>
<li>News
</li>
<div class="dropdown">
<li>About
</li>
<div class="dropdown-content">
<ul>
<li><a style="text-decoration = none;" href="#theMan.html">Hey</a>
</li>
<li>Hey
</li>
</ul>
</div>
</div>
</ul>
Related
I'm new in web development and trying to create a website. I am struggling with my dropdown menu which somehow won't show when I hover on it. I tried changing its position, and when I put it as relative, it shows in an inline-block, but I want it as a block and dropdown. The funny thing is that when I try the code alone then it works but with the rest of my code for the whole website then it doesn't work anymore here is my html :
<!-- Dropdown Menu -->
<div class="main-menu">
<ul>
<li class="dropdown">
DESTINATIONS
<div class="dropdown-content">
CROATIA
FRANCE
SPAIN
SWITZERLAND
</div>
</li>
<li>MAP</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div>
And here is my css :
.main-menu {
position: absolute;
left: 500px;
top: 100px;
}
.main-menu ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
}
.main-menu li {
float: left;
}
.main-menu li a {
color: #362222;
text-align: center;
display: inline-block;
padding: 14px 16px;
text-decoration: none;
}
.main-menu li a:hover,
.dropdown:hover {
background-color: white;
color: #ceab93;
}
.main-menu li.dropdown {
display: block;
}
.dropdown:hover .dropdown-content a {
display: block;
}
.dropdown-content {
display: block;
position: absolute;
background-color: white;
min-width: 160px;
z-index: 999;
}
.dropdown-content a {
color: #ceab93;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: white;
}
As I explained, the code works on its own but when it is added to my other css code then it won't drop. I have a Logo section just before that and a title section right after, here is the html of it all together:
<!-- Logo -->
<div class="logo-container">
<a href="../html/index.html">
<img src="../images/Logo.jpg" alt="Logo" />
</a>
</div>
<!-- Dropdown Menu -->
<div class="main-menu">
<ul>
<li class="dropdown">
DESTINATIONS
<div class="dropdown-content">
CROATIA
FRANCE
SPAIN
SWITZERLAND
</div>
</li>
<li>MAP</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div>
<!-- Title -->
<div class="title-container">
<img src="../images/ophelie-ibiza.jpeg" alt="ophelie-ibiza" style="width: 100%" />
<div class="centered">
<h1>Welcome</h1>
</div>
</div>
Here is my css code for those 3 sections :
/* Logo */
.logo-container {
position: relative;
float: none;
width: 400px;
margin: 0;
padding: 0;
}
.logo-container img {
width: 100%;
border-radius: 50%;
}
/* Dropdown Menu */
.main-menu {
position: absolute;
left: 500px;
top: 100px;
}
.main-menu ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
}
.main-menu li {
float: left;
}
.main-menu li a {
color: #362222;
text-align: center;
display: inline-block;
padding: 14px 16px;
text-decoration: none;
}
.main-menu li a:hover,
.dropdown:hover {
background-color: white;
color: #ceab93;
}
.main-menu li.dropdown {
display: block;
}
.dropdown:hover .dropdown-content a {
display: block;
}
.dropdown-content {
display: block;
position: absolute;
background-color: white;
min-width: 160px;
z-index: 999;
}
.dropdown-content a {
color: #ceab93;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: white;
}
/* Title Section */
.title-container {
position: relative;
text-align: center;
}
.title-container img {
margin-top: 0;
margin-bottom: 0;
width: 100%;
height: auto;
display: flex;
}
.centered {
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
}
If anyone has an answer to my problem, please let me know I'm stuck!
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 am able to get my dropdown menu to work perfectly, only issue is that i'm having trouble trying to figure out how I can add another dropdown level.
For instance, I want another level to drop down when I hover over Test3. What am I missing in the code to do so?
CSS:
<style>
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);
}
.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>
HTML:
<nav>
<ul id="menu">
<li class="dropdown">
Location
<div class="dropdown-content">
Test1
Test2
Test3
</div>
</ul>
</nav>
Maybe you didn't close the li tag? Placing a div inside the li seems to make things complicated.
I think it's easier if you make a new level just wrap everything in a ul-li-ul loop. Like this:
<ul id="menu">
<li>SOMETHING LV1</li>
<li>SOMETHING LV1</li>
<li>DROPDOWN 1
<ul>
<li>SOMETHING LV2</i></li>
<li>DROPDOWN 2</i>
<ul>
<li>SOMETHING LV3</li>
</ul>
</li>
</ul>
</li>
</ul>
Then hide it and show when hover:
#menu li ul{
display: none;
}
#menu li:hover>ul{
display: block;
position: absolute;
width: 100%;
}
So you can have two or three levels, no problem.
Please see the fiddle example: https://jsfiddle.net/fp1x1v05/
Hope this helps.
Sorry, posted an answer before that didn't isolate the links.
What you want to do, ideally, is target hover events on elements that wrap links, then use a bit more specificity in your selectors.
Try this one:
<style>
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);
}
.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;
}
.dropdown:hover .dropdown-content ul li {
display: none;
}
.dropdown:hover .dropdown-content li:hover ul li {
display: block;
}
</style>
<nav>
<ul id="menu">
<li class="dropdown">
Location
<ul class="dropdown-content"><li>Test1<ul><li>Subtest 1</li></ul></li>
<li>Test2</li>
<li>Test3</li></ul>
</ul>
</nav>
nav ul
{
list-style: none;
padding: 0;
text-align:center;
}
nav li
{
background-color: rgba(0,100,0,0.5);
position: relative;
display: inline-block;
}
nav li:hover
{
background-color: rgba(100,0,0,0.5)
}
nav a
{
display:block;
padding: 0.5em;
text-decoration: none;
color: rgba(0,0,100,0.9);
}
nav ul ul
{
display: none;
position: absolute;
}
nav li:hover > ul
{
display: block;
}
nav ul ul ul
{
left: 100%;
top: 0;
}
nav > ul > li > ul > li
{
min-width: 100%;
}
<nav>
<ul>
<li>
1.First
<li>
2.Second
<ul>
<li> 2.1
<li> 2.2
<ul>
<li> 2.2.1
<li> 2.2.2
<ul>
<li> 2.2.2.1
<li> 2.2.2.2
</ul>
</ul>
</ul>
<li> 3.Third
</ul>
</nav>
I'm beginner to css & html and creating have been having trouble with creating a dropdown menu inside navigation bar . In the drop down menu "Product" it doesnt show the dropdown menu list when clicked. If anyone can point out the issue I would be really grateful. Below is the HTML code for the navigation bar:
.Navigation {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #4C4747;
border: 2px;
border-radius: 5px;
}
.Navigation li {
list-style-type: none;
float: left;
}
.Navigation li a {
border-right: 2px solid black;
font-family: sans-serif;
color: white;
display: block;
text-align: center;
text-decoration: none;
padding: 10px 15px 10px 15px;
}
.dropdown li {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
}
.dropdown-content a {
color: white;
text-decoration: none;
display: block;
}
.dropdown:hover .dropbtn {
display: block;
}
<ul class="Navigation">
<li>HOME
</li>
<!-- Dropdown -->
<li class="dropdown">
PRODUCT
<div class="dropdown-content">
COMPUTER
LAPTOP
SMARTPHONE
</div>
</li>
<!-- -->
<li>ABOUT
</li>
</ul>
You need to change your .dropbtn to .dropdown-content like this:
.dropdown:hover .dropdown-content{
display: block;
}
Here is a snippet of the code:
.Navigation {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #4C4747;
border: 2px;
border-radius: 5px;
}
.Navigation li {
list-style-type: none;
float: left;
}
.Navigation li a {
border-right: 2px solid black;
font-family: sans-serif;
color: white;
display: block;
text-align: center;
text-decoration: none;
padding: 10px 15px 10px 15px;
}
.dropdown li {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
}
.dropdown-content a {
color: white;
text-decoration: none;
display: block;
background-color: #4c4747;
}
.dropdown:hover .dropdown-content{
display: block;
}
<ul class="Navigation">
<li>HOME</li>
<!-- Dropdown -->
<li class="dropdown">
PRODUCT
<div class="dropdown-content">
COMPUTER
LAPTOP
SMARTPHONE
</div>
</li>
<!-- -->
<li>ABOUT</li>
</ul>
you can try this one:
.Navigation {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #4C4747;
border: 2px;
border-radius: 5px;
}
.Navigation li {
list-style-type: none;
float: left;
}
.Navigation li a {
border-right: 2px solid black;
font-family: sans-serif;
color: white;
display: block;
text-align: center;
text-decoration: none;
padding: 10px 15px 10px 15px;
}
.dropdown li {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #4C4747;
}
.dropdown-content a {
color: white;
text-decoration: none;
display: block;
}
.dropdown-content a:hover
{
background-color:red;
}
.dropdown:hover .dropdown-content{
display: block;
}
DEMO HERE
You need to change your .dropbtn to .dropdown-content because then the button will be displayed (with display: block;) when you hover over .dropdown even though that is being displayed anyways. You want your content to be displayed when you hover over .dropdown. So change it to this-
.dropdown:hover .dropdown-content {display: block;}
I am new to CSS and I am making a navigation bar. Currently, my navigation bar is situated on the left and I would like to move the whole bar to the middle. How can I do that?
Below are the codes. Thanks in advance!
/* Navigation bar */
#navigation_bar {
list-style-type: none;
margin: 0;
position: fixed;
background-color: #333;
top: 0;
Left: 0;
width: 100%;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active), .dropdown:hover .dropbtn {
background-color: #111;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
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;
}
.active {
background-color: #4CAF50;
}
<!--Navigation bar-->
<ul id="navigation_bar">
<li><a class="active" href="navigation_bar/home.html">Home.</a></li>
<li>Promotion.</li>
<!--drop down menu-->
<li class="dropdown">Hot Products.
<div class="dropdown-content">
<a herf="navigation_bar/sub_menu/sandwiches.html">Sandwiches</a>
<a herf="navigation_bar/sub_menu/burger.html">Burger</a>
<a herf="navigation_bar/sub_menu/rice.html">Rice</a>
<a herf="navigation_bar/sub_menu/noodles.html">Noddles</a>
</div>
</li>
<!--Back to normal-->
<li>Cold Products.</li>
<li>Snacks.</li>
<li>About Us.</li>
<li>Contact Us.</li>
</ul>
Update your #navigation_bar with
#navigation_bar {
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
Here is the working Demo
#navigation_bar {
list-style-type: none;
margin: 0;
position: fixed;
background-color: #333;
top: 0;
Left: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active), .dropdown:hover .dropbtn {
background-color: #111;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
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;
}
.active {
background-color: #4CAF50;
}
<ul id="navigation_bar">
<li><a class="active" href="navigation_bar/home.html">Home.</a></li>
<li>Promotion.</li>
<!--drop down menu-->
<li class="dropdown">Hot Products.
<div class="dropdown-content">
<a herf="navigation_bar/sub_menu/sandwiches.html">Sandwiches</a>
<a herf="navigation_bar/sub_menu/burger.html">Burger</a>
<a herf="navigation_bar/sub_menu/rice.html">Rice</a>
<a herf="navigation_bar/sub_menu/noodles.html">Noddles</a>
</div>
</li>
<!--Back to normal-->
<li>Cold Products.</li>
<li>Snacks.</li>
<li>About Us.</li>
<li>Contact Us.</li>
</ul>
By changing a bit of your CSS code you can easily do that as:
#navigation_bar {
text-align: center;
}
#navigation_bar li {
float: none;
display: inline-block;
vertical-align: top;
}
li .dropdown-content a:hover:not(.active) {
background: #d0d0d0; /* for altering the hover effect on submenus */
}
I have also created a JSFiddle.
Change navigation_bar css to :
#navigation_bar {
list-style-type: none;
margin: 0 auto;
position: fixed;
background-color: #333;
top: 0;
width: auto;
display: block;
float: left;
}
Try this
#navigation_bar{ text-align: center;} /*add align center */
li {display: inline; /* float:left; */} /* remove float left here and add display inline */