I know similar questions have been asked before, but I can't find an example that matches my use case. On hovering over divs, the dropdown menu appears, but as soon as you hover away from the div, the dropdown disappears. I know that in order to fix this, I need to add a :hover event to the dropdown itself, but I can't figure out a way to do this besides rewriting the whole css rule.
.header .text .nav-link div:hover + .dropdown {
display: block;
position: absolute;
z-index: 100;
margin-top: .2rem;
margin-left: -2rem;
background: hsl(0, 0%, 100%);
padding: 1.5rem;
text-align: left;
border-radius: 5px;
box-shadow: 0 0 15px 3px rgba(0, 0, 0, 0.4);
}
.header .text .nav-link .dropdown:hover {
display: block;
position: absolute;
z-index: 100;
margin-top: .2rem;
margin-left: -2rem;
background: hsl(0, 0%, 100%);
padding: 1.5rem;
text-align: left;
border-radius: 5px;
box-shadow: 0 0 15px 3px rgba(0, 0, 0, 0.4);
}
<div class=nav-link>
<div class='menu-item'>Product<img src="images/icon-arrow-light.svg"></div>
<div class="dropdown">
<ul>
<li>Overview</li>
<li>Pricing</li>
<li>Marketplace</li>
<li>Features</li>
<li>Integrations</li>
</ul>
</div>
</div>
Any help would be appreciated!
I'm assuming you want the dropdown to stay open when hovering product or the items in the drop down.
You can do this by adding a hover to the .nav-link element.
.dropdown {
display: none;
}
.nav-link {
display: inline-block;
/* This prevents the tiny gap the mouse will hit moving from the link to the dropdown */
padding-bottom: .2rem;
}
.nav-link:hover .dropdown {
display: block;
position: absolute;
z-index: 100;
/* this should fall within the .nav-link padding */
margin-top: 0;
margin-left: -2rem;
background: hsl(0, 0%, 100%);
padding: 1.5rem;
text-align: left;
border-radius: 5px;
box-shadow: 0 0 15px 3px rgba(0, 0, 0, 0.4);
}
<div class="nav-link">
<div class="menu-item">Product<img src="images/icon-arrow-light.svg"></div>
<div class="dropdown">
<ul>
<li>Overview</li>
<li>Pricing</li>
<li>Marketplace</li>
<li>Features</li>
<li>Integrations</li>
</ul>
</div>
</div>
Related
I'm taking a coding class and we were making a navigation bar with clickable links. The problem is mine wouldn't work at all. I added position: relative; and top: 0; so that way the buttons would move down after clicking and also removed the box-shadow after clicking on the link. It doesn't seem to do anything. Does anyone know what the problem might be? Sorry if my question doesn't make any sense.
body {
margin: 10%;
font-family: Tahoma, Verdana, Geneva, sans-serif;
}
nav {
overflow: hidden;
width: 43%;
margin: 0 auto;
padding-bottom: 1em;
}
nav ul {
list-style-type: none;
/* Step 2: Remove bullets */
}
nav ul li {
float: left;
/* Step 3: Float li's left to line up horizontally */
}
/* Psuedoclass Class Selectors - State of links LVHA */
nav a:link {
/* Default state of link */
display: block;
/* Step 4: Gives anchor tag structure */
width: 6em;
/* Increases width of links and makes all buttons a standard width */
border: 2px solid rgb(175, 175, 175);
text-align: center;
text-decoration: none;
padding: .5em 1em;
/* Gives breathing room between content and inside of border */
margin: 0 5px;
border-radius: 6px;
background-color: rgb(190, 190, 190);
color: white;
text-shadow: #666 .1em .1em .1em;
/* Color, right, bottom, blur */
box-shadow: rgba(0, 0, 0, .5) 0 5px 3px;
/* Color, right, bototm, blur */
/* Sets position of each button to relative and sets positions to zero */
position: relative;
top: 0;
}
nav a:visited {
border: 2px solid rgb(175, 175, 175);
color: white;
}
nav a:hover {
background-color: #fdca00;
border-color: #fda700;
}
nav a:active a:focus {
/* Moves button 3px down and removes shadow on click */
top: 3px;
box-shadow: rgba(0, 0, 0, .5) 0 0 0;
}
<nav>
<ul>
<li>Men</li>
<li>Women</li>
<li>Kids</li>
<li>SALE</li>
</ul>
</nav>
The problem lies with this selector: nav a:active a:focus
It translates to an anchor element with focus inside an anchor element that's active inside a nav element. You don't want that. You want a list with two separate selectors, both originating from the nav element:
nav a:active, nav a:focus {}
This addresses both the active (currently being clicked) and focused (no other element has been selected yet) states of the element.
body {
margin: 10%;
font-family: Tahoma, Verdana, Geneva, sans-serif;
}
nav {
overflow: hidden;
width: 43%;
margin: 0 auto;
padding-bottom: 1em;
}
nav ul {
list-style-type: none;
/* Step 2: Remove bullets */
}
nav ul li {
float: left;
/* Step 3: Float li's left to line up horizontally */
}
/* Psuedoclass Class Selectors - State of links LVHA */
nav a:link {
/* Default state of link */
display: block;
/* Step 4: Gives anchor tag structure */
width: 6em;
/* Increases width of links and makes all buttons a standard width */
border: 2px solid rgb(175, 175, 175);
text-align: center;
text-decoration: none;
padding: .5em 1em;
/* Gives breathing room between content and inside of border */
margin: 0 5px;
border-radius: 6px;
background-color: rgb(190, 190, 190);
color: white;
text-shadow: #666 .1em .1em .1em;
/* Color, right, bottom, blur */
box-shadow: rgba(0, 0, 0, .5) 0 5px 3px;
/* Color, right, bototm, blur */
/* Sets position of each button to relative and sets positions to zero */
position: relative;
top: 0;
}
nav a:visited {
border: 2px solid rgb(175, 175, 175);
color: white;
}
nav a:hover {
background-color: #fdca00;
border-color: #fda700;
}
nav a:active, nav a:focus {
/* Moves button 3px down and removes shadow on click */
top: 3px;
box-shadow: rgba(0, 0, 0, .5) 0 0 0;
}
<nav>
<ul>
<li>Men</li>
<li>Women</li>
<li>Kids</li>
<li>SALE</li>
</ul>
</nav>
I am working on a project for school and am trying to add a drop down menu to my head navigation. I am still pretty new to css but had fun playing with the styling to get an interesting alignment that would work with the vision I had for the page (this is part of a larger piece that I didn't include to keep it relevant to the question)
I wanted to create a right aligned menu that was set to the bottom of the head div. I got everything to work by using absolute positioning but now that I am trying to add a fancy multi level drop down menu things aren't working. I have tried combinations of inline block and relative and absolute positioning but the dropdown does not align correctly. It just bunches up at the bottom offset to the right.
When I try styling the nav bar like people do in tutorials it gets messed up when I remove the absolute positioning.
Is there a way to get the dropdown to work with the current method of styling? I don't have any hover effects or visibility yet because I can't even get it lined up! That part should be pretty straight forward for the dropdown and submenus.
and probably more importantly
Is there a better way to accomplish this visual goal? (right-aligned at the bottom of the white div)
This is not a dynamic styling yet so you have to stretch the viewport for it to make sense.
/*====================================MAIN=================================*/
body {
background-color: #d5d3d5;
font-family: 'Gill Sans', 'Gill Sans MT', 'Calibri', 'Trebuchet MS', sans-serif;
margin: 0px;
padding: 0px;
}
.flex_body {
background: linear-gradient(90deg, rgba(255, 255, 255, .0), rgba(255, 255, 255, 1) 20%);
display: flex;
margin: 0px;
padding: 0px;
height: 800px;
}
.page_body {
background: linear-gradient(90deg, rgba(255, 255, 255, .0), rgba(255, 255, 255, 1) 15%);
margin: 0px 0px 0px 30px;
padding: 0px 0px 0px 20px;
height: 800px;
overflow: hidden;
}
/*=============================MAIN=NAVIGATION=================================*/
#header {
background-color: #ffffff;
height: 130px;
margin: 0px;
padding-bottom: 0px;
position: relative;
box-shadow: inset 0px -15px 18px -6px rgba(121, 104, 124, 0.678);
}
#headNAV ul {
list-style-type: none;
position: absolute;
text-align: right;
bottom: 0;
right: 0;
margin: 8px;
}
#headNAV ul li {
display: inline;
position: relative;
font-size: 18px;
padding: 5px 0px 15px 0px;
margin: 0px 0px 0px -5px;
}
#headNAV ul li:not(:last-child) {
border-right: 1px solid #8f85a1dc;
}
#headNAV ul li a {
display: inline-block;
padding: 5px 40px 10px 40px;
margin: 0px 0px -2px 0px;
text-decoration: none;
color: #353138;
}
#headNAV ul li a:hover {
background-color: #50328ddc;
color: white;
text-decoration: underline;
box-shadow: 0px 5px 3px 1px #50328ddc;
}
#search_icon {
max-width: 5%;
max-height: 5%;
margin: 0px;
padding: 0px;
display: inline;
}
#headNAV ul li input {
margin: 5px 35px 10px 35px;
}
/*======================myPage-Nav============================*/
#myPage_button:hover>#myPage {
color: white;
}
#myPage_button {
text-decoration: underline;
}
#myPage {
color: #50328ddc;
font-size: 22px;
font-weight: bold;
text-decoration: underline;
}
#dropdown-btn {
padding: 0px 10px;
}
#myPage-menu {
margin: auto;
}
#headNAV ul li #myPage-menu li {
position: absolute;
background-color: #fff;
display: inline-block;
padding: 0px;
border: none;
}
<header id="header">
<nav id="headNAV">
<ul>
<li>Mission</li>
<li>News</li>
<li>Events</li>
<li>Forums</li>
<li><a id='myPage_button' href="#">My<span id='myPage'>Page</span><span id = "dropdown-btn" class="fas fa-caret-down"></span></a>
<ul id="myPage-menu">
<li>Main Feed</li>
<li>Projects</li>
<li>Messages</li>
<li>Profile</li>
<li>Search</li>
</ul>
</li>
<li><input type="text" name="search" placeholder="Search..."></li>
<li><a id="header_login" href="#">Login/SignUp</a></li>
</ul>
</nav>
</header>
Thank you for any input!
Kevin
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I'm currently redesigning a poorly written website to remove images and convert them to CSS as much as possible, among other tasks. I have come up on one particularly difficult graphic (there are 3 of these, one for each tab that is active):
Note how the shadow goes around the edges of the tab handle and stays above the other two tab handles. I've tried everything I could think of to get this shadow right with CSS, but I don't seem to be getting anywhere. Any ideas?
Well, the real problem isn't only the active tab overlaping the others with shadows, what could be easily achived with simple z-index and box-shadow tricks.
The desired rounded out effect needs more advanced tricks, not being possible directly with border-radius. The trick I prefer uses gradients, based on Lea Verou's negative border radius with gradients, since it can be used along with shadows almost perfectly.
$(function() {
$('.nav a').click(function(e) {
e.preventDefault()
$('.nav li').removeClass('active')
var h = $(this).attr('href')
$(this).parent().addClass('active')
$('.tab-pane').removeClass('active')
$(h).addClass('active')
})
})
html {
background: #ddd;
margin: 20px 10px auto;
font-family: Sans-serif;
}
.nav {
/* Using flex to easyly adjust to any number of tabs */
display: flex;
padding: 0;
margin: 0 0 -10px;
}
.nav li {
flex: 1 0 auto;
list-style: none outside none;
position: relative;
border-radius: 10px 10px 0 0;
}
.nav .active {
z-index: 2;
background: #fff;
}
.nav a {
display: block;
padding: 10px 40px 20px;
text-decoration: none;
text-align: center;
color: #777;
background: #f5f5f5;
border: 1px solid #aaa;
border-radius: 10px 10px 0 0;
}
.nav .active a {
background: #fff;
border-bottom: 0;
color: #111;
padding: 10px 40px 11px;
box-shadow: -3px -1px 2px rgba(0, 0, 0, .05), 3px -1px 2px rgba(0, 0, 0, .05);
}
.nav .active:first-child {
border-left: 1px solid #aaa;
}
.nav .active:first-child a {
border-left: 0;
}
.nav .active:last-child {
border-right: 1px solid #aaa;
}
.nav .active:last-child a {
border-right: 0;
}
.nav .active:not(:first-child) a:before,
.nav .active:not(:last-child) a:after {
/* Rounded out corners are just generated elements */
content: '';
position: absolute;
width: 10px;
height: 10px;
bottom: 9px;
}
.nav .active:not(:first-child) a:before {
/* The left rounded out tab are achived here. */
background: radial-gradient(circle at 0 0, transparent 8px, #aaa 9px, #fff 10px);
left: -9px;
}
.nav .active:not(:last-child) a:after {
/* The right rounded out tab are achived here. */
background: radial-gradient(circle at 100% 0, transparent 8px, #aaa 9px, #fff 10px);
right: -9px;
}
.tab-content {
border: 1px solid #aaa;
border-radius: 10px;
box-shadow: 2px 1px 10px rgba(0, 0, 0, .2), 0 6px 30px rgba(0, 0, 0, .08);
background: #fff;
color: #111;
padding: 20px;
position: relative;
z-index: 1;
}
.tab-pane {
display: none;
}
.tab-pane.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
<li class="active">Home</li>
<li>Profile</li>
<li>Settings</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">1</div>
<div class="tab-pane" id="profile">2</div>
<div class="tab-pane" id="settings">3</div>
</div>
Of course, JavaScript was used only to handle the tab change, to better show the differences on each tab position styling.
I have created a slated div to use with my navbar, but it messes up the rest of the formatting for the website. The navbar is in the top right and the slanted div is underneath it, but it messes up everything else on the webpage. I've been trying everything to no avail.
http://imgur.com/a/bmv6l
Navbar HTML:
<template name="navbar">
<div class="navbar">
<ul>
<li>Contact</li>
<li>Services</li>
<li>Experience</li>
<li>Home</li>
</ul>
</div>
</template>
Navbar CSS:
.navbar {
position: relative;
display: inline-block;
padding: 0em 0em 1em 10em;
overflow: hidden;
color: #fff;
float: right;
}
.navbar:after {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: #000;
-webkit-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: skew(45deg);
-ms-transform: skew(45deg);
transform: skew(45deg);
z-index: -1;
}
ul {
list-style-type: none;
margin-left: 100px;
margin: 0;
padding: 0;
padding-top: 1em;
padding-right: 1em;
padding-bottom: 5px;
overflow: hidden;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: bolder;
-webkit-font-smoothing: antialiased;
z-index: -1;
}
li {
margin-left: 1em;
margin-right: 2em;
float: right;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px 16px;
text-decoration: none;
-webkit-box-shadow: 0px 0px 8px 0.5px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 8px 0.5px rgba(0,0,0,0.75);
box-shadow: 0px 0px 8px 0.5px rgba(0,0,0,0.75);
border: 5px;
border-style: solid;
border-radius: 10px;
border-color: white;
transition: background 0.2s ease,
padding 0.8s linear;
}
li a:hover {
background-color: #111;
}
.active {
border-radius: 8px;
border-color: white;
background-color: #555;
}
"Bobcats Services" Div HTML:
<body>
<div id="nav">
{{> navbar}}
</div>
<div id="center">
<h1>Bobcats Services</h1>
<h2>Everything you need!</h2>
</div>
</body>
"Bobcats Services" Div CSS:
/* CSS declarations go here */
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
/*background-color: #0193ff;*/
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00b7ea+0,009ec3+100;Blue+3D+%2315 */
background: rgb(135,224,253); /* Old browsers */
background: -moz-linear-gradient(top, rgba(135,224,253,1) 0%, rgba(83,203,241,1) 40%, rgba(5,171,224,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(135,224,253,1) 0%,rgba(83,203,241,1) 40%,rgba(5,171,224,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(135,224,253,1) 0%,rgba(83,203,241,1) 40%,rgba(5,171,224,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 ); /* IE6-9 */
/* Image instead of standard color
background-image: url("images/watch-plane.png");
background-repeat: no-repeat;
background-size: cover;
*/
}
#nav {
}
#center {
width: 30%;
padding-bottom: 2em;
padding-top: 2em;
margin: auto;
margin-top: 2em;
text-align: center;
background-color: rgba(0, 0, 0, 0.5);
color: white;
border-style: solid;
border-radius: 5px;
border-color: #008fc8;
font-family: 'Open Sans', sans-serif;
}
When using float, you need to clear, so the folllowing elements to look right. I have added here: https://jsfiddle.net/44x11g34/ an example.
What i had added between the 2 main blocks:
<div class="clear"></div>
and some small css
.clear {
clear: both;
}
Hope this will help you.
I want to have the header's navigation to have a box shadow. However, the box-shadow seems to be hidden by the carousel I placed below it. I put a z-index of all children of #carousel but the box-shadow still doesn't show up.
(page snippet)
Here's what happens when I push #carousel down when I give it margin-top: 40px;
(another page snippet)
HTML
<header>
<nav>
<div class="container">
<h1><img src="images/logo.png" alt="" id="logo"></h1>
<h1 id="NHS">Newport High School</h1>
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Students</li>
<li>Parents</li>
<li>Activities & Atletics</li>
<li>Resources</li>
</ul>
</div><!--container--->
</nav>
</header><div id="carousel">
<div class="inner">
<ul>
<li><img src="images/example-slide-1.jpg" alt="Fish"></li>
<li><img src="images/example-slide-2.jpg" alt="Elephant"></li>
<li><img src="images/example-slide-3.jpg" alt="Giraffe"></li>
<li><img src="images/example-slide-4.jpg" alt="Fish"></li>
</ul>
</div>
</div>
CSS
/* - - - header - - - */
header {
background: rgb(30,27,27); /* Old browsers */
background: -moz-linear-gradient(top, rgba(30,27,27,1) 0%, rgba(2,2,2,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,27,27,1)), color-stop(100%,rgba(2,2,2,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(30,27,27,1) 0%,rgba(2,2,2,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(30,27,27,1) 0%,rgba(2,2,2,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(30,27,27,1) 0%,rgba(2,2,2,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(30,27,27,1) 0%,rgba(2,2,2,1) 100%);
box-shadow: 0px 3px 15px rgba(50, 50, 50, .7);
-webkit-box-shadow: 0px 3px 15px rgba(50, 50, 50, .7);
-moz-box-shadow: 0px 3px 15px rgba(50, 50, 50, .7);
z-index: 1000;
}
header h1, header li {
float: left;
}
header a {
color: #A1A1A1 ;
font-family: arial, helvetica, verana, sans-serif;
}
header a:hover {
color: #A1A1A1;
text-decoration: none;
}
#logo {
width: 50px;
}
#NHS {
margin: 1.8% 0 0 2%;
font-size: 1.2em;
text-transform: uppercase;
}
#NHS a {
color: #F6F6F6;
letter-spacing: 2px;
}
#nav {
float: right;
margin: 3% 0 0 0;
}
#nav li {
margin-right: 20px;
padding: 0;
}
#nav li:last-of-type {
margin-right: 0px;
}
#nav a {
font-size: .8em;
text-transform: uppercase;
padding-top: 3px;
font-weight: 400;
}
#nav a:hover {
border-top: 1px dotted #C41D0E;
}
/* - - - carousel - - - */
#carousel {
margin: 40px 0 0 0;
width: 100%;
overflow: hidden;
z-index: -999;
}
#carousel .inner {
box-sizing: border-box;
margin-left: -50px;
z-index: -5000;
}
#carousel ul {
width: 60000px;
height: 480px;
z-index: -5000;
}
#carousel li {
height: 480px;
float: left;
overflow: hidden;
z-index: -5000;
}
#carousel img {
text-align: center;
width: 1375px;
height: auto;
z-index: -5000;
}
Remember z-index only works with positioned elements. So both your carousel and header needs to have a position value other than static and then you can specify a higher z-index to the header. That way box-shadow will appear properly above the carousel.
You only need to add position:relative to the header. The carousel doesn't need a z-index alteration.
try adding !important to your shadowbox. I think that should work.
box-shadow: 0px 3px 15px rgba(50, 50, 50, .7) !important;
-webkit-box-shadow: 0px 3px 15px rgba(50, 50, 50, .7) !important;
-moz-box-shadow: 0px 3px 15px rgba(50, 50, 50, .7) !important;