My intention is to make a top navigation bar, in which the list item PROJECTS is supposed to be a dropdown. So far the dropdown is working, but it takes as much width as the parent element. I want to dissociate the dropdown content from the navigation item without changing formatting properties, such that it occupies just as much space needed by its items and is also positioned right below PROJECTS.
My code:
body{
margin: 0;
padding: 0;
}
nav ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
background-color: #666666;
position: fixed;
top: 0px;
}
nav li{
float: left;
}
nav li a{
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-family: sans-serif;
padding: 15px;
display: block;
}
nav li a:hover:not(.active){
background-color: #444;
}
nav li a.active{
background-color: rgba(0, 150, 0, 1);
}
main{
padding-top: 30px;
}
.dropdown_content{
display: none;
width: auto;
}
.dropbtn:hover .dropdown_content{
display: block;
}
<body>
<header>
<nav class="nav">
<ul>
<li> Home </li>
<li> About </li>
<li class="dropbtn">
Projects
<div class="dropdown_content">
HTML
CSS
JavaScript
</div>
</li>
<li> Contact </li>
</ul>
</nav>
</header>
<main>
</main>
<footer>
</footer>
</body>
How the result looks now:
How I want it to look(image edited)
Thank you in advance.
Just add position: fixed and background-color: #666666 for dropdown_content. Like that:
.dropdown_content {
...
position: fixed;
background-color: #666666;
}
This will not break the positioning of the dropdown menu, because the ul tag also has a fixed positioning.
body {
margin: 0;
padding: 0;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
background-color: #666666;
position: fixed;
top: 0px;
}
nav li {
float: left;
}
nav li a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-family: sans-serif;
padding: 15px;
display: block;
}
nav li a:hover:not(.active) {
background-color: #444;
}
nav li a.active {
background-color: rgba(0, 150, 0, 1);
}
main {
padding-top: 30px;
}
.dropdown_content {
display: none;
width: auto;
position: fixed;
background-color: #666666;
}
.dropbtn:hover .dropdown_content {
display: block;
}
<body>
<header>
<nav class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li class="dropbtn">
Projects
<div class="dropdown_content">
HTML
CSS
JavaScript
</div>
</li>
<li>Contact</li>
</ul>
</nav>
</header>
<main></main>
<footer></footer>
</body>
You can try absolute positioning.
body {
margin: 0;
padding: 0;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
background-color: #666666;
position: fixed;
top: 0px;
font-size: 0;
}
nav li {
display: inline-block;
}
nav li a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-family: sans-serif;
padding: 15px;
display: block;
font-size: 16px;
}
nav li a:hover:not(.active) {
background-color: #444;
}
nav li a.active {
background-color: rgba(0, 150, 0, 1);
}
main {
padding-top: 30px;
}
.dropdown_content {
position: absolute;
display: none;
background-color: #666666;
}
.dropbtn:hover .dropdown_content {
display: block;
}
<body>
<header>
<nav class="nav">
<ul>
<li> Home </li>
<li> About </li>
<li class="dropbtn">
Projects
<div class="dropdown_content">
HTML
CSS
JavaScript
</div>
</li>
<li> Contact </li>
</ul>
</nav>
</header>
<main>
</main>
<footer>
</footer>
</body>
Related
This question already has answers here:
How to style the parent element when hovering a child element?
(8 answers)
Closed 3 years ago.
I have a navigation bar that is outputs a border-bottom when i hover over the li but when i hover over the child elements of that li, the :hover stops, how do i make it so that the :hover remains even when i hover over the child elements.
I would like to add some parts of the code. This is the HTML file.
* {
margin: 0;
padding: 0;
border: 0;
}
` header {
background: #fff;
width: 100%;
}
.navbar {
padding: 0;
}
.navbar nav {
width: 100%;
height: 115px;
}
.navbar nav ul {
float: right;
margin: 0;
}
.navbar nav ul li {
text-decoration: none;
float: left;
list-style: none;
position: relative;
}
.navbar nav ul li a {
color: black;
display: block;
padding: 45.5px 14px;
text-decoration: none;
}
.parent-a:hover {
border-bottom: #aa312c 4px solid;
padding: 25.5px 14px;
margin: 18px 0;
}
.level2-ul:hover .parent-a {
border-bottom: #aa312c 4px solid;
padding: 25.5px 14px;
margin: 18px 0;
}
.navbar nav ul li ul {
display: none;
position: absolute;
background-color: white;
padding: 0;
border-radius: 0px 0px 4px 4px;
}
.navbar nav ul li:hover ul {
display: block;
background-color: rgb(234, 236, 237);
z-index: 100;
}
.navbar nav ul li ul li {
width: 180px;
border-radius: 4px;
}
.navbar nav ul li ul li a {
color: black;
padding: 8px 14px;
border-bottom: 1px solid #dedfe1;
}
.navbar nav ul li ul li a:hover {
background: #dedfe1;
}
#headline {
color: #fff;
padding: 4px;
font-size: 1.5rem;
margin: 0;
text-align: center;
font-weight: bold;
}
#headline-wrapper {
background: #aa312c;
}
<header>
<div id="header-wrapper">
<div class="body" id="logo-wrapper">
<!-- Navigation start -->
<div class="navbar">
<nav>
<ul>
<li>
<a class="parent-a" href="#">Online Activities</a>
<ul>
<li class="level2-ul">Google</li>
<li class="level2-ul">Youtube</li>
<li class="level2-ul">Reddit</li>
</ul>
</li>
<li>
<a class="parent-a" href="#">Social Media</a>
<ul>
<li>Facebook</li>
<li>Instagram</li>
<li>Twitter</li>
</ul>
</li>
<li>
<a class="parent-a" href="#">Online Shopping</a>
<ul>
<li>Shopee</li>
<li>Lazada</li>
<li>Carousell</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
<div id="headline-wrapper">
<h2 id="headline" class="text-center text-uppercase">
Software Quotation Tool
</h2>
</div>
</div>
</header>
By doing this, I can hover over the 3 nav lis and :hover would be activated. However, as soon as I hover over the inner li, the :hover stopped, I tried using .level2-ul but unable to do so. Thank you for the help.
Put parent-a on the li rather than on the a.
* {
margin: 0;
padding: 0;
border: 0;
}
` header {
background: #fff;
width: 100%;
}
.navbar {
padding: 0;
}
.navbar nav {
width: 100%;
height: 115px;
}
.navbar nav ul {
float: right;
margin: 0;
}
.navbar nav ul li {
text-decoration: none;
float: left;
list-style: none;
position: relative;
}
.navbar nav ul li a {
color: black;
display: block;
padding: 45.5px 14px;
text-decoration: none;
}
.parent-a:hover > a {
border-bottom: #aa312c 4px solid;
padding: 25.5px 14px;
margin: 18px 0;
}
.level2-ul:hover .parent-a {
border-bottom: #aa312c 4px solid;
padding: 25.5px 14px;
margin: 18px 0;
}
.navbar nav ul li ul {
display: none;
position: absolute;
background-color: white;
padding: 0;
border-radius: 0px 0px 4px 4px;
}
.navbar nav ul li:hover ul {
display: block;
background-color: rgb(234, 236, 237);
z-index: 100;
}
.navbar nav ul li ul li {
width: 180px;
border-radius: 4px;
}
.navbar nav ul li ul li a {
color: black;
padding: 8px 14px;
border-bottom: 1px solid #dedfe1;
}
.navbar nav ul li ul li a:hover {
background: #dedfe1;
}
#headline {
color: #fff;
padding: 4px;
font-size: 1.5rem;
margin: 0;
text-align: center;
font-weight: bold;
}
#headline-wrapper {
background: #aa312c;
}
<header>
<div id="header-wrapper">
<div class="body" id="logo-wrapper">
<!-- Navigation start -->
<div class="navbar">
<nav>
<ul>
<li class="parent-a" >
Online Activities
<ul>
<li class="level2-ul">Google</li>
<li class="level2-ul">Youtube</li>
<li class="level2-ul">Reddit</li>
</ul>
</li>
<li class="parent-a">
Social Media
<ul>
<li>Facebook</li>
<li>Instagram</li>
<li>Twitter</li>
</ul>
</li>
<li class="parent-a">
Online Shopping
<ul>
<li>Shopee</li>
<li>Lazada</li>
<li>Carousell</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
I'm trying to do a nav bar with a contact button stuck to the right of the page. I want contact to be aligned with the rest of the elements of the nav bar, however when I add float: right; it just disaligns my nav bar and it doesn't move contact to the right.
Here you can see my code: http://jsfiddle.net/LG2vR/19/
Can someone please tell me the proper way to accomplish this please?
Thanks!
Am not sure if this is what you need exactly, see the updated fiddle
http://jsfiddle.net/ov74xcyg/1/
Basically, i have used position absolute to move your last child of the navigation to the right side and increased width of the navigation till the end of the header.
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
padding: 10px 100px;
z-index: 500;
box-sizing: content-box;
transition: .3s;
background: red;
}
nav.white {
background: white;
height: 35px;
padding: 10px 100px;
transition: .5s;
}
nav ul {
list-style: none;
float: left;
margin: 0;
padding: 0;
display: flex;
width: 90%;
position: relative;
}
nav ul li {
list-style: none;
}
nav ul li:last-child {
display: inline-block;
right: 5%;
position: absolute;
top: 0;
}
nav ul li a {
line-height: 80px;
color: #FFFFFF;
margin: 12px 30px;
text-decoration: none;
text-transform: capitalize;
transition: .5s;
padding: 10px 5px;
font-size: 16px;
}
nav ul li a:hover {
background-color: rgba(255,255,255,0.2);
}
nav.white ul li a {
color: #000;
line-height: 40px;
transition: .5s;
}
nav ul li a:focus {
outline: none;
}
<div class="wrapper">
<nav>
<ul>
<li>LOGO</li>
<li>Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li><a class="contact" href="#">Contact</a></li>
</ul>
</nav>
Just add:
nav ul li a {
float: left;
}
right before:
nav ul li a.contact {
float: right;
}
or use flexbox!
.wrapper li {list-style-type: none;}
.wrapper {
overflow: hidden;
background-color: red;
}
.wrapper .logo{
margin-right : 30px;
}
.wrapper a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.wrapper a:hover {
background-color: #ddd;
color: black;
}
.wrapper a.active {
background-color: #4CAF50;
color: white;
}
.topnav-right {
float: right;
}
<div class="wrapper">
<a class="active logo" href="#">Logo</a>
Home
Page 1
Page 2
<div class="topnav-right">
<li><a class="contact" href="#">Contact</a></li>
</div>
</div>
I am having an issue whenever I try to use a id element selector for the ul element. When I use the code currently commented out
/*#wrapper h1, h2, ul {
text-align: center;
font-weight: bold;
padding: 10px 0;
}*/
my nested drop down menu becomes out of position, however it shouldn't be doing that since my nav bar isn't even enclosed in the wrapper.
* {
margin: 0;
padding: 0;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
body {
padding: 0;
margin: 0;
font-family: 'Lato', Arial, sans-serif;
}
header {
background-color: #595959;
color: #fff;
padding-top: 30px;
min-height: 90px;
border-bottom: 3px solid #FFD700;
}
header .banner {
float: left;
}
header .banner h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 10px;
}
header ul {
float: left;
}
header li {
float: left;
position: relative;
width: 150px;
list-style: none;
}
header a {
display: block;
text-decoration: none;
font-size: 16px;
padding: 5px 15px;
color: #fff;
border: 2px solid black;
background: #595959;
font-weight: bold;
}
header a:hover {
color: #FFD700;
}
header ul ul {
position: absolute;
left: 0;
top: 100%;
visibility: hidden;
opacity: 0;
}
header ul ul ul {
left: 100%;
top: 0;
}
header li:hover,
header li:hover li,
header li li:hover,
header li li:hover li,
header li li li:hover {
background: rgba(89, 89, 89, 0.9);
transition-duration: 0.5s;
}
header li:hover>ul {
visibility: visible;
opacity: 1;
}
/*#wrapper h1, h2, ul {
text-align: center;
font-weight: bold;
padding: 10px 0;
}*/
<!DOCTYPE html>
</head>
<body>
<header>
<div id="banner-container">
<div class="banner">
<h1>A-Level</h1>
<nav>
<ul>
<li>Home</li>
<li>A-level
<ul>
<li>Maths
<ul>
<li>PLC</li>
<li>Revision</li>
<li>Exam Papers</li>
</ul>
</li>
<li>Physics
<ul>
<li>PLC</li>
<li>Revision</li>
<li>Exam Papers</li>
</ul>
</li>
<li>Computer Science
<ul>
<li>PLC</li>
<li>Revision</li>
<li>Exam Papers</li>
</ul>
</li>
</ul>
</li>
<li>TimeTable</li>
<li>Logout</li>
</ul>
</nav>
</header>
</body>
By defining 'h1, h2 & ul' in #wrapper, those elements in #wrapper will get the CSS you're defining. To use them inside #wrapper, use #wrapper h1, #wrapper h2, etc.
I'm trying to make a simple dropdown menu but the sub items of Meme don't stay in block.
If I remove float left of header li, the menu of Memes appears under Home.
HTML:
<header>
<div class="container">
<div id="brand">
<h1><span class="highlight">My</span> website</h1>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>Curriculum Vitae</li>
<li>PC Gaming</li>
<li>Memes
<ul>
<li>Hot</li>
<li>Trending</li>
<li>Upload File</li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
CSS:
header {
background: #35424a;
color: #fff;
padding-top: 30px;
min-height: 70px;
border-bottom: #e8491d 3px solid;
}
header a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #brand {
float: left;
}
header #brand h1 {
margin: 0;
}
header nav {
float:right;
margin-top: 10px;
}
header .highlight, header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover{
color: #ccc;
font-weight: bold;
}
nav ul li:hover ul {
display: block;
}
nav ul ul {
display:none;
position: absolute;
}
nav ul ul li {
display: block;
background: #e8491d;
}
Remove the float left and change the following:
header li {
position: relative;
display: inline;
padding: 0 20px 0 20px;
}
nav ul ul {
display:none;
position: absolute;
top: 100%;
left: 0;
}
demo
If you use a flexbox for the embedded menus, it handles with width of the sub-items better than floating does.
You can also change this flex to use flex-direction: row if you prefer that to the column.
Had to change a few other things in order to position the absolute element properly based on its parent menu element. But not too much has changed and I even included a following element to show how they will be aligned even with following submenus.
header {
background: #35424a;
color: #fff;
padding-top: 30px;
min-height: 70px;
border-bottom: #e8491d 3px solid;
}
header a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
display: inline-block;
padding: 0 20px;
}
header #brand {
float: left;
}
header #brand h1 {
margin: 0;
}
header nav {
float:right;
}
header .highlight, header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover{
color: #ccc;
font-weight: bold;
}
nav ul li:hover ul {
display: flex;
align-items: start;
flex-direction: column;
background: #e8491d;
}
nav > ul{
height: 20px;
}
nav ul li{
position: relative;
white-space: nowrap;
}
nav ul ul {
display:none;
position: absolute;
right: 0;
top: 100%;
width: auto;
padding: 0;
}
nav ul ul li {
padding: 0 5px;
}
<header>
<div class="container">
<div id="brand">
<h1><span class="highlight">My</span> website</h1>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>Curriculum Vitae</li>
<li>PC Gaming</li>
<li>Memes
<ul>
<li>Hot</li>
<li>Trending</li>
<li>Upload File</li>
</ul>
</li>
<li>Memes2
<ul>
<li>Hot</li>
<li>Trending</li>
<li>Upload File</li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
Remove the float:left off of header li and make it display:inline-block; instead.
Edit: I don't know how it doesn't work then, because it does in this fiddle, with the same code that you provided. There must be other code that you have that is conflicting, that you didn't include.
header {
background: #35424a;
color: #fff;
padding-top: 30px;
min-height: 70px;
border-bottom: #e8491d 3px solid;
}
header a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
display: inline-block;
padding: 0 20px 0 20px;
}
header #brand {
float: left;
}
header #brand h1 {
margin: 0;
}
header nav {
float:right;
margin-top: 10px;
}
header .highlight, header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover{
color: #ccc;
font-weight: bold;
}
nav ul li:hover ul {
display: block;
}
nav ul ul {
display:none;
position: absolute;
}
nav ul ul li {
display: block;
background: #e8491d;
}
<header>
<div class="container">
<div id="brand">
<h1><span class="highlight">My</span> website</h1>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>Curriculum Vitae</li>
<li>PC Gaming</li>
<li>Memes
<ul>
<li>Hot</li>
<li>Trending</li>
<li>Upload File</li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
I'm having problems where my dropdown menu made with CSS and HTML will force a linebreak and the dropdown menu will glitch out. You can see this problem by running my code.
/* HEADER/NAVBAR */
.main-nav {
text-decoration: none;
list-style-type: none;
display: inline;
text-align: center;
}
li {
display: inline-flex;
margin-left: 70px;
padding-bottom: 0px;
position: inherit;
text-transform: uppercase;
font-family: 'Hind', sans-serif;
font-size: 14px;
}
.nav {
display: inline-block;
padding-bottom: 45px;
margin-top: 65px;
margin-left: 150px;
}
img {
height: 80px;
padding: 20px 0px 0px 20px;
margin: 0px 0px 20px 9%;
display: inline-flex;
float: left;
}
a {
color: #6b6b6b !important;
text-decoration: none;
font-weight: 600;
}
.wrapper {
margin: 0px 9%;
background-color: #f0f0f0;
size: 100vh;
height: 100vh
}
body {
background-color: #f7f7f7 !important;
margin: 0px;
}
.sticky {
background-color: #fff;
}
/* DROP DOWN MENUS */
ul li a:hover {
color: #fff;
;
}
ul li ul.dropdown {
min-width: 10px;
/* Set width of the dropdown */
background: #f2f2f2;
display: none;
position: static;
z-index: 999;
left: 0;
}
ul li:hover ul.dropdown,
ul.dropdown:hover {
display: block;
/* Display the dropdown */
}
ul li ul.dropdown li {
display: block;
}
/* LEGAL STUFF */
.legal {
background-color: #444444;
height: 20vh;
text-align: center;
}
.copy {
padding: 4%;
color: #fff;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<nav class="sticky">
<div class="row">
<img src="logocopla.Jpg" alt="Copla Logo" class="logo">
<div class="nav">
<ul class="main-nav">
<li>
Home
</li>
<li>
About Us <i class="fa fa-angle-down" aria-hidden="true"></i>
</li>
<li>
Bolivia
</li>
<li>
Products <i class="fa fa-angle-down" `aria-hidden="true"></i>`
<ul class="dropdown">
<li>Laptops</li>
<li>Monitors</li>
<li>Printers</li>
</ul>
</li>
<li>
Contact Us
</li>
</ul>
</div>
</div>
</nav>
<div class="wrapper">
</div>
<div class="legal">
<p class="copy">. All rights reserved.</p>
</div>
Whenever you hover over "products" the code glitches out and forces a line break. I want to make it so that it doesnt affect the flow of the document. I've already tried to set the float to left and that didn't work.
Thank you!
Instead of position: static; on .dropdown I would go with position:absolute
You will need to iron out some padding and margin of your ul and li tags for proper fit
add position:relative to .dropdown li
See snippet below (I took out some menu items to ensure proper inspection of your product sub-menu where the issue lies)
/* HEADER/NAVBAR */
.main-nav {
text-decoration: none;
list-style-type: none;
display: inline;
text-align: center;
}
li {
display: inline-flex;
margin-left: 70px;
padding-bottom: 0px;
position: inherit;
text-transform: uppercase;
font-family: 'Hind', sans-serif;
font-size: 14px;
}
.nav {
display: inline-block;
padding-bottom: 45px;
margin-top: 65px;
margin-left: 150px;
}
img {
height: 80px;
padding: 20px 0px 0px 20px;
margin: 0px 0px 20px 9%;
display: inline-flex;
float: left;
}
a {
color: #6b6b6b !important;
text-decoration: none;
font-weight: 600;
}
.wrapper {
margin: 0px 9%;
background-color: #f0f0f0;
size: 100vh;
height: 100vh
}
body {
background-color: #f7f7f7 !important;
margin: 0px;
}
.sticky {
background-color: #fff;
}
/* DROP DOWN MENUS */
ul li a:hover {
color: #fff;
;
}
ul li ul.dropdown {
min-width: 10px;
/* Set width of the dropdown */
background: #f2f2f2;
display: none;
position: absolute;
z-index: 999;
left: 0;
padding: 0;
}
.dropdown li {
margin: 0px;
list-style-type: none;
position: relative;
left: 0px;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 40px;
padding-left: 40px;
background: #f2f2f2;
}
.main-nav {
position: relative;
}
ul li:hover ul.dropdown,
ul.dropdown:hover {
display: block;
/* Display the dropdown */
}
ul li ul.dropdown li {
display: block;
}
/* LEGAL STUFF */
.legal {
background-color: #444444;
height: 20vh;
text-align: center;
}
.copy {
padding: 4%;
color: #fff;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Hind:400,600" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="copla.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Copla</title>
</head>
<body>
<nav class="sticky">
<div class="row">
<img src="logocopla.Jpg" alt="Copla Logo" class="logo">
<div class="nav">
<ul class="main-nav">
<li>
Products <i class="fa fa-angle-down" `aria-hidden="true"></i>`
<ul class="dropdown">
<li>Laptops</li>
<li>Monitors</li>
<li>Printers</li>
</ul>
</li>
<li>
Contact Us
</li>
</ul>
</div>
</div>
</nav>
<div class="wrapper">
</div>
<div class="legal">
<p class="copy">. All rights reserved.</p>
</div>
</body>
</html>