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.
Related
I am looking to have it so that when you hover over the nav bar the drop-down menu sits above/on-top of the main content, however at the moment when the menu drops down it is pushing the main image down and not sitting on top as I would expect the z-index property to do.
I have set the nav div to relative and also the main section div to relative but still with no joy!
Anyone out there able to help with this, please?
<div id="top-bar-container">
<img src="img/MSO-logo.jpg" alt="MSO Digital Agency" />
<i id="hamburger-icon" class="fas fa-bars fa-2x"></i>
<nav id="nav-bar">
<ul id="test">
<li>Home</li>
<li>About Us</li>
<li>
Services
<ul>
<li>Web Design</li>
<li>Branding</li>
<li>Consulting</li>
<li>SEO</li>
</ul>
</li>
<li>Our Work</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
<div id="main-section">
<img id="main-img" src="img/main-image.png" alt="" />
</div>
#top-bar-container {
background-color: #ec671c;
width: 100%;
height: 75px;
}
#nav-bar {
width: 75%;
float: right;
padding-right: 50px;
position: relative;
z-index: 1;
}
ul {
list-style: none;
padding: 0;
float: right;
}
ul li {
float: left;
width: 90px;
list-style: none;
margin-top: 10px;
text-align: center;
padding: 5px;
}
ul li:hover {
background-color: #ec671c;
border-radius: 5%;
}
ul li a {
text-decoration: none;
color: white;
}
ul li a:hover {
color: orange;
}
ul li ul {
line-height: 25px;
}
ul li ul li {
display: none;
font-size: 13px;
}
ul li ul li a {
color: white;
}
ul li:hover ul li {
display: block;
padding: 0px;
}
#hamburger-icon {
display: none;
color: white;
position: absolute;
right: 20px;
top: 20px;
}
#hamburger-icon:hover {
color: orange;
}
#main-section {
width: 100%;
height: 100vh;
position: relative;
}
#main-img {
width: 100%;
height: 100vh;
}
The #main-section is pushed down because the dropdown menu is positioned within the flow of the document.
When it is not hovered, it has display: none which takes it out of the DOM.
When hover, it switches to position: block which puts it back - and it occupies space, and pushes the main-content down.
You can test this by adding the desired end-result display: block by default, and see how the document would look in it's expanded state.
You need to apply position: absolute to your drop-down, in order for it to not interfere with the document flow. You could also move the z-index: 1 directly on it, if that is the content that should be on top - or you could leave it on the parent, and should work just as well. - the z-index is not the problem here.
#top-bar-container {
background-color: #ec671c;
width: 100%;
height: 75px;
}
#nav-bar {
width: 75%;
float: right;
padding-right: 50px;
}
ul {
list-style: none;
padding: 0;
float: right;
background-color: #ec671c;
}
ul li {
float: left;
width: 90px;
list-style: none;
margin-top: 10px;
text-align: center;
padding: 5px;
position:relative;
}
ul li:hover {
background-color: #ec671c;
border-radius: 5%;
}
ul li a {
text-decoration: none;
color: white;
}
ul li a:hover {
color: orange;
}
ul li ul {
line-height: 25px;
}
ul li ul li {
display: none;
font-size: 13px;
}
ul li ul li a {
color: white;
}
ul li:hover ul li {
display: block;
padding: 0px;
}
#hamburger-icon {
display: none;
color: white;
position: absolute;
right: 20px;
top: 20px;
}
#hamburger-icon:hover {
color: orange;
}
#main-section {
width: 100%;
height: 100vh;
}
#main-img {
width: 100%;
height: 100vh;
}
#top-bar-container >nav >ul > li > ul{
position:absolute;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
</style>
</head>
<body>
<div id="top-bar-container">
<img src="img/MSO-logo.jpg" alt="MSO Digital Agency" />
<i id="hamburger-icon" class="fas fa-bars fa-2x"></i>
<nav id="nav-bar">
<ul id="test">
<li>Home</li>
<li>About Us</li>
<li>
Services
<ul>
<li>Web Design</li>
<li>Branding</li>
<li>Consulting</li>
<li>SEO</li>
</ul>
</li>
<li>Our Work</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
<div id="main-section">
<img id="main-img" src="img" alt="" />
</div>
</body>
</html>
hi
You can do in the section ul>li{position:relative} and Also, put in a second UL {position:absolute}
I want to reposition my navbar. In its current position:
#navbar ul {
width: 100%;
float: left;
margin: 0;
padding: 0;
list-style: none;
background-color: #5D2C2C;
/*position: relative;
bottom: 115px;*/
}
#navbar ul li {
float: left;
/*position: relative;
left: 420px;*/
}
#navbar li li {
display: none;
}
#navbar li:hover li {
display: block;
width: inherit;
}
#navbar a {
font-family: "Palatino Linotype";
color: #FFF;
text-decoration: none;
padding: 2px 5px;
}
the dropdown displays correctly
but when I remove the /* comments */ so the bar is correctly positioned, the menu drops down but the two items aren't showing and I cannot find out why
the HTML if needed:
<div id="navbar">
<ul>
<li>Introduction</li>
<li>History</li>
<li>National Flags</li>
<li>International Maritime Signal Flags
<ul>
<li>Maritme Signals: Letters</li>
<li>Maritme Signals: Numbers </li>
</ul>
</li>
</ul>
I want to add a linkedin icon (id="linkedin") on the right of my nav bar. I figured the simplest way would be to add a new UL element to the nav but that stretches the image and I can't get the applied styles to go away.
I've tried all:initial and all:revert but they don't seem to work.
You'll want to open the snippet on full page.
.container {
position: relative;
margin: 0 auto;
width: 94%;
max-width: 1100px; /*Stops the nav from expanding too far*/
font-family: helvetica, sans-serif;
}
#nav {
position: absolute; /*Positions nav elements within black space*/
right: 0; /*Positions nav elements to right of screen*/
top: -15px; /*Positions nav elements to top of screen*/
height: 60px;
text-transform: uppercase;
font-weight: bold;
}
#header {
z-index: 2; /*Puts elements in front of other elemtns*/
position: fixed;
width: 100%; /*Makes nav stretch to screen*/
height: 60px; /*Specifies black background height*/
line-height: 60px; /*Vertically centers nav text*/
background: #222;
color: white; /*Text color*/
}
/*LOGO*/
#header img {
width: 180px;
height: 60px;
}
#header h1 {
top: 0px;
margin: 0px;
font-size: 1.75em;
}
#nav ul li {
float: left;
list-style: none;
}
#nav ul li a {
display: block;
color: white;
text-decoration: none;
padding: 0 10px;
}
/*Nav Dropdown*/
ul ul {
display: none;
position: absolute;
background: #222;
padding: 0;
white-space: nowrap; /*Prevents dropdown elements from wrapping*/
}
#nav ul ul li {
float: none;
}
> ul {
display: block;
}
#linkedin {
all: revert;
}
/**********RESPONSIVE**********/
/* unvisited link */
a:link {
color: blue;
}
/* mouse over link - Nav*/
#nav a:hover {
color: black;
background-color: gold;
}
/* mouse over link - regular*/
.back a:hover {
color: blue;
}
/* selected link */
a:active {
color: blue;
}
/*Inactive Link*/
.inactivelink {
cursor: default;
}
<header id="header">
<div class="container">
<img src="#" alt="LOGO"/>
<nav id="nav">
<ul>
<li>Portfolio
</li>
<li>
Projects
<ul>
<li>BOOK REVIEW SITE</li>
<li><a href="#" style="";>DEMO CODE (under development)</a></li>
</ul>
</li>
<li>
Contact
<ul>
<li><p style="color:#449ff4">LinkedIn</p></li>
<li>Email Me</li>
</ul>
</li>
<li>
<img id="linkedin" src="#" alt="LinkedIn icon" height="10" width="10">
</li>
</ul>
</nav>
</div>
</header>
I would first load a reset stylesheet before your own, so it will get rid of whatever you are inheriting. I imagine this will fix it.
http://meyerweb.com/eric/thoughts/2011/01/03/reset-revisited/
There's a CSS rule for `'header img' in your styles which forces all images in the header to have 180px width. To overwrite that for your linkedin icon and display it in its original size, add this CSS at the end of your stylesheet:
#header #linkedin {
width: auto;
height: auto;
vertical-align: middle;
}
If the icon is displayed too big or too small that way, just use your desired size instead of auto, but only on one of the two /width/height) - the other will adjust automatically.
.container {
position: relative;
margin: 0 auto;
width: 94%;
max-width: 1100px;
/*Stops the nav from expanding too far*/
font-family: helvetica, sans-serif;
}
#nav {
position: absolute;
/*Positions nav elements within black space*/
right: 0;
/*Positions nav elements to right of screen*/
top: -15px;
/*Positions nav elements to top of screen*/
height: 60px;
text-transform: uppercase;
font-weight: bold;
}
#header {
z-index: 2;
/*Puts elements in front of other elemtns*/
position: fixed;
width: 100%;
/*Makes nav stretch to screen*/
height: 60px;
/*Specifies black background height*/
line-height: 60px;
/*Vertically centers nav text*/
background: #222;
color: white;
/*Text color*/
}
/*LOGO*/
#header img {
width: 180px;
height: 60px;
}
#header h1 {
top: 0px;
margin: 0px;
font-size: 1.75em;
}
#nav ul li {
float: left;
list-style: none;
}
#nav ul li a {
display: block;
color: white;
text-decoration: none;
padding: 0 10px;
}
/*Nav Dropdown*/
ul ul {
display: none;
position: absolute;
background: #222;
padding: 0;
white-space: nowrap;
/*Prevents dropdown elements from wrapping*/
}
#nav ul ul li {
float: none;
}
>ul {
display: block;
}
#linkedin {
all: revert;
}
/**********RESPONSIVE**********/
/* unvisited link */
a:link {
color: blue;
}
/* mouse over link - Nav*/
#nav a:hover {
color: black;
background-color: gold;
}
/* mouse over link - regular*/
.back a:hover {
color: blue;
}
/* selected link */
a:active {
color: blue;
}
/*Inactive Link*/
.inactivelink {
cursor: default;
}
#header #linkedin {
width: auto;
height: auto;
vertical-align: middle;
}
<header id="header">
<div class="container">
<img src="#" alt="LOGO" />
<nav id="nav">
<ul>
<li>Portfolio
</li>
<li>
Projects
<ul>
<li>BOOK REVIEW SITE</li>
<li><a href="#" style="" ;>DEMO CODE (under development)</a></li>
</ul>
</li>
<li>
Contact
<ul>
<li>
<a href="#">
<p style="color:#449ff4">LinkedIn</p>
</a>
</li>
<li>Email Me</li>
</ul>
</li>
<li>
<img id="linkedin" src="http://placehold.it/30x30/0fa" alt="LinkedIn icon" height="10" width="10">
</li>
</ul>
</nav>
</div>
</header>
I am working on a new version of a website. Right now I am almost satisfied with the results, except one problem. The website consists of a header (with logo and menu) and a content-part. I want it to work on both larg/small-size screens.
On a small screen I encounter one problem. When I expand the menu it is on top of the content-part, but the content-part is still clickable, so the menu-options are not clickable and the menu is not working right.
What I want is as follows (for small screen, i.e. Smartphone):
- When I click 'Show Menu' all menu-options will show up (Menu1, Menu2, Menu3, Menu4) and are clickable. Underlying text (div 'page') not visible (dissapears under the menu-options).
- When I click one of the menu-options, all options in submenu will show up and are clickable. Underlying text (div 'page') not visible.
I already searched and tried many options, but not with the expected result.
Thanks in advance for any hints :)
My html is as follows:
<body>
<div id="wrapper">
<div id="logo">
<img src="#" style="width:180px;height:50px;">
</div>
<div id="menu">
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li>Home</li>
<li>Menu1 ￬
<ul class="hidden">
<li>Submenu11</li>
<li>Submenu12</li>
</ul>
</li>
<li>Menu2 ￬
<ul class="hidden">
<li>Menu21</li>
<li>Menu22</li>
<li>Menu23</li>
</ul>
</li>
<li>Menu3 ￬
<ul class="hidden">
<li>Menu31</li>
<li>Menu32</li>
<li>Menu33</li>
</ul>
</li>
<li>Menu4 ￬
<ul class="hidden">
<li>Menu41</li>
<li>Menu42</li>
<li>Menu43</li>
<li>Menu44</li>
<li>Menu45</li>
<li>Menu46</li>
</ul>
</li>
</ul>
</div>
<div id="header">
<h3>Header</h3><hr>
</div>
<div id="pageliquid">
<div id="page">Page-text<br />
</div>
</div>
</div>
</body>
My CSS is as follows:
body {
margin: 20px;
font-family: Tahoma, Arial;
font-size: 12pt;
color: #001245;
}
#wrapper {
width: 100%;
min-width: 1000px;
max-width: 2000px;
margin: 0 auto;
}
#logo {
height: 50px;
width: 100%;
position: static;
}
#menu {
height: 50px;
width: 100%;
position: static;
}
#header {
height: 75px;
width: 100%;
position: static;
}
#pageliquid {
width: 100%;
position: static;
}
#page {
top: 200px;
max-width: 100%;
position: absolute;
overflow: scroll;
bottom: 1px;
left: 20px;
right: 0px;
}
ul, img {
list-style-type:none;
margin:0;
padding:0;
position: absolute;
}
li {
display:inline-block;
float: left;
margin-right: 1px;
}
li a {
display:block;
min-width:200px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: small;
color: #fff;
background: #0b0b3b;
text-decoration: none;
}
li:hover a {
background: #0b0b3b;
}
li:hover ul a {
background: #08088a;
color: #d8d8d8;
height: 40px;
line-height: 40px;
}
li:hover ul a:hover {
background: #08088a;
color: #ffffff;
}
li ul {
display: none;
}
li ul li {
display: block;
float: none;
}
li ul li a {
width: 160px;
min-width: 100px;
padding: 0 20px;
}
ul li a:hover + .hidden, .hidden:hover {
display: block;
}
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #19c589;
text-align: center;
padding: 10px 0;
display: none;
}
input[type=checkbox] {
display: none;
-webkit-appearance: none;
}
input[type=checkbox]:checked ~ #menu{
display: block;
}
#media screen and (max-width : 760px) {
body {
margin: 0px;
}
#wrapper {
min-width: 0px;
margin: 0;
}
#header {
position: absolute;
}
#page {
left: 0px;
}
ul {
position: absolute;
width: 100%;
display: none;
}
li {
margin-bottom: 1px;
margin-right: 0px;
}
ul li, li a {
width: 100%;
}
li ul li a {
width: 100%;
padding: 0 0px;
}
.show-menu {
display:block;
}
}
The problem is with the z-index of the menu since it is underneath later elements on the page due to the fixed height and natural height of #menu and absolute positioning of that menu. You have duplicate ID's here, but forcing a higher z-index on #menu puts the navigation above other elements on the page. That also requires changing position: static; to position: relative; on #menu as well. Here's a demo - http://codepen.io/anon/pen/MJwoOL (PS - there were some overlapping issues with your nested li's and ul's that I tweaked a little in your media query, too, but are unrelated to your question here)
I have recently been using tabindex="1" and :focus with divs to make drop down lists in my menu.
But when these drop down lists are clicked they make my links below collapse on themselves, does anyone know why?
Here is the example https://jsfiddle.net/ugjgng5u/4/
When List 1 is clicked all links below shrink and collapse.
<li class=collapse tabindex="1"><a class=red> List 1 </a>
<div class="inside">Content 1....<br>
hi<br>
hi<br>
hi<br>
hi</div></li>
I thought it was to do with clearing the floats after the div? But didn't seem to help.
Thanks!
If I had to guess, it's because the li is inside the menu and you can't detach it. A work around is to make the div absolute.
https://jsfiddle.net/ugjgng5u/7/
HTML
<div id=container>
<div id=top-bar>
<div class=top-links>
<toplinks>
<ul id=menu>
<li><a>A </a></li>
<li class=collapse tabindex="1">
<a class=red> List 1 </a>
<div class="inside">Content 1....
<br> hi
<br> hi
<br> hi
<br> hi
</div>
</li>
<li> <a> C</a></li>
<li><a>B </a></li>
</ul>
</toplinks>
</div>
</div>
</div>
CSS
#container {
background-color: #fff;
max-width: 350px;
z-index: 1;
position: relative;
}
#top-bar {
display: block;
position: relative;
height: auto;
line-height: 1.7;
font-size: 16px;
font: Arial, Helvetica, sans-serif;
}
.top-links li a:hover {
color: #808080;
}
.top-links li ul {
display: none;
}
.top-links li ul li {
display: block;
float: none;
}
.top-links ul li a:hover + .hidden,
.hidden:hover {
display: block;
}
.top-links li > a {
display: block;
font-size: 12px;
font-weight: 600;
height: 44px;
color: #999;
text-decoration: none;
}
li.collapse > a {
cursor: pointer;
display: block;
}
li.collapse:focus {
outline: none;
}
li.collapse > div.inside {
display: none;
}
li.collapse:focus div.inside {
display: block;
}
.inside {
z-index: 10;
position: absolute;
top: 40%;
left: 11%;
background: white;
width: 300px;
padding-left: 20px;
border: 1px solid black;
}
You got some odd choices going on in your JSFiddle.
None-the-less, don't float .indside. Not sure why it's being floated to begin with. When you float and item you take it out of the normal document flow an it no longer takes up space like it did prior to floating. This means the parent element will treat it as if wasn't there.
If you're looking to do a fly-out menu then you should use position: absolute; on the dropdown menu and position: relative; on it's containing element.
Basic fly-out menu below.
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
ul {
width: 300px;
background-color: #f1f1f1;
}
li {
position: relative;
line-height: 1.5;
}
li:hover {
background-color: #ccc;
cursor: pointer;
}
li:hover > ul {
display: block;
}
li > ul {
display: none;
position: absolute;
top: 0;
left: 100%;
background-color: #eee;
}
<ul>
<li>One</li>
<li>Two
<ul>
<li>Two A</li>
<li>Two B</li>
</ul>
</li>
<li>Three</li>
</ul>