I'm trying to make a drop-down menu appear when mouse-hovered, but for some reason, the menu doesn't appear.
* {
margin: 0;
padding: 0;
}
.header {
position: fixed;
list-style-type: none;
height: 35px;
width: 100%;
overflow: hidden;
background: #333333;
}
.header > li {
display: inline-block;
padding: 8px;
}
.header > li:hover {
background: #000000;
}
.home {
margin-left: 10%;
}
.home a:link {
color: #FFF;
}
.home a:visited {
color: #AAA;
}
.home a:hover {
color: #00F;
}
.home a:active {
color: #F00;
}
.dropdown {
display: block; /* I guess that something is wrong here */
width: auto;
color: #FFF;
}
.dropdown li {
list-style-type: none;
display: block; /* I guess that something is wrong here too */
position: absolute; /* and here */
top: 100%;
color: red;
width: auto;
opacity: 0;
background: yellow;
border: 1px solid black;
transition: opacity 1s;
}
.dropdown:hover,
.dropdown li:hover {
opacity: 1;
}
.main {
margin-top: 20px;
padding-top: 20px;
height: 50px;
display: block;
background: white;
text-align: center;
font-size: 20px;
transition: background 1s;
}
.main:hover {
background: #CCCCCC;
}
<body>
<ul class="header">
<li class="home">⌂ Home
</li>
<li class="dropdown">Dropdown ❱
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</li>
</ul>
<br>
<section>
<div class="main">
Content...
</div>
</section>
</body>
I'm trying to do this using CSS and HTML only.
I've commented beside three lines which I think are causing the problem, but I can't seem to figure it out. What is the issue? How do I fix it?
Firstly, we remove the overflow:hidden from the header which would stop the submenus from showing at all.
Then the parent li should be set to position:relative and the child ul to position:absolute (not the individual li).
Remove the display:none on :hover and there you are.
* {
margin: 0;
padding: 0;
}
.header {
position: fixed;
list-style-type: none;
height: 35px;
width: 100%;
/*overflow: hidden;*/
background: #333333;
}
.header > li {
display: inline-block;
padding: 8px;
}
.header > li:hover {
background: #000000;
}
.home {
margin-left: 10%;
}
.home a:link {
color: #FFF;
}
.home a:visited {
color: #AAA;
}
.home a:hover {
color: #00F;
}
.home a:active {
color: #F00;
}
.dropdown {
color: #FFF;
position: relative;
}
.dropdown ul {
list-style-type: none;
position: absolute;
/* and here */
top: 100%;
left: 0;
color: red;
width: auto;
display: none;
background: yellow;
border: 1px solid black;
}
.dropdown:hover ul {
display: block;
}
.main {
margin-top: 20px;
padding-top: 20px;
height: 50px;
display: block;
background: white;
text-align: center;
font-size: 20px;
transition: background 1s;
}
.main:hover {
background: #CCCCCC;
}
<body>
<ul class="header">
<li class="home">⌂ Home
</li>
<li class="dropdown">Dropdown ❱
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</li>
</ul>
<br>
<section>
<div class="main">
Content...
</div>
</section>
</body>
Related
I am trying to create a horizontal navbar with a logo on the left and the menu items on the right of the navbar. I can find the basic setup for this, but what I cannot find is how to create sub menus off of some of the parent links :( here is what I have so far, I am kinda new - so please, if you can, be gentle k :)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body {
background-color: green;
}
header {
height: 100px;
background-color: white;
padding: 10px 0;
}
.menu-wrap {
display: flex;
justify-content: space-between;
padding: 0 15px;
}
.logo-img {
height: 79px;
}
.menu-icon {
font-size: 2.4em;
color: #ffffff;
line-height: 50px;
}
nav {
position: absolute;
background-color: #3D4852;
top: 70px;
left: 0;
width: 100%;
}
nav ul {
list-style-type: none;
}
nav ul li {
padding: 0 15px;
}
nav ul li a {
display: inline-block;
padding: 12px;
/* Add your custom styles below to change appearance of links */
color: black;
text-decoration: none;
letter-spacing: 0.05em;
}
nav ul li a:hover,
nav ul li a:focus {
color: #eb6f4a;
}
nav ul li a:hover,
nav ul li a:focus {
color: #eb6f4a;
}
#checkbox {
display: none;
}
#checkbox:checked~nav ul {
max-height: 200px;
padding: 15px 0;
transition: all 0.5s;
}
#media (min-width: 768px) {
.menu-icon {
display: none;
}
nav {
position: relative;
top: -10px;
background-color: transparent;
}
nav ul {
max-height: 70px;
padding: 15px 0;
text-align: right;
}
nav ul li {
display: inline-flex;
padding-left: 20px;
}
<header class="menu">
<div class="menu-wrap">
<img src="logoHOLD.gif" class="logo-img" alt="Logo">
<input type="checkbox" id="checkbox">
<label for="checkbox"><i class="fa fa-bars menu-icon"></i></label>
<nav>
<ul>
<li>Home</li>
<li>Topics
<ul>
<li>Item One
<li>Item Two
<li>Item Three
</ul>
</li>
<li>Commentaries</li>
<li>Donate</li>
<li>Something</li>
</ul>
</nav>
</div>
</header>
What you'll need to do is assign a class or id to the parent ul that has the other ul you want to appear as a dropdown and give it a relative position. Then, give the child ul (the dropdown element) absolute positioning and play around with transform / top / opacity values. That's one way to do it.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body {
background-color: green;
}
header {
height: 100px;
background-color: white;
padding: 10px 0;
}
.menu-wrap {
display: flex;
justify-content: space-between;
padding: 0 15px;
}
.logo-img {
height: 79px;
}
.menu-icon {
font-size: 2.4em;
color: #ffffff;
line-height: 50px;
}
nav {
position: absolute;
background-color: #3D4852;
top: 70px;
left: 0;
width: 100%;
}
nav ul {
list-style-type: none;
}
nav ul li {
padding: 0 15px;
}
nav ul li a {
display: inline-block;
padding: 12px;
/* Add your custom styles below to change appearance of links */
color: black;
text-decoration: none;
letter-spacing: 0.05em;
}
nav ul li a:hover,
nav ul li a:focus {
color: #eb6f4a;
}
nav ul li a:hover,
nav ul li a:focus {
color: #eb6f4a;
}
#checkbox {
display: none;
}
#checkbox:checked~nav ul {
max-height: 200px;
padding: 15px 0;
transition: all 0.5s;
}
#media (min-width: 768px) {
.menu-icon {
display: none;
}
nav {
position: relative;
top: -10px;
background-color: transparent;
}
nav ul {
max-height: 70px;
padding: 15px 0;
text-align: right;
}
nav ul li {
display: inline-flex;
padding-left: 20px;
}
.dd-parent {
position: relative;
}
.dd-list {
position: absolute;
top: 25px;
left: 0;
width: 100%;
transform: scaleY(0);
opacity: 0;
transition: .3s all ease;
transform-origin: top;
}
.dd-list li {
text-align: left;
background: DarkOrchid;
color: white;
}
.dd-list li:not(:first-of-type) {
border-top: 2px solid black;
}
.dd-parent:hover > .dd-list {
transform: none;
opacity: 1;
}
<header class="menu">
<div class="menu-wrap">
<img src="logoHOLD.gif" class="logo-img" alt="Logo">
<input type="checkbox" id="checkbox">
<label for="checkbox"><i class="fa fa-bars menu-icon"></i></label>
<nav>
<ul>
<li>Home</li>
<li class="dd-parent">Topics
<ul class="dd-list">
<li>Item One
<li>Item Two
<li>Item Three
</ul>
</li>
<li>Commentaries</li>
<li>Donate</li>
<li>Something</li>
</ul>
</nav>
</div>
</header>
In this jsfiddle I do have a menu which displays dropdown menus for some items. The main menu and the submenu items do have an increased height. I am using the line-height property for this purpose.
/* body ---------------------------------------------------------- */
body {
font-family: Calibri, sans-serif;
min-height: 100vh;
display: flex;
flex-direction: column;
margin: 0;
}
/* header ---------------------------------------------------------- */
header {
width: 100%;
}
.header-div {
width: 920px;
margin-left: auto;
margin-right: auto;
}
/* main-menu ---------------------------------------------------------- */
div.float-left-menu {
float: left;
clear: both;
}
ul#main-menu {
display: inline;
padding: 0;
position: relative;
font-size: 1.1em;
text-align: center;
}
ul#main-menu li {
display: inline-block;
line-height: 200%;
list-style: none;
vertical-align: middle;
width: 120px;
}
ul#main-menu li:hover {
background-color: #4f569d;
}
ul#main-menu li a {
background: none;
color: #4f569d;
text-decoration: none;
text-transform: uppercase;
}
ul#main-menu li span {
background: none;
color: #4f569d;
text-transform: uppercase;
}
ul#main-menu li:hover>a {
color: #fff;
text-decoration: none;
}
ul#main-menu li:hover>span {
color: #fff;
}
ul#main-menu li:hover>ul {
display: block;
position: absolute;
/*top: 138%; hack for FF, otherwise there is a gap between the main menu and the dropdown menu*/
}
/* header-submenu ---------------------------------------------------------- */
ul#header-submenu {
display: none;
padding: 0;
text-align: left;
z-index: 1;
}
ul#header-submenu li {
display: block;
line-height: 200%;
padding-left: 5%;
background-color: #bbb;
list-style: none;
vertical-align: middle;
width: 240px;
}
ul#header-submenu li:hover {
background-color: #4f569d;
}
ul #header-submenu li a {
background: none;
color: #4f569d;
text-decoration: none;
}
ul#header-submenu li:hover>a {
color: #fff;
text-decoration: none;
}
<header>
<div class="header-div">
<div class="float-left-menu">
<nav>
<ul id="main-menu">
<li>Item 1</li>
<li>
<span>Sub 1</span>
<ul id="header-submenu">
<li>SItem 1</li>
<li>SItem 2</li>
</ul>
</li>
<li>
<span>Sub 2</span>
<ul id="header-submenu">
<li>SItem 1</li>
<li>SItem 2</li>
</ul>
</li>
<li>Item 2</li>
</ul>
</nav>
</div>
</div>
</header>
While the dropdown menu is displayed seemlessly below its parent item in Chrome, IE and Edge, Firefox displays a gap, which not only looks unfavourable but also makes the dropdown go away when the mouse cursor is moved there for selection. The problem does not appear with 'normal' height.
For line-height: 200%; I was able to fix the problem by adding top: 138%; to the ul of the dropdown, but frankly this approach is too much try-and-error.
Is there a cleaner solution for Firefox?
Use position to get the same
Update css part
ul#main-menu li {
display: inline-block;
line-height: 200%;
list-style: none;
vertical-align: middle;
width: 120px;
position:relative; /*add this*/
}
ul#header-submenu {
display: none;
padding: 0;
text-align: left;
z-index: 1;
position:absolute; /*add this*/
top:auto; /*add this you can change as your need */
left:0px; /*add this you can change as your need */
}
/* body ---------------------------------------------------------- */
body {
font-family: Calibri, sans-serif;
min-height: 100vh;
display: flex;
flex-direction: column;
margin: 0;
/* put the top margin into the header, otherwise there will always be a vertical scrollbar */
}
/* header ---------------------------------------------------------- */
header {
width: 100%;
}
.header-div {
width: 920px;
margin-left: auto;
margin-right: auto;
}
/* main-menu ---------------------------------------------------------- */
div.float-left-menu {
float: left;
clear: both;
}
ul#main-menu {
display: inline;
padding: 0;
position: relative;
font-size: 1.1em;
text-align: center;
}
ul#main-menu li {
display: inline-block;
line-height: 200%;
list-style: none;
vertical-align: middle;
width: 120px;
position: relative;
}
ul#main-menu li:hover {
background-color: #4f569d;
}
ul#main-menu li a {
background: none;
color: #4f569d;
text-decoration: none;
text-transform: uppercase;
}
ul#main-menu li span {
background: none;
color: #4f569d;
text-transform: uppercase;
}
ul#main-menu li:hover>a {
color: #fff;
text-decoration: none;
}
ul#main-menu li:hover>span {
color: #fff;
}
ul#main-menu li:hover>ul {
display: block;
position: absolute;
/*top: 138%; hack for FF, otherwise there is a gap between the main menu and the dropdown menu*/
}
/* header-submenu ---------------------------------------------------------- */
ul#header-submenu {
display: none;
padding: 0;
text-align: left;
z-index: 1;
position: absolute;
top: auto;
left: 0px;
}
ul#header-submenu li {
display: block;
line-height: 200%;
padding-left: 5%;
background-color: #eee;
list-style: none;
vertical-align: middle;
width: 240px;
}
ul#header-submenu li:hover {
background-color: #4f569d;
}
ul #header-submenu li a {
background: none;
color: #4f569d;
text-decoration: none;
}
ul#header-submenu li:hover>a {
color: #fff;
text-decoration: none;
}
<!DOCTYPE html>
<body>
<header>
<div class="header-div">
<div class="float-left-menu">
<nav>
<ul id="main-menu">
<li>Item 1</li>
<li>
<span>Sub 1</span>
<ul id="header-submenu">
<li>SItem 1</li>
<li>SItem 2</li>
</ul>
</li>
<li>
<span>Sub 2</span>
<ul id="header-submenu">
<li>SItem 1</li>
<li>SItem 2</li>
</ul>
</li>
<li>Item 2</li>
</ul>
</nav>
</div>
</div>
</header>
</body>
</html>
Working fiddle also included
fiddle link
Drop down issues
I'm trying to make a purely CSS dropdown menu and I have looked at other questions about this, but none of the solutions seem to work. The problem I have is that when I hover over the drop down button, it does display the menu, however it brings the whole nav-bar down with it.
body {
background-color: #15083E;
margin: 0;
}
.top-buttons {
position: fixed;
width: 100%;
z-index: 99;
}
.top-buttons #logo {
font-family: arial;
text-align: center;
padding: 14px;
background-color: white;
}
.top-buttons>ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #15083E;
border-style: solid;
border-bottom: 1px solid white;
position: relative;
}
.top-buttons>ul>li {
float: left;
}
.top-buttons>ul>li>ul {
display: none;
background: #666;
padding: 0;
position: relative;
top: 100%;
}
.top-buttons>ul>li a {
display: block;
color: white;
font-family: arial, sans-serif;
text-align: center;
padding: 14px 16px;
text-decoration: none;
min-width: 7em;
}
.top-buttons li a:hover {
background-color: #CC3E54;
}
.active {
background-color: #CC3E54;
}
.top-buttons ul li:hover>ul {
display: block;
position: relative;
float: none;
max-width: 7rem;
}
.top-buttons ul ul {
display: none;
position: absolute;
vertical-align: top;
}
.top-buttons>ul ul>li {
background-color: #15083E;
list-style-type: none;
}
.top-buttons>ul ul>li a {
background-color: #15083E;
}
<nav class="top-buttons">
<ul>
<li id="logo">Logo</li>
<li><a class="active" href="index.htm">Home</a></li>
<li>Placeholder</li>
<li><a>DropDown</a>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
<li>Services</li>
</ul>
</nav>
My html probably isn't the best, i'm relatively new to it.
Any suggestions would be greatly appreciated!
Your HTML isn't bad. You were pretty close to a working solution. The main thing you were missing was that your dropdown needs to use absolute positioning inside it's relative positioned parent element. The reason the parent needs relative positioning is so that the absolute positioned child element (the dropdown menu) can be contained within it, otherwise it'll end up where you don't want it.
The other thing that was somewhat important to fix was overflow: hidden; on the top level ul. Once absolute positioning is in place for the dropdown, overflow hidden will hide anything that's outside of the ul. You don't want that. If you remove it then your bottom border doesn't end up where you want it so you need another way to clear the floated li. I used a clearfix to do this, hence the addition of the .cf class on the ul.
body {
background-color: #15083E;
margin: 0;
}
.top-buttons {
position: fixed;
width: 100%;
z-index: 99;
}
.top-buttons #logo {
font-family: arial;
text-align: center;
padding: 14px;
background-color: white;
}
.top-buttons>ul {
list-style-type: none;
margin: 0;
padding: 0;
/* overflow: hidden; */
background-color: #15083E;
border-style: solid;
border-bottom: 1px solid white;
/* position: relative; */
}
.top-buttons>ul>li {
position: relative;
/* added */
float: left;
}
.top-buttons>ul>li>ul {
display: none;
background: #666;
padding: 0;
/* position: relative; */
position: absolute;
/* top: 100%; */
}
.top-buttons>ul>li a {
display: block;
color: white;
font-family: arial, sans-serif;
text-align: center;
padding: 14px 16px;
text-decoration: none;
min-width: 7em;
}
.top-buttons li a:hover {
background-color: #CC3E54;
}
.active {
background-color: #CC3E54;
}
.top-buttons ul li:hover>ul {
display: block;
/* position: relative; */
/* float: none; */
max-width: 7rem;
}
/*
.top-buttons ul ul {
display: none;
position: absolute;
vertical-align: top;
}
*/
.top-buttons>ul ul>li {
background-color: #15083E;
list-style-type: none;
}
.top-buttons>ul ul>li a {
background-color: #15083E;
}
.cf:before,
.cf:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.cf:after {
clear: both;
}
<nav class="top-buttons">
<ul class="cf">
<li id="logo">Logo</li>
<li><a class="active" href="index.htm">Home</a></li>
<li>Placeholder</li>
<li><a>DropDown</a>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
<li>Services</li>
</ul>
</nav>
I see a few areas of improvement for the CSS but overall not bad.
When I hover over "Dropdown >", the dropdown menu appears at the left side below the top bar. How do I align it just below "Dropdown >"?
Note that I am trying to do this with only CSS and HTML.
My Code:
* {
margin: 0;
padding: 0;
}
header {
position: fixed;
height: 35px;
width: 100%;
background: black;
}
.top-container {
margin-top: 7px;
}
/* Code for drop-down list */
.dropdown {
margin-left: 100px;
display: inline;
color: #FFF;
}
.dropdown_list {
list-style: none;
display: none;
position: absolute;
color: red;
}
.dropdown_list li {
background: yellow;
}
.dropdown:hover {
background: #333;
}
.dropdown:hover .dropdown_list,
.dropdown_list:hover {
display: block;
top: 100%;
}
<body>
<header>
<div class="top-container">
<div class="dropdown">Dropdown ❱
<ul class="dropdown_list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
</div>
</header>
</body>
Change .dropdown from inline to inline-block:
.dropdown {
display: inline-block;
}
Snippet:
* {
margin: 0;
padding: 0;
}
header {
position: fixed;
height: 35px;
width: 100%;
background: black;
}
.top-container {
margin-top: 7px;
}
/* Code for drop-down list */
.dropdown {
margin-left: 100px;
display: inline-block;
color: #FFF;
}
.dropdown_list {
list-style: none;
display: none;
position: absolute;
color: red;
}
.dropdown_list li {
background: yellow;
}
.dropdown:hover {
background: #333;
}
.dropdown:hover .dropdown_list,
.dropdown_list:hover {
display: block;
top: 100%;
}
<body>
<header>
<div class="top-container">
<div class="dropdown">Dropdown ❱
<ul class="dropdown_list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
</div>
</header>
</body>
Try this
Add position:relative to class .dropdown now your .dropdown_list is relative to the .dropdown you can use top left right bottom to place your .dropdown_list as you want.
* {
margin: 0;
padding: 0;
}
header {
position: fixed;
height: 35px;
width: 100%;
background: black;
}
.top-container {
margin-top: 7px;
}
/* Code for drop-down list */
.dropdown {
margin-left: 100px;
display: inline;
color: #FFF;
position: relative;
}
.dropdown_list {
list-style: none;
display: none;
position: absolute;
color: red;
top: 0;
left: 0;
}
.dropdown_list li {
background: yellow;
}
.dropdown:hover {
background: #333;
}
.dropdown:hover .dropdown_list,
.dropdown_list:hover {
display: block;
top: 100%;
}
<body>
<header>
<div class="top-container">
<div class="dropdown">Dropdown ❱
<ul class="dropdown_list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
</div>
</header>
</body>
Add position: relative to .dropdown and left:0 to .dropdown_list
.dropdown {
margin-left: 100px;
display: inline;
position: relative;/*add this*/
color: #FFF;
}
.dropdown_list {
list-style: none;
display: none;
position: absolute;
color: red;
left: 0; /*add this*/
}
Apply the left-margin to the container and set position: relative for the popup menu.
Example: https://jsfiddle.net/jt83vj28/
I have a simple <nav> with an unordered list inside:
nav {
position: absolute;
right: 0px;
white-space: nowrap;
}
nav ul {
padding: 0;
margin: 0;
}
nav ul li {
clear: both;
white-space: nowrap;
color: white;
display: inline-block;
}
nav ul li a {
color: white;
background: black;
text-decoration: none;
text-align: center;
font-family: statellite;
padding-left: 25px;
padding-right: 25px;
height: 37px;
margin-left: -4px;
padding-top: 18px;
display: inline-block;
}
nav ul li a:hover {
background: #000;
}
nav li a:nth-child(1):hover {
background: red;
}
<nav>
<ul>
<li>HOME
</li>
<li>MUSIC
</li>
<li>LIVESTREAM
</li>
<li>LINKS
</li>
<li>ABOUT
</li>
</ul>
</nav>
I am trying to make a different color on hover for each child <a>
but instead it is selecting all of them (highlighting them red)
nav li a:nth-child(1):hover {
background: red;
}
What am I doing wrong?
All your A are the first element of their parent. You must apply the nth-child on the LI element, not on the A:
nav li:nth-child(1) a:hover {
background: red;
}
nav {
position: absolute;
right: 0px;
white-space: nowrap;
}
nav ul {
padding: 0;
margin: 0;
}
nav ul li {
clear: both;
white-space: nowrap;
color: white;
display: inline-block;
}
nav ul li a {
color: white;
background: black;
text-decoration: none;
text-align: center;
font-family: statellite;
padding-left: 25px;
padding-right: 25px;
height: 37px;
margin-left: -4px;
padding-top: 18px;
display: inline-block;
}
nav ul li a:hover {
background: #000;
}
nav li:nth-child(1) a:hover {
background: red;
}
nav li:nth-child(2) a:hover {
background: #555;
}
nav li:nth-child(3) a:hover {
background: green;
}
nav li:nth-child(4) a:hover {
background: blue;
}
<nav>
<ul>
<li>HOME
</li>
<li>MUSIC
</li>
<li>LIVESTREAM
</li>
<li>LINKS
</li>
<li>ABOUT
</li>
</ul>
</nav>
nav {
position: absolute;
right: 0px;
white-space: nowrap;
}
nav ul {
padding: 0;
margin: 0;
}
nav ul li {
clear: both;
white-space: nowrap;
color: white;
display: inline-block;
}
nav ul li a {
color: white;
background: black;
text-decoration: none;
text-align: center;
font-family: statellite;
padding-left: 25px;
padding-right: 25px;
height: 37px;
margin-left: -4px;
padding-top: 18px;
display: inline-block;
}
nav ul li a:hover {
background: #000;
}
nav li:nth-child(1) a:hover {
background: green;
}
nav li:nth-child(2) a:hover {
background: blue;
}
nav li:nth-child(3) a:hover {
background: pink;
}
<nav>
<ul>
<li>HOME
</li>
<li>MUSIC
</li>
<li>LIVESTREAM
</li>
<li>LINKS
</li>
<li>ABOUT
</li>
</ul>
</nav>