Longtime lurker, first time question asker. I have a weird event here...
I have a navigation bar at the top of my website with a few items having a drop-down. The drop-down will automatically display when the mouse is in the area where the drop-down would display. (See the image below). The red-arrow represents where my mouse is when the drop-down triggers.
example
I have feeling this is related to the z-index, but different combinations of z-index for the main content, and the sub-menu does not work. If I change the z-index to '-1' it will no longer display until you hover over 'Info', however it hides it behind the main content and makes the links unclickable.
Edit to include all CSS and HTML for menu. Thanks!
#header {
width: 970px;
height: 26px;
margin: 0 auto;
margin-top: 25px;
border-bottom-width: thin;
border-top-width: thin;
border-left-width: thin;
border-right-width: thin;
border-style: solid;
border-color: #444;
}
.clearfix: after {
display: block;
clear: both;
}
.menu-wrap {
z-index: 1;
margin: -13px 0px;
float: right;
}
.menu li {
margin: 0px;
list-style: none;
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
font-weight: 500;
}
.menu a {
text-decoration: none;
color: #2e2728;
}
.menu>ul>li {
float: left;
display: block;
font-size: 13px;
}
.menu>ul>li>a {
padding: 3px 10px;
}
.menu>ul>li:hover>a,
.menu>ul>.current-item>a {
background: #2e2728;
height: 15px;
color: #fff;
}
.menu li:after {
content: '|';
color: #2e2728;
display: inline-block;
}
.menu li:last-child:after {
content: none;
}
.menu li:hover .sub-menu {
opacity: 1;
}
.sub-menu {
padding: 5px 0px;
margin-top: 3px;
position: absolute;
z-index: 0;
opacity: 0;
background: #2e2728;
}
.sub-menu li {
display: block;
font-size: 13px;
}
.sub-menu li a {
display: block;
padding: 0px 10px;
color: #fff;
}
.sub-menu li a:hover,
.sub-menu .current-item a {
background: #3e3436;
}
<div id="header">
<div id="socialmedia">
other stuff
</div>
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li>Home</li>
<li>Urban Explorations</li>
<li>Galleries</li>
<li>Photography▾
<ul class="sub-menu">
<li>Fine Art Purchasing</li>
<li>Weddings</li>
<li>Real Estate</li>
</ul>
</li>
<li>Videography</li>
<li>Info▾
<ul class="sub-menu">
<li>Artist Statement & Bio</li>
<li>Awards & Publications</li>
<li>Events</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
The problem seems to be in the way the submenu is hidden. Since its opacity is set at 0, the user can still hover the item as if it was there. You should instead look for a solution using display: none. With this, even if the user hovers the usually position of the hidden item, it will not be considered as hovered in the CSS condition.
Related
I am a beginner to web development, and I am trying to make a dropdown menu.
The problem is when I hover on particular element, it consumes more than the expected space.
I want it to appear below the "shop" element. I do not understand where I am going wrong.
.nav {
width: 100%;
float: right;
}
.nav ul {
/* it edits the list, list-style: none; removes the discs from the list items */
float: right;
list-style-type: none;
display: block;
text-align: right;
}
.nav ul li {
display: inline-block;
margin: 20px 40px;
padding: 0 10px 0 10px;
text-align: center;
position: relative;
border: 2px solid gold;
}
.nav ul li a {
/* edits the links- text-decoration: none; removes the underline others are obvious*/
color: #000000;
text-decoration: none;
display: block;
}
.nav ul li ul li {
/* navigation sub-options disappear when not hovered */
display: none;
margin: 0;
padding: 0;
border: 2px solid greenyellow;
}
.nav ul li:hover ul li {
/* navigation options appear when hover on elements */
display: block;
}
<div class="nav">
<ul>
<li>Home</li>
<li>Shop
<ul>
<li>Products</li>
<li>Membership</li>
</ul>
</li>
<li>Blog</li>
<li>News</li>
<li>Activity</li>
<li>Contact Us</li>
</ul>
</div>
Set position: relative on shop-link and position: absolute on dropdown. Then align dropdown with top, left, bottom, transform what would you like.
With transform it would look like this:
.link {
position: relative;
}
.dropdown {
position: absolute;
bottom: 0;
left: 0;
transform: translateY(100%)
}
I think the issue is with the way you organized these elements. Personally, when I make drop down menus, I use <button> for each root of the drop down menu. It makes styling everything much easier.
Then, what I do is I put the main text in an <h2> or <h3>, and style that how I want the main part of the drop down to look. Everything inside of the drop down can be styled using the <button> class' settings. Here's how I modified your code to get what I assumed your looking for.
CSS Styling:
.nav2 a {
color: #000000;
text-decoration: none;
display: block;
}
.nav2 button {
margin: 20px 40px;
padding: 0 10px 0 10px;
border: 0px;
/* change this to the color you want the background of your website to be */
background-color: white;
border: 2px solid gold;
font-size: 0px;
}
.nav2 button:hover {
display: inline-block;
margin: 20px 40px;
padding: 0 10px 0 10px;
text-align: center;
position: relative;
background-color: white;
border: 2px solid greenyellow;
/* change this to the color you want the background of your website to be */
background-color: white;
font-size: 16px;
}
h2 {
color: #000000;
text-decoration: none;
font-size: 16px;
font-weight: normal;
}
And then the HTML body:
<div class="nav2">
<button>
<h2>Home</h2>
</button>
<button>
<h2>Shop</h2>
<br>Products
<br>Membership
</button>
<button>
<h2>Blog</h2>
</button>
<button>
<h2>News</h2>
</button>
<button>
<h2>Activity</h2>
</button>
<button>
<h2>Contact Us</h2>
</button>
</div>
The end result looked like this
I hope my response was helpful!!
Your CSS is a bit messy, but to get it working add the following:
/* sub-nav option list */
.nav > ul > li > ul {
position: absolute;
margin-top: 1px; /* removes border intersection, can't be too large otherwise a gap will remove hover */
left: -55px;
}
position: absolute "removes" the element from the container so it is not contained in your parent's border. This will allow us to use the left, right, bottom, top CSS properties to position the sub-nav.
margin-top is used here to remove the intersection of shop and the sub-nav. However, you should be careful increasing this value greater than 1-2px since it will create empty space and hovering on the elements is required for your sub-nav to show.
Here is the working snippet:
.nav {
width: 100%;
float: right;
}
.nav ul {
/* it edits the list, list-style: none; removes the discs from the list items */
float: right;
list-style-type: none;
display: block;
text-align: right;
}
.nav ul li {
display: inline-block;
margin: 20px 40px;
padding: 0 10px 0 10px;
text-align: center;
position: relative;
border: 2px solid gold;
}
.nav ul li a {
/* edits the links- text-decoration: none; removes the underline others are obvious*/
color: #000000;
text-decoration: none;
display: block;
}
/* sub-nav option list */
.nav > ul > li > ul {
position: absolute;
margin-top: 1px; /* removes border intersection, can't be too large otherwise a gap will remove hover */
left: -55px;
}
.nav ul li ul li {
/* navigation sub-options disappear when not hovered */
display: none;
margin: 0;
padding: 0;
border: 2px solid greenyellow;
}
.nav ul li:hover ul li {
/* navigation options appear when hover on elements */
display: block;
}
<div class="nav">
<ul>
<li>Home</li>
<li>Shop
<ul>
<li>Products</li>
<li>Membership</li>
</ul>
</li>
<li>Blog</li>
<li>News</li>
<li>Activity</li>
<li>Contact Us</li>
</ul>
</div>
Position docs for a better explanation of absolute: https://developer.mozilla.org/en-US/docs/Web/CSS/position
Here You have:
.nav{
position: relative;
display: flex;
justify-content: flex-end;
}
.nav ul{
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
}
.nav ul li{
background-color: gold;
border: 1px solid gold;
color: #FFF;
}
.nav ul li:hover{
background-color: #FFF;
color: gold;
}
.nav ul li a{
padding: 1rem 2rem;
color: inherit;
text-decoration: none;
font-family: Verdana;
}
.nav ul li ul {
/* navigation sub-options disappear when not hovered */
display: none;
opacity: 0;
visibility: hidden;
position: absolute;
margin: 0;
padding: 0;
border: 2px solid greenyellow;
}
.nav ul li:hover ul {
/* navigation options appear when hover on elements */
display: flex;
opacity: 1;
visibility: visible;
}
<div class="nav">
<ul>
<li>Home</li>
<li>Shop
<ul>
<li>Products</li>
<li>Membership</li>
</ul>
</li>
<li>Blog</li>
<li>News</li>
<li>Activity</li>
<li>Contact US</li>
</ul>
</div>
I made a wordpress template with a simple CSS drop down menu. The code I used is a code that I used regularly, but this time when you hover on the button and than wants to hover on the drop down menu that appears, the drop down menu will disappear.
Does somebody know how I can solve this problem and what's wrong?
Link to template: http://bit.ly/1Ivcg2U
#navigation ul {
list-style: none;
width: 800px;
height: 40px;
padding: 0;
margin: 0 auto;
}
#navigation li {
float: left;
position: relative;
z-index: 500;
display: block;
text-align: center;
margin: 0px 40px;
padding: 5px;
}
#navigation li ul {
display: none;
position: absolute;
max-width: 140px;
top: 40px;
left: -20px;
}
ul#categories li {
width: 100%;
float: left;
margin: 0;
background: #fff;
}
ul#categories a {
padding: 10px;
width: 200px;
}
ul#categories li:hover{
background: #000;
}
ul#navigation li:hover > ul,
#navigation ul li:hover > ul {
display: block; /* display the dropdown */
}
#navigation a {
font-family: 'Montserrat';
color: #474747;
text-decoration: none;
font-weight: 300;
letter-spacing: 2px;
text-transform: uppercase;
font-size: 10px;
}
li a:hover {
color: #000;
font-family: 'Montserrat';
}
ul#categories li a:hover {
color: #fff;
}
<div id="bar">
<div id="navigation">
<ul id="nav">
<li>Home</li>
<li>
Categorieën
<ul id="categories">
<li>travel</li>
<li>Beauty</li>
<li>Fashion</li>
<li>Lifestyle</li>
<li>Persoonlijk</li>
<div class="clear"></div>
</ul>
</li>
<li>
Over mij
<div class="clear"></div>
</li>
<li>
Contact
<div class="clear"></div>
</li>
<li>
Zakelijk
<div class="clear"></div>
</li>
</ul>
</div>
The problem is that your 2nd level menu is too low from your top level :
#navigation li ul {
display: none;
position: absolute;
max-width: 140px;
top: 40px;/* Change this to a lower value so it overlaps or doesn't leave a gap with menu above*/
left: -20px;
}
When the cursor moves to the gap, it's no longer at the 'hover' state, so the dropdown disappears. Reducing the gap will fix the problem.
I've added submenus to some code I found online. I want the submenu, which is a drop-down list, only to show when I hover over the appropriate <a>. But the submenu is appearing right from the start without me hovering over it. What am I doing wrong?
div.menu3 {
/*width:500px;margin:0 auto;*/
/*Uncomment this line to make the menu center-aligned.*/
text-align: center;
font-size: 0;
height: 25px;
*position: relative;
*top: 1px;
/*Hacks for IE6 & IE7 */
}
div.menu3 a {
display: inline-block;
padding: 0 20px;
margin-right: 1px;
/* It specifies the distance between each tab */
background: #F7F7F7;
color: Black;
text-decoration: none;
font: normal 12px Trebuchet MS;
line-height: 24px;
border: 1px solid #CAD0DB;
border-bottom: 0;
color: #666;
vertical-align: top;
/*ChangeSet#2*/
text-decoration: none;
}
div.menu3 a:hover,
div.menu3 a.current {
background: #E9ECF0;
line-height: 25px;
color: #000;
}
div.menu3sub {
height: 6px;
border: 1px solid #CAD0DB;
background: #E9ECF0;
}
div.menu3sub a:hover,
div.menu3 a.current {
background: #E9ECF0;
line-height: 25px;
color: #000;
}
<div class="menu3">
Home
Employees
Department
<ul>
<li>Add Department</li>
<li>Delete Department</li>
</ul>
Asset
</div>
<div class="menu3sub"></div>
Your html is off. So your dropdown won't display properly. Use un-ordered lists instead of what you have. This should point you in the right direction.
ul.menu {
list-style-type: none;
}
ul.menu li {
display: inline-block;
}
ul.menu li.submenu ul {
display: none;
position: absolute;
}
ul.menu li.submenu:hover ul {
display: block;
}
ul.menu li.submenu ul li {
display: block;
}
<ul class="menu">
<li>Home
</li>
<li>Employees
</li>
<li class="submenu">Department
<ul>
<li>Add Department
</li>
<li>Delete Department
</li>
</ul>
</li>
<li>Asset
</li>
</ul>
I am looking to make a navbar menu that drops down when hovering over a specific navbar li.
My navbar looked and worked fine until I tried to get a hover drop down to work. Specifically this is what I am looking for:hover over "work" and get a drop down menu of "videos" and "photography". I don't think that I am nesting anything wrong, so I figure that it is the CSS that is wrong. I have tried a few different suggestions, but nothing has worked.
Side note: I recently gave the nav items the id of "menu". I had it so that the current page on the nav would be a certain darker color and when the current page nav was hovered it would stay that same color. This worked before I changed to id to "menu" (before it was "nav ul li"). Now when you hover, it changes the color. what made this change happen?
* {
padding: 0;
margin: 0;
}
ul, ol, dl {
padding: 0;
margin: 0;
}
ul#menu {
list-style: none;
text-align: center;
background-color: #bac9a9;
padding-top: 5px;
padding-bottom: 5px;
overflow: hidden;
}
ul#menu:after {
content:"";
background-image: url("../images/navbar-shadow-green.jpg");
height: 8px;
width: 100%;
display: block;
position: absolute;
left: 0;
margin-top: 4px;
}
ul#menu li {
display: inline;
}
ul#menu li a {
text-decoration: none;
color: #f3ffcf;
font-size: 22px;
padding: 10px 25px;
margin: 0 -2px;
}
ul#menu li a:hover {
background-color: #b2c1a2;
}
a.selected-page, a.selected-page:hover {
background-color: #a6b396;
}
li#sub ul {
display: none;
}
ul#menu li#sub:hover ul {
display: block;
}
<nav>
<ul id="menu">
<li>about
</li>
<li id="sub">work
</li>
<ul>
<li>videos
</li>
<li>photography
</li>
</ul>
<li>services
</li>
<li>contact
</li>
</ul>
</nav>
JSFiddle
I think you have got the nesting wrong. You want the list which is revealed when you roll over the work list item to be a child of that list item. Try updating your HTML / CSS as follows (see fiddle):
HTML:
<nav>
<ul id="menu">
<li>about
</li>
<li id="sub">
work
<ul>
<li>videos</li>
<li>photography</li>
</ul>
</li>
<li>services
</li>
<li>contact
</li>
</ul>
</nav>
CSS:
* {
padding: 0;
margin: 0;
}
ul, ol, dl {
padding: 0;
margin: 0;
}
ul#menu {
list-style: none;
text-align: center;
background-color: #bac9a9;
padding-top: 5px;
padding-bottom: 5px;
overflow: hidden;
}
ul#menu:after {
content:"";
background-image: url("../images/navbar-shadow-green.jpg");
height: 8px;
width: 100%;
display: block;
position: absolute;
left: 0;
margin-top: 4px;
}
ul#menu li {
display: inline;
}
ul#menu li a {
text-decoration: none;
color: #f3ffcf;
font-size: 22px;
padding: 10px 25px;
margin: 0 -2px;
}
ul#menu li a:hover {
background-color: #b2c1a2;
}
a.selected-page, a.selected-page:hover {
background-color: #a6b396;
}
li#sub ul {
display: none;
position: absolute;
top: 35px; left: 115px;
background-color: #b2c1a2;
}
li#sub ul li {
display: block;
}
ul#menu li#sub:hover ul {
display: block;
}
I am trying to create a simple navigation menu that when you click on one of the buttons, a secondary menu pops up below, but pushes the content below down with a sliding action.
There will be 6 buttons in the primary menu, spanning the width of the containing div at 960px. Then when you hover on "Products" only, every other primary button will go to a new page, this should open a secondary nav that spans 2 lines. Each button is 159px.
Here is my code:
HTML:
<div id="menu">
<ul>
<li>About Us</li>
<li id="products">Products</li>
<li>Our Suppliers</li>
<li>Find Us</li>
<li>Deliveries</li>
<li>Contact Us</li>
</ul>
<div id="subMenu">
<ul>
<li>Wine & Spirits</li>
<li>Beer & Ciders</li>
<li>Other Drinks</li>
<li>Cheese</li>
<li>Meat & Pate</li>
<li>Vegetables</li>
<li>Dry Stores</li>
<li>Honey & Preserves</li>
<li>Olive Oil & Vinegar</li>
<li>Sweet Things</li>
<li>Hampers</li>
<li>Accessories</li>
</ul>
</div>
</div>
And my CSS:
#menu a {
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
letter-spacing: 1px;
color: #fff;
font-size: 12.5px;
text-decoration: none;
padding:0;
margin: 0
}
#menu a:hover {
color: #cff;
}
#menu {
background: #689169;
height:35px;
width: 960px;
transition:height 0.2s;
-webkit-transition:height 0.2s;
}
#menu:hover {
height: 105px;
}
#menu ul {
padding: 0;
margin: 0;
position: absolute;
list-style:none;
}
#menu ul li {
float: left;
}
#menu ul li a {
width: 159px;
padding-top: 10px;
padding-bottom: 10px;
/*padding: 10px; padding-right: 30px; padding-left: 30px;*/
margin: 0;
background: #689169;
text-align: center;
border-right: 1px solid #666;
display:block;
}
#subMenu {
position: absolute;
z-index: 1;
margin-top: 34px;
width: 700px;
height: 600px;
}
#subMenu ul {
position: relative;
float: left;
}
#subMenu ul li {
clear: both;
border-right: 1px solid #666
}
#subMenu ul li a {
background: none;
border: none;
}
#subMenu ul li a:hover {
color: #fff;
}
#outset {
width: 700px; height: 300px;
background: #900;
}
Here's my JSFiddle - http://jsfiddle.net/Jfdvr/1/ - please help!
Many thanks,
Matt
I would look into jQuery easing to bounce out a div with css display: hidden; So when a link is clicked the hidden div will ease out and then set a click anywhere else to revert to hidden