I'm making a navigation bar for a site that I'm working on, and one of the links will show a dropdown on hover. Currently, my dropdown content displays nowhere near below the dropdown where I would like it to be. This is probably a simple problem, but I would appreciate any help!
HTML:
<nav>
HOME
ABOUT
BLOG
<div class="dropdown">
PROJECTS
<div class="dropdown-content">
Client Work
Personal Projects
</div>
</div>
</nav>
CSS:
nav {
margin-top: 4.3vmin;
text-align: center;
display: none;
}
.nav-item:link {
color: #9422ed;
text-decoration: none;
padding: 3.7vmin;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.nav-item:visited {
color: #9422ed;
}
.nav-item:hover {
color: #5c0d99;
text-decoration: none;
}
.nav-item:active {
color: #5c0d99;
}
.dropdown {
overflow: hidden;
display: inline;
}
.dropdown-content {
display: none;
position: absolute;
box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.2);
z-index: 1;
background-color: #f9f9f9;
min-width: 160px;
}
.dropdown-content a {
float: none;
text-decoration: none;
display: block;
text-align: left;
padding: 10px 14px;
}
.dropdown-content a:hover {
background-color: #e7e7e7;
}
.dropdown:hover .dropdown-content {
display: block;
}
Thanks in advance!
Set your .dropdown to position: relative; and then set .dropdown-content left & top or margin styles for fine positioning.
Related
New member here and also a newcomer to HTML and CSS, I hope you indulge my mistakes.
I have a dropdown menu in CSS (just a burger) aligned on the right, but when I click on it, the burger is on the left. And I just don't know why.
Menu normal/untoggled
Menu when clicked/toggled
Can you help me?
Here is the code:
.navbar {
background-color: #1a1a1a;
width: 100%;
height: 4%;
text-decoration: none;
position: absolute;
float: right;
z-index: 2;
}
.navbar a {
font-size: 16px;
color: #1a1a1a;
text-align: right;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: right;
overflow: hidden;
}
.dropdown .dropbtn {
position: static;
width: 35px;
height: 5px;
background-color: white;
margin: 6px 10px;
border: none;
outline: none;
z-index: 30;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
float: none;
/* position: relative; */
background-color: #FFBB00;
}
.dropdown-content {
float: right;
display: none;
background-color: #1a1a1a6c;
min-width: 160px;
}
.dropdown-content a {
float: none;
display: block;
color: white;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: rgba(0, 0, 0, 0.458);
color: #FFBB00;
}
.dropdown:hover .dropdown-content {
float: right;
display: block;
}
<div class="navbar">
<div class="dropdown">
<div class="dropbtn">
</div>
<div class="dropbtn">
</div>
<div class="dropbtn">
</div>
<div class="dropdown-content">
HOME
SHOP
CONTACT
</div>
</div>
I tried to float right and change the position. I tried text align and all that.
I just want the burger to stay on the same place. That's all.
Thank you in advance!
I am trying to use Superfish jQuery menu in one of my websites. Results so far are rather dissapointing as I get nowhere near the same look and feel when I follow the install instructions shared (under Quick Start Guide).
My intention is for the menu to be at the very top of the page, fixed (so it does not disappear when scrolling down) and cover 100% width. Using this attribute (100% width) stops the drop-down menus from working in this basic CSS version (I am learning the ropes so I am most likely not coding properly) and I cannot figure out why.
Anyhow, I want to achieve the same with Superfish and I would appreciate some coding assistance, I do not require the specific color styling but "install instructions" (if that makes any sense) would be of great help.
See below current code:
.banner {
color: #000000;
font-size: 2em;
font-family: "Public Sans";
font-weight: bolder;
letter-spacing: -0.05em;
padding-left: 0.2em;
padding-right: 0.2em;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #d0d3d4;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #abacac;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #d0d3d4;
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: #abacac;}
.dropdown:hover .dropdown-content {
display: block;
}
<ul>
<!--- nothing --->
<li class="banner">nassau</li>
<li>News</li>
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
Your help will be greatly appreciated.
For the basic CSS version, if you wrap it in a div and give that a position of fixed, top of 0 and width of 100% it does work.
Your code doesn't show any CSS showing position fixed anywhere.
.banner {
color: #000000;
font-size: 2em;
font-family: "Public Sans";
font-weight: bolder;
letter-spacing: -0.05em;
padding-left: 0.2em;
padding-right: 0.2em;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #d0d3d4;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #abacac;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #d0d3d4;
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: #abacac;}
.dropdown:hover .dropdown-content {
display: block;
}
.fixed{
position:fixed;
width:100%;
top:0;
}
<div class="fixed">
<ul>
<!--- nothing --->
<li class="banner">nassau</li>
<li>News</li>
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
</div>
<div style="margin-top:100px;height:1000px;">sssssssx</div>
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>
My drop down menu on my navigation bar is called "Works". I can't seem to figure out why "Works" has a grey box surrounding the word while the other words on the navigation bar do not.
My CSS for the nav bar and drop down menu:
nav {
list-style-type: none;
margin: 0;
padding: 0px;
overflow: hidden;
margin-bottom: 30px;
line-height: 1.5em;
text-decoration: none;
}
nav a, .dropbtn {
display: inline;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 25px;
font-family:"mrs-eaves";
}
.dropdown {
overflow: hidden;
}
.dropdown {
cursor: pointer;
font-size: 25px;
border: none;
outline: none;
color: black;
padding: 14px 16px;
background-color: inherit;
font-family: "mrs-eaves";
margin: 0;
text-decoration: none;
}
nav a:hover, .dropdown:hover .dropbtn, .dropbtn:focus
{
background-color: rgb(247, 219, 255);
}
.dropdown-content {
display: none;
position: relative;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: center;
}
.show {
display: block;
Here is my html:
<nav>
<center>
Home
<button class="dropbtn" onclick="myFunction()">Works
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" id="myDropdown">
Drawing
Animation
Design
</div>
About
Contact
Links
</center>
</nav>
If it must be a button, add the following CSS
.dropbtn {
background: none;
border: none;
}
Then, in your CSS where you set the hover color, change it to this
nav a:hover, .dropdown:hover, .dropbtn:focus, .dropbtn:hover {
background-color: rgb(247, 219, 255);
}
Edit:
Added cursor change so its a pointer for consistency when the button is hovered.
JSFiddle
It is standard button style. So, if you want it to be transparent, you should add certain styling for your button class (.dropbtn).
It is,
.dropbtn {
background: none;
border: none;
}
I am preparing a blogger template. And the navigation menu creating problems. Submenu appearing next to parent menu. But not dropping down.
Have a look at testblogorfy.blogspot.com.
View CSS via "pagesource"--> #menu or "header-navigation"
You can read this link for more clarification https://www.w3schools.com/css/css_dropdowns.asp.
For your support I have paste the same code from the above link.
Basically for sub menu, you have to create another ul nested within the li element.
HTML
<ul>
<li>Home</li>
<li>News</li>
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
CSS
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;
}