http://jsfiddle.net/jmm3816z/
I have a nested navigation the first level li need to be position:relative
but the children of the list need to use the position of the ul. in another word it need to be on top:0 of the level <ul> instead of <li>
is there a way to do it
.level1 {
background: pink;
width: 200px;
}
.level1>li {
position: relative !important;
width: 200px;
padding: 1em;
}
.level1>li .level2 {
background: lightgreen;
position: absolute;
left: 100%;
top: 0;
display: none;
}
.level1>li .level2>li {
padding: .5em;
}
<ul class="level1">
<li>position:relative;
<ul class="level2">
<li>position:absolute;</li>
</ul>
</li>
<li>position:relative;
<ul class="level2">
<li>position:absolute;</li>
</ul>
</li>
</ul>
Related
so, I'm trying to have an absolutely positioned navigation bar, stacked on top of an image, I would like it set so that the navigation changes to a solid color background on scroll, but the issue I'm running into is with the z-index. The navigation just refuses to stack over the image, which is positioned relative. The two items are also siblings in the html, so there shouldn't be an issue with the parent overshadowing the child element.
nav {
text-align: right;
width: 100%;
}
nav ul li {
position: absolute;
top: 0;
z-index: 100;
}
nav li {
display: inline;
width: 100%;
}
li {
list-style-type: none;
width: 100%;
padding: 5px;
}
#hero-image {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
z-index: -1;
position: relative;
}
<nav id="top-nav">
<ul class="nav-list">
<li class="nav-item">Home</li>
<li class="nav-item">Course Catalog</li>
<li class="nav-item">Products & Services</li>
<li class="nav-item">About</li>
<li class="nav-item">Contact</li>
</ul>
</nav>
<img id="hero-image" src="https://res.cloudinary.com/spacecatind/image/upload/v1568288870/The%20Line%2C%20LLC/tower-sunset_qtqa0q.jpg"></img>
Add this to your nav css
position: absolute;
top: 0;
z-index: 100;
The reason it was not working was because, you were making the inner li items position:absolute
Instead of doing this, make the parent nav position:absolute
nav {
text-align: right;
width: 100%;
position: absolute;
top: 0;
z-index: 100;
}
nav ul li {
}
nav li {
display: inline;
width: 100%;
}
li {
list-style-type: none;
width: 100%;
padding: 5px;
}
#hero-image {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
z-index: -1;
position: relative;
}
<nav id="top-nav">
<ul class="nav-list">
<li class="nav-item">Home</li>
<li class="nav-item">Course Catalog</li>
<li class="nav-item">Products & Services</li>
<li class="nav-item">About</li>
<li class="nav-item">Contact</li>
</ul>
</nav>
<img id="hero-image" src="https://res.cloudinary.com/spacecatind/image/upload/v1568288870/The%20Line%2C%20LLC/tower-sunset_qtqa0q.jpg"></img>
Try using the image as background and then use the nav tag inside a <div> </div>, now as you said give it as absolute and then give the position. So that you would get what you expected.
The best way to describe this issue is with pictures (Don't mind the Dutch), I'm stuck with this at the moment:
Example1
In the first example you can see that the red dropdown hover lines with the parent in this case. What I want is this:
Example2
The way I did it in Example2 was with element inspect and changing the Ul's manually with margin-top (40px). Which means I have to do 80px, 120px etc. On the next couple of menu links.
Is there an easier way?
Thanks in advance!
Position the dropdown menu relative to the menu container (<ul>) instead of the menu item (<li>).
A simple example on jsFiddle.
The relative HTML:
<ul class="outer">
<li>
Beelden
<ul class="sub-menu">
<li>Geurkaarsen</li>
<li>Rituele kaarsen</li>
<li>Affirmatie kaarsen</li>
</ul>
</li>
</ul>
And CSS:
/* Your outer menu */
ul.outer {
position: relative;
}
li {
/* Whatever styles you set here, don't give it relative positioning */
}
ul.sub-menu {
position: absolute;
top: 0;
right: -100%;
width: 100%;
}
Live demo:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
height: 100vh;
}
body > ul {
/* This next line is crucial */
position: relative;
background-color: #c5e2d8;
width: 30%;
height: 100%;
}
ul.sub-menu {
display: none;
position: absolute;
top: 0;
right: -100%;
width: 100%;
background-color: tomato;
}
li {
display: block;
color: #444;
padding: .5em;
cursor: pointer;
}
li.has-children::after {
content: '▸';
position: absolute;
right: 5px;
}
li:hover {
background-color: tomato;
}
li.has-children:hover ul {
display: block;
}
<ul>
<li class="has-children">
Beelden
<ul class="sub-menu">
<li>Geurkaarsen</li>
<li>Rituele kaarsen</li>
<li>Affirmatie kaarsen</li>
</ul>
</li>
<li class="has-children">
Kaarsen
<ul class="sub-menu">
<li>Sub-menu 2</li>
<li>I don't know</li>
<li>any Dutch</li>
</ul>
</li>
<li>Wierook</li>
<li>Kruiden</li>
<li>Olien</li>
</ul>
I have this class:
.top-level-menu {
list-style: none;
padding: 0;
margin-bottom: 12px;
width: 100%;
}
...which is applied to this:
<template name="mnuScheduler">
<ul class="top-level-menu">
...yet the menu bar (comprised of uls and lis) sits right on top of the element below it (an HTML Table), and a Template that's loaded dynamically lines up to its right.
Based on the CSS, there should be some space between the menu bar and the table, and the Template should display below the menu bar, as the HTML Table does before it's displaced (using Meteor's Template.dynamic) by the other Template, which for now is just a placeholder.
Here's what it looks like:
So why is an element which should be 100% in width not, and which should have a margin along the bottom doesn't?
UPDATE
Here is the pertinent CSS and HTML (this is from a Meteor app, so the HTML has Spacebars code (template language) mixed in).
CSS:
/* Menu-specific styles/rules */
.third-level-menu {
position: absolute;
top: 0;
right: -150px;
width: 150px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.third-level-menu > li {
height: 30px;
background: #999999;
}
.third-level-menu > li:hover {
background: #CCCCCC;
}
.second-level-menu {
position: absolute;
top: 30px;
left: 0;
width: 150px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.second-level-menu > li {
position: relative;
height: 30px;
background: navy;
}
.second-level-menu > li:hover {
background: #CCCCCC;
}
.top-level-menu {
list-style: none;
padding: 0;
position: absolute;
top: 0;
width: 60%;
}
.top-level-menu > li {
position: relative;
float: left;
height: 30px;
//width: 150px;
width: 20%;
background: black;
}
.top-level-menu > li:hover {
background: #CCCCCC;
}
.top-level-menu li:hover > ul {
/* On hover, display the next level's menu */
display: inline;
}
/* Menu Link Styles */
.top-level-menu a
/* Apply to all links inside the multi-level menu */
{
font: bold 16px Candara, Calibri, 'Segoe UI', serif;
color: #FFFFFF;
text-decoration: none;
padding: 0 0 0 10px;
/* Make the link cover the entire list item-container */
display: block;
line-height: 30px;
margin-bottom: 12px;
}
.top-level-menu a:hover {
color: #000000;
}
/* End of Menu-specific Styles */
HTML:
<head>
<TITLE>Crew Scheduler</TITLE>
</head>
<body TEXT="#000000">
<div class="container">
{{> mnuScheduler}}
{{> Template.dynamic template=currentTemplate}}
</div>
</body>
<template name="mnuScheduler">
<ul class="top-level-menu">
<li> Schedules
<ul class="second-level-menu">
<li name="mniOpenExisting" id="mniOpenExisting">Open Existing</li>
<li>Create New...
<ul class="third-level-menu">
<li name="mniCreateNewScheduleBasedOnExisting" id="mniCreateNewScheduleBasedOnExisting">Based on Existing</li>
<li name="mniCreateNewScheduleFromScratch" id="mniCreateNewScheduleFromScratch">From Scratch</li>
</ul>
</li>
<li name="mniSaveCurrentSchedule" id="mniSaveCurrentSchedule">Save Current</li>
<li name="mniEmailCurrentSchedule" id="mniEmailCurrentSchedule">Email Current</li>
<li name="mniPrintCurrentSchedule" id="mniPrintCurrentSchedule">Print Current</li>
</ul>
</li>
<li>Job/Locations
<ul class="second-level-menu">
<li name="mniAddNewJobLoc" id="mniAddNewJobLoc">Add New</li>
<li name="mniViewOrEditJobLoc" id="mniViewOrEditJobLoc">View or Edit</li>
</ul>
</li>
<li>Workers
<ul class="second-level-menu">
<li name="mniAddNewWorker" id="mniAddNewWorker">Add New</li>
<li name="mniViewOrEditWorker" id="mniViewOrEditWorker">View or Edit</li>
<li name="mniWorkerPreferences" id="mniWorkerPreferences">Preferences</li>
</ul>
</li>
<li>Rules
<ul class="second-level-menu">
<li name="mniSetRules" id="mniSetRules">Establish/Maintain</li>
</ul>
</li>
<li>Help
<ul class="second-level-menu">
<li name="mniAbout" id="mniAbout">About</li>
<li name="mniHowTo" id="mniHowTo">How To...</li>
<li name="mniContact" id="mniContact">Contact Us</li>
<li name="mniAcquireLicense" id="mniAcquireLicense">Acquire License</li>
</ul>
</li>
</ul>
</template>
.top-level-menu{
width:100%;
display:block;
}
you modify css class .top-level-menu
Width or height in % is usually in relation to the parent element. In this case name="mnuScheduler" probably has a width that is less than 100% of the viewport width which is why the child also has a width less than 100% of the viewport width.
You could potentially solve this issue by using width: 100vw; on .top-level-menu.
That said a closer look at the markup and styling and maybe a fiddle wouldn't hurt.
I am having trouble figuring out how to adjust the horizontal menu divider on this webpage: amchaminternship.org/testimonials.html, as it needs to look exactly like on this webpage: amchaminternship.org/faq.html. The divider before Home needs to go and the text spacing between each divider needs to be even.
Any assistance would be greatly appreciated, thank you in advance.
.menu { background: url(images/menu-tail.gif) repeat-x 0% 0%;
margin: 0; padding: 0;
width: 100%;
height: 43px;
position: relative;
z-index: 1;
top: 175px;
right: 0; } /* reset your <ul>s */
.menu-item { background: url(images/menu-divider.gif) no-repeat 0% 50%;
display: block;
line-height: 40px;
float: left;
font-size: 1.083em;
position: relative; /* relative so the submenu position will work */
margin: 0 20px;
}
.menu-submenu {
margin: 0; padding: 0; /* reset your <ul>s */
position: absolute;
left: -9999em; top: -9999em; /* send it offscreen */
}
.menu-item:hover > .menu-submenu {
left: auto; top: auto; /* bring it back onscreen on :hover */
}
.menu-submenu-item { display: block; }
.menu:after { /* clearfix */
content: "";
display: table;
clear: both;
}
<ul class="menu">
<p style="margin-top: 0pt; margin-bottom: 0pt;"></p>
<li class="menu-item">Home</li>
<li class="menu-item">Internship Program
<ul class="menu-submenu">
<li class="menu-submenu-item">FAQ</li>
<li class="menu-submenu-item">Testimonials</li>
</ul>
</li>
<li class="menu-item">Alumni</li>
<li class="menu-item">Donations</li>
<li class="menu-item"><a href="who_we_are.html">Who
We Are</a></li>
<li class="menu-item"><a href="photo_gallery.html">Photo
Gallery</a></li>
<li class="menu-item"><a href="contact_us.html">Contact
Us</a></li>
</ul>
</div>
You can remove the divider background from the first menu item like this:
.menu-item:nth-of-type(1) {
background: none;
}
To center the menu items with 2em padding between them, add this style:
padding: 0em 2em;
Also, you don't need relative positioning on menu-item.
Code:
a {
color: white;
}
.menu {
background: url(http://amchaminternship.org/images/menu-tail.gif) repeat-x 0% 0%;
margin: 0; padding: 0;
width: 100%;
height: 43px;
position: relative;
z-index: 1;
top: 175px;
right: 0;
}
.menu-item {
background: url(http://amchaminternship.org/images/menu-divider.gif) no-repeat 0% 50%;
display: block;
line-height: 40px;
float: left;
font-size: 1.083em;
padding: 0em 2em;
}
.menu-item:nth-of-type(1) {
background: none;
}
.menu-submenu {
margin: 0;
padding: 0;
position: absolute;
left: -9999em;
top: -9999em;
}
.menu-item:hover > .menu-submenu {
left: auto;
top: auto;
}
.menu-submenu-item {
display: block;
}
.menu:after {
content: "";
display: table;
clear: both;
}
<ul class="menu">
<p style="margin-top: 0pt; margin-bottom: 0pt;"></p>
<li class="menu-item">Home</li>
<li class="menu-item">Internship Program
<ul class="menu-submenu">
<li class="menu-submenu-item">FAQ</li>
<li class="menu-submenu-item">Testimonials</li>
</ul>
</li>
<li class="menu-item">Alumni</li>
<li class="menu-item">Donations</li>
<li class="menu-item">Who We Are</li>
<li class="menu-item">Photo Gallery</li>
<li class="menu-item">Contact Us</li>
</ul>
You'll have to add a class for the first menu item that doesn't have a background:
.menu-item.first { background: none }
And then:
<li class="menu-item first">Home</li>
PS: Not tested :)
I am trying to create a menu bar with CSS/HTML which on hover would trigger in the list elements. I am having an issue when I am trying to arrange the list in two columns.
Here is the sample code:http://jsfiddle.net/Km922/1/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Experiment</title>
<style media="all">
.navigation ul
{
margin: 0px;
padding: 0px;
list-style: none;
left: 300px;
position: relative;
top: 200px;
}
.navigation ul li ul .second
{
float: right;
width: 200px;
position: relative;
overflow: hidden;
}
.navigation li
{
float: left;
height: 30px;
margin-left: 15px;
margin-right: 15px;
position: relative;
top: 30px; /*clear:left;*/
}
.navigation li a
{
text-decoration: none;
}
.navigation li a:hover
{
text-decoration: underline;
}
.navigation li ul
{
margin: 0px;
padding: 0px;
position: absolute;
left: -9999px;
height: 30px;
top: 30px; /*display:inline-block;*/
}
.navigation li:hover ul
{
left: 0;
width: 160px;
visibility: visible;
}
.header-container
{
background: url(Images/nav-bg4.png) repeat-x scroll 0 0 transparent;
height: 136px;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 901;
}
#apDiv1
{
position: absolute;
width: 200px;
height: 115px;
z-index: 902;
top: 29px;
}
.navigation ul li ul .first
{
float: left;
width: 200px;
position: absolute;
overflow: hidden;
}
</style>
</head>
<body background="Images/global-splash-map.jpg">
<header class="header-container">
<div id="apDiv1"><img src="Images/levis-logo.png" /></div>
</header>
<div class="navigation">
<ul>
<li>menu1
<ul>
<li class="second">Canada</li>
<li class="first">United States</li>
<li class="second">Mexico</li>
</ul>
</li>
<li>menu2
<ul>
<li class="second">Argentina</li>
<li class="second">Brazil</li>
<li class="second">Bolivia</li>
<li class="second">Chile</li>
<li class="second">Colombia</li>
<li class="second">Ecuador</li>
<li class="first">Panama</li>
<li class="first">Paraguay</li>
<li class="first">Peru</li>
<li class="first">Uruguay</li>
<li class="first">Venezuela</li>
</ul>
</li>
<li>menu3
<ul>
<li>sub menu item 1</li>
<li>sub menu item 2</li>
<li>sub menu item 3</li>
<li>sub menu item 4</li>
</ul>
</li>
<li>menu3
<ul>
<li>sub menu item 1</li>
<li>sub menu item 2</li>
<li>sub menu item 3</li>
<li>sub menu item 4</li>
</ul>
</li>
<li>menu4
<ul>
<li>sub menu item 1</li>
<li>sub menu item 2</li>
<li>sub menu item 3</li>
<li>sub menu item 4</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
When you hover on menu1 , it displays perfectly but when you hover on menu2, I see the list elements which are supposed to appear in each single line are appearing and overlapping with each other. Can anyone help me in fixing this issue?
You have several problems. First, floats and absolute positioning aren't compatible:
.navigation ul li ul .first {
float: left;
position: absolute;
}
Next, you can't stack list items like this and have them split into two columns. That's not how floats work.
<ul>
<li class="second">Argentina</li>
<li class="second">Brazil</li>
<li class="second">Bolivia</li>
<li class="second">Chile</li>
<li class="second">Colombia</li>
<li class="second">Ecuador</li>
<li class="first">Panama</li>
<li class="first">Paraguay</li>
<li class="first">Peru</li>
<li class="first">Uruguay</li>
<li class="first">Venezuela</li>
</ul>
Multi-column lists without specific HTML is a challenge. Here's an article that might get you started: http://alistapart.com/article/multicolumnlists
As already noted, you cannot use float and absolute positioning together on the same element. That's ok, because we don't want either one. The secret to getting perfect columns is to use the CSS columns module.
I've done a considerable amount of cleanup here in your CSS:
http://jsfiddle.net/uPzxb/4/ (prefixes not included)
.navigation ul {
margin: 0px;
padding: 0px;
list-style: none;
left: 30px;
position: relative;
top: 20px;
}
.navigation > ul > li {
float: left;
height: 30px;
margin-left: 15px;
margin-right: 15px;
position: relative;
}
.navigation li a {
text-decoration: none;
}
.navigation li a:hover {
text-decoration: underline;
}
.navigation li ul {
margin: 0px;
padding: 0px;
position: absolute;
top: 30px;
display: none;
}
.navigation li:hover ul {
left: 0;
width: 160px;
display: block;
columns: 2; /* this here is the key */
}
.header-container {
background: url(Images/nav-bg4.png) repeat-x scroll 0 0 transparent;
height: 136px;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 901;
}
#apDiv1 {
position: absolute;
width: 200px;
height: 115px;
z-index: 902;
top: 29px;
}
http://caniuse.com/#feat=multicolumn
For elements that will change position, like dropdown list items. It's probably better to change list items from absolute to relative positioning.
position: relative;