I am working on the following project:
/* Second Bar */
.header-two-bars .header-second-bar {
background-color: #ffffff;
box-shadow: 1px 3px 3px 0 rgba(0, 0, 0, 0.05);
padding: 20px 40px;
}
.header-two-bars .header-second-bar nav {
font:14px Arial, Helvetica, sans-serif;
}
.header-two-bars .header-second-bar nav a{
display: inline-block;
color: #4e5359;
text-decoration: none;
padding-left: 12px;
padding-right: 12px;
}
.header-two-bars .header-second-bar nav a:hover{
border-radius: 2px;
background-color: #2B5773;
padding-top:8px;
padding-bottom: 8px;
color: white;
opacity: 0.7;
}
.header-two-bars .header-second-bar nav a.selected{
border-radius: 2px;
background-color: #2B5773;
padding: 8px 12px;
color: white;
}
.clear {
clear: both;
}
/*Dropdown menu*/
.dropbtn {
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
margin-top: 0px;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 99;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
width: inherit;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
padding-top: initial;
padding-bottom: initial; }
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
}
<div class="header-second-bar">
<div class="header-limiter">
<nav>
<span class="dropdown">
Home
<div class="dropdown-content">
Men
Women
</div>
</span>
Blog
Promo
</nav>
<div class="clear"></div>
</div>
</div>
Everything was working fine, but when I implemented the dowpdown menu, I start having a bug when I tried to hover the dropdown list Men and Women. I think it is due to the padding-top applied to .header-two-bars .header-second-bar nav a:hover
I also don't want to remove it because the others button Blog, Promo need it.
How can I solve the problem without removing the padding-top applied at .header-two-bars .header-second-bar nav a:hover?
.dropdown-content a:hover {
background-color: #f1f1f1;
}
Removing these lines from .dropdown-content a:hover makes it work
padding-top: initial;
padding-bottom: initial;
I think you can add the below css for dropdown elements .dropdown:hover .dropdown-content a { padding: 12px 16px;}
Please see the updated fiddle, hope this will help
/* Second Bar */
.header-two-bars .header-second-bar {
background-color: #ffffff;
box-shadow: 1px 3px 3px 0 rgba(0, 0, 0, 0.05);
padding: 20px 40px;
}
.header-two-bars .header-second-bar nav {
font:14px Arial, Helvetica, sans-serif;
}
.header-two-bars .header-second-bar nav a{
display: inline-block;
color: #4e5359;
text-decoration: none;
padding-left: 12px;
padding-right: 12px;
}
.header-two-bars .header-second-bar nav a:hover{
border-radius: 2px;
background-color: #2B5773;
padding-top:8px;
padding-bottom: 8px;
color: white;
opacity: 0.7;
}
.header-two-bars .header-second-bar nav a.selected{
border-radius: 2px;
background-color: #2B5773;
padding: 8px 12px;
color: white;
}
.clear {
clear: both;
}
/*Dropdown menu*/
.dropbtn {
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
margin-top: 0px;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 99;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
width: inherit;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
padding-top: initial;
padding-bottom: initial; }
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropdown-content a { padding: 12px 16px;}
.dropdown:hover .dropbtn {
}
<div class="header-second-bar">
<div class="header-limiter">
<nav>
<span class="dropdown">
Home
<div class="dropdown-content">
Men
Women
</div>
</span>
Blog
Promo
</nav>
<div class="clear"></div>
</div>
</div>
Related
I'm making a dropdown menu for a website. I got the first segment working, but when I want to make one element to show other options on its right side, it's just not working.
It's just some basic HTML and CSS setting, I am just a beginner. I've tried decluttering the code and doing it in the simplest way possible.
li a, dropbtn {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #111;
}
li.dropdown {
display: inline-block;
}
.dropdown:hover .dropdown-content {
display: 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;
}
.two {
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;
margin-top: -40px;
margin-left: 160px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
<!-- About section -->
<li class="dropdown">
<a class="dropbtn">About</a>
<div class="dropdown-content">
Mission
<div class="two">
Team
</div>
Our Story
Partners
Team
</div>
</li>
I would like to understand what I am doing wrong, and how can I make this work.
Use + sign to select the sub menu in css and make it display:block. Check below code:
.dropdown-content a:hover + div {
display:block;
}
See the Snippet below:
li a, dropbtn {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
background-color:gray;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #111;
}
li.dropdown {
display: inline-block;
}
.dropdown:hover .dropdown-content {
display: 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;
}
.two {
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;
margin-top: -40px;
margin-left: 160px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
.dropdown-content a:hover + div {
display:block;
}
<!-- About section -->
<li class="dropdown">
<a class="dropbtn">About</a>
<div class="dropdown-content">
Mission
<div class="two">
Team
</div>
Our Story
Partners
Team
<div class="two">
CEO
</div>
</div>
</li>
.header{
display:inline-block;
vertical-align: top;
list-style-type: none;
}
.header .dropbtn {
font-size: 16px;
border: none;
color: #111;
padding: 14px 16px;
margin: 0;
background: inherit;
}
.header:hover .dropbtn {
background-color: #00b5cc;
}
.dropdown-content {
list-style-type: none;
margin: 0px;
padding: 0px;
display: none;
list-style-type: 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 li a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content li a:hover {
background-color: #ddd;
}
.header:hover .dropdown-content {
display: block;
}
.drop-button {
font-size: 16px;
border: none;
color: #111;
padding: 14px 16px;
margin: 0;
background: inherit;
}
.sub-menu{
list-style-type: none;
display:none;
}
.dropdown-content:hover .submenu{
background-color: red;
}
<ul class="header">
<li>
<a class="dropbtn ">
Apparel
</a>
<ul class="dropdown-content">
<li>
<a>Girls
<ul class="sub-menu">
<li><a>Shoes</a></li>
<li><a>Pants</a></li>
<li><a>Skirts</a></li>
<li><a>Tops</a></li>
</ul>
</a>
</li>
</ul>
</li>
</ul>
I'm new to css and want to create a navigation bar.When I click on the Apparel section, the Girl section comes. But when I click on the girl section the sub items are not displayed.I want to display the menu items when I hover on Girl section Can someone please help me on this. I'm not able to figure it out.
You forget dashed into submenu class now .sub-menu also forget display: block; Please Try following Code for good design.
.header{
display:inline-block;
vertical-align: top;
list-style-type: none;
}
.header ul {
padding: 0;
}
.header .dropbtn {
font-size: 16px;
border: none;
color: #111;
padding: 14px 16px;
margin: 0;
background: inherit;
display: inline-block;
}
.header:hover .dropbtn {
background-color: #00b5cc;
}
.dropdown-content {
list-style-type: none;
margin: 0px;
padding: 0px;
display: none;
list-style-type: 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 li a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content li a:hover {
background-color: #ddd;
}
.header:hover .dropdown-content {
display: block;
}
.drop-button {
font-size: 16px;
border: none;
color: #111;
padding: 14px 16px;
margin: 0;
background: inherit;
}
.sub-menu{
list-style-type: none;
display:none;
}
.dropdown-content:hover .sub-menu{
background-color: red;
display: block;
}
<ul class="header">
<li>
<a class="dropbtn ">Apparel</a>
<ul class="dropdown-content">
<li>
<a>Girls</a>
<ul class="sub-menu">
<li><a>Shoes</a></li>
<li><a>Pants</a></li>
<li><a>Skirts</a></li>
<li><a>Tops</a></li>
</ul>
</li>
</ul>
</li>
</ul>
Please Try This Code
.header{
display:inline-block;
vertical-align: top;
list-style-type: none;
}
.header .dropbtn {
font-size: 16px;
border: none;
color: #111;
padding: 14px 16px;
margin: 0;
background: inherit;
}
.header:hover .dropbtn {
background-color: #00b5cc;
}
.dropdown-content {
list-style-type: none;
margin: 0px;
padding: 0px;
display: none;
list-style-type: 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 li a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content li a:hover {
background-color: #ddd;
}
.header:hover .dropdown-content {
display: block;
}
.drop-button {
font-size: 16px;
border: none;
color: #111;
padding: 14px 16px;
margin: 0;
background: inherit;
}
.sub-menu{
list-style-type: none;
display:none;
}
.dropdown-content:hover .submenu{
background-color: red;
}
.dropdown-content li:hover .sub-menu { display: block; }
HTML:-
<ul class="header">
<li>
<a class="dropbtn ">
Apparel
</a>
<ul class="dropdown-content">
<li>
<a>Girls</a>
<ul class="sub-menu">
<li><a>Shoes</a></li>
<li><a>Pants</a></li>
<li><a>Skirts</a></li>
<li><a>Tops</a></li>
</ul>
</li>
</ul>
</li>
</ul>
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'm having trouble with my unordered lists because the list I'm trying to create is this:
A
B
But I'm instead getting a list which is all on one line, and the bullet point for B overlaps A. Here's the relevant piece of my CSS code:
ul.c li {
list-style-type: disc;
background: #F2D7D5;
font-family: 'lato', sans-serif;
margin: 5px;
font-size: large;
}
<ul class="c">
<li>A</li>
<li>B</li>
</ul>
Here's a screenshot of what I'm seeing
EDIT:
Here's all the other code I have that relates to lists. I used this for the navigation bar at the top of the page:
li {
float: left;
}
li a {
font-family: 'Rye',cursive;
font-size: 20px;
display: block;
color: black;
text-align: center;
padding: 5px 20px;
text-decoration: none;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 8px 61.25px;
text-decoration: none;
background-color: black;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: indianred;
}
li a:hover {
background-color: indianred;
}
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);
padding: 12px 16px;
z-index: 1;
}
.dropdown-content a {
color: black;
background-color: #f1f1f1;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
Mr Lister got it; it was my
li {
float: left;
}
I'm trying to create a simple dropdown menu (with only CSS) in a navbar with multiple links, the problem is that the dropdown menu will show with every link and not only with the desired one. Here is the code:
HTML & CSS
ul {
list-style: none;
}
.topNav {
background-color: #ff66b3;
overflow: hidden;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
position: relative;
}
.topNav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 8px;
text-decoration: none;
font-size: 14px;
}
.topNav a:hover {
background-color: #ffb3d9;
color: black;
}
.dropDown {
display: none;
position: absolute;
z-index: 1;
min-width: 160px;
}
.dropDown a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.topNav .mainLink:hover .dropDown {
display: block;
}
<div class="topNav" id="myTopnav">
<a class="mainLink" id="menuIcon" href="#home">☰</a>
<a class="mainLink" href="#home">NerdBook</a>
<div class="dropDown">
News
Contact
About
</div>
</div>
The dropdown will have to show only on the "menuIcon" link.
You already have an ID on the <a> tag you want to trigger the :hover so use that as reference selector. Also your code doesn't work because .dropDown ins't a child of your link change it to match as sibling:
#menuIcon:hover ~ .dropDown
ul {
list-style: none;
}
.topNav {
background-color: #ff66b3;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
position: relative;
}
.topNav:after {
content:"";
display:table;
clear:both;
}
.topNav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 8px;
text-decoration: none;
font-size: 14px;
}
.topNav a:hover {
background-color: #ffb3d9;
color: black;
}
.dropDown {
background:#e1e1e1;
display: none;
position: absolute;
top:100%;
z-index: 1;
min-width: 160px;
}
.dropDown a {
float:none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
#menuIcon:hover ~ .dropDown, .dropDown:hover {
display: block;
}
<div class="topNav" id="myTopnav">
<a class="mainLink" id="menuIcon" href="#home">☰</a>
<a class="mainLink" href="#home">NerdBook</a>
<div class="dropDown">
News
Contact
About
</div>
</div>