This is what I'm trying to do:
If you noticed there is space between the menu and the submenu.
The problem is that the submenu doesn't work this way, because when the mouse pointer leaves the menu the submenu disappears.
It only works if it looks like this:
How can I leave the space between the menu and the submenu and get it to work?
My Code:
JSFIDDLE CODE
HTML:
<body>
<nav>
<ul>
<li>One
<ul>
<li>1.1</li>
<li>1.2
</ul>
</li>
<li>Two
<ul>
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
</ul>
</li>
<li>Three
<ul>
<li>3.1</li>
<li>3.2</li>
</ul>
</li>
<li>Four</li>
</ul>
</nav>
</body>
CSS:
body {
background-color: #cac3bc
}
nav {
float: left;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background-color: #fff;
margin-top: 10px;
padding: 0 20px;
list-style: none;
position: relative;
display: inline-table;
margin-right: -80px;
}
nav ul li {
float: left;
}
nav ul li:hover {
border-bottom: 5px solid #f5aa65;
color: #fff;
}
nav ul li a:hover {
color: #000;
}
nav ul li a {
display: block;
padding: 15px 15px;
font-family: 'PT Sans', sans-serif;
color: #000;
text-decoration: none;
}
nav ul ul {
background-color:#fff;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #000;
}
You could make use of :before to extend the "hoverable" area:
nav ul ul:before {
content: "";
display: block;
height: 20px;
position: absolute;
top: -20px;
width: 100%;
}
See this demo.
The accepted answer is beautifully simple and perfect. However, I want to add an alternative for others like myself who had to use a variation of the answer above. In my situation my sub menu is full width so to do that I do an absolute position on my sub menu to start just below the main menu - I introduce the :before element to bring in a gap of 100px. Therefore my :before code is
// Define the 100px gap between menu and submenu.
&:hover ul.sub-menu:before {
content: "";
display: block;
//Note: This height starts at the top:100% of the position absolute for the ul.sub-menu below,
//pushing the sub-menu down by the height defined here.
height: 100px;
width: 100%;
background-color: transparent;
}
The code to place the sub-menu at an absolute position below the main menu and full width is
&:hover ul.sub-menu {
background-color: transparent;
display: block;
position: absolute;
border-top: 10px solid red;
top: 100%;
left: 0;
width: 100%;
// Sub-menu appears on top of main menu.
z-index: 1;
enter code here
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 have a menu with margin-top and margin-left of 12 pixels for the elements that are inside another , but when the cursor is between that space (margin), the menu is hidden. I can solve that if I remove position:absolute, but I need it. How can I solve this?
HTML
<ul>
<li>Home</li>
<li>Food
<ul>
<li>Chilean food</li>
<li>Chinese food</li>
<li>Mexican food
<ul>
<li>Nachos</li>
<li>Quesadillas</li>
<li>Tacos</li>
</ul>
</li>
</ul>
CSS
ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
ul li {
position: relative;
}
ul li ul {
display: none;
position: absolute;
margin-top: 4px;
}
ul li:hover > ul {
display: block;
}
ul li a {
text-decoration: none;
padding: 12px;
display: block;
background: black;
color: white;
white-space: nowrap;
}
ul li ul li ul {
top: 0;
left: 100%;
margin-top: 0;
margin-left: 4px;
}
JSFiddle: https://jsfiddle.net/v3ebd6hy/3/
Thanks!
Change the margin-top to padding-top in ul li ul.
Fiddle for Reference
I made a drop down nav menu which also partially hovers over the aside. But when I hover over the drop down menu part that is over the aside, the nav bar collapses and I end up selecting the aside. Also parts of the aside are over the nav sub menu.
This picture shows the overlap. The orange one is being hovered, when moving the mouse to the left half, into the grey aside area but still over the nav sub menu, the 'Stats' sub menu collapses and the 'Data sheet' link gets selected.
I've tried all kinds of things with z-index and adjusting positions and so on but I don't know what I'm doing wrong.
JSFiddle shows the problem.
HTML:
<nav>
<ul>
<li>Home</li>
<li>Stats
<ul>
<li>Graph</li>
<li>DataSheet</li>
<li>Print</li>
</ul>
</li>
<li>Projects
<ul>
<li>View</li>
<li>Add</li>
<li>Edit</li>
</ul>
</li>
<li>Employees
<ul>
<li>View</li>
<li>Add</li>
<li>Edit</li>
</ul>
</li>
<li>Settings</li>
<li>About</li>
</ul>
</nav>
<aside>
<ul>
<li><a>Graph</a></li>
<li><a>Data sheet</a></li>
<li><a>Print graph</a></li>
</ul>
</aside>
CSS:
nav {
background: black;
width: auto;
height: 50px;
font-weight: bold;
}
nav ul {
list-style: none;
}
nav ul li {
height: 50px;
width: 125px;
float: left;
line-height: 50px;
background-color: #000;
text-align: center;
position: relative;
}
nav ul li a {
text-decoration: none;
color: #fff;
display: block;
}
nav ul li a:hover {
background-color: #ff6a00;
}
nav ul ul {
position: absolute;
display: none;
}
nav ul li:hover > ul {
display: block;
}
aside {
float: left;
width: 200px;
height: 700px;
background: grey;
}
aside input {
background-color: red;
}
aside ul {
list-style: none;
/*no bulets*/
height: 100%;
}
aside ul li {
height: 50px;
width: 100%;
float: left;
border-bottom: 1px solid black;
line-height: 50px;
text-align: center;
position: relative;
}
aside ul li a {
text-decoration: none;
width: 100%;
color: #fff;
display: block;
}
aside ul li a:hover {
background-color: #ff6a00;
display: block;
}
Add z-index to your nav ul element:
nav ul {
list-style: none; /*no bulets*/
z-index: 100;
}
Updated Fiddle
For more information about the z-index style and what it does, click here.
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'm new to CSS and I'm trying to experiment with this code - if you want to see what it looks like go to this link: https://www.servage.net/blog/wp-content/uploads/2009/03/css-menu.html
Here's the code:
<html>
<head>
<title>CSS based drop-down menu</title>
<style type="text/css">
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }
</style>
</head>
<body>
<ul id="menu">
<li>Home</li>
<li>About
<ul>
<li>The Team</li>
<li>History</li>
<li>Vision</li>
</ul>
</li>
<li>Products
<ul>
<li>Cozy Couch</li>
<li>Great Table</li>
<li>Small Chair</li>
<li>Shiny Shelf</li>
<li>Invisible Nothing</li>
</ul>
</li>
<li>Contact
<ul>
<li>Online</li>
<li>Right Here</li>
<li>Somewhere Else</li>
</ul>
</li>
</ul>
</body>
</html>
I have 2 questions about this:
How do I make this navigation bar on the right side of the page ?
Some of the tabs have drop down lists, when I add this margin-top: 50px to change the position of the navigation bar the dropdown lists move down like this
To move the #menu to the right and 50px down, add these properties
#menu {
position: absolute;
top: 50px;
right: 0px;
}
JSFiddle
If you want to use float and margin-top instead, you must restrict the margin to the #menu
#menu {
float: right;
margin-top: 50px;
}
JSFiddle
you seem to be targeting both the parent ul and the childs uls
try that:
ul {
margin-top:50px;
}
ul#menu {
float:right;
margin-top:0;
}
By adding the #menu after ul you target that specific UL and therefore override its basic ul properties
Add float property to your list:
#menu {
float: right;
}
If you are using WordPress or a static website then you have to place this code to move your navigation bar to the right side.
position: static;
top: 50px;
right: 0px;
color: black;
display: inline-block;
margin-right: 45em;
}
You can vary margin-right according to your website design.
If you still not able to move navigation on the right side then change the position: Like static, absolute, relative and inherit.