I'm building a vertical menu, and want the sub-menu items to fly out on hover. I have that working.
However, I want the submenu to always stick to the top of the page. I've added the position: absolute property to my css, but it's not working.
Here is what I have now:
https://jsfiddle.net/bdsr4ypo/
The code is below, too.
I found a jsfiddle which does exactly what I want:
http://jsfiddle.net/framj00/ykn2dyf0/
but I can't get my menu to follow this style after spending two hours changing the CSS.
Any help would be greatly appreciated.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#nav .opener {
display: none;
}
ul li{
list-style-type: none;
list-style-image: none;
}
#nav {
width: 600px;
position: fixed;
top: 0;
right: 0;
padding-top: 0px;
z-index: 9999;
height: 100%;
}
#nav ul {
background: #4f626b;
width: 300px;
height: 100%;
position: absolute;
right: 0px;
margin-top: 0px;
z-index: 999999;
}
/* Hover dropdown */
#nav ul li {
position: relative;
}
#nav ul li a{
color:#fff;
}
#nav ul li ul {
display: none;
}
#nav ul li:hover ul {
display: block;
top: 0;
left: -380px;
height:100%;
}
</style>
</head>
<body>
<!-- nav -->
<div id="nav" class="open-close">
<nav role="navigation">
<ul id="navo" class="menu nav navbar-nav">
<li class="button"><span class="nolink">Menu</span></li>
<li class="button">title one
<ul class="flyout-menu">
<li>section one sub-title one</li>
<li>section one sub-title two</li>
<li>section one sub-title three</li>
</ul>
</li>
<li class="button">title two
<ul class="flyout-menu">
<li>section 2 sub-title one</li>
<li>section 2 sub-title two</li>
<li>section 2 sub-title three</li>
</ul>
</li>
<li class="button">title three
<ul class="flyout-menu">
<li>section 3 sub-title one</li>
<li>section 3 sub-title two</li>
<li>section 3 sub-title three</li>
</ul>
</li>
<li class="button">title four
<ul class="flyout-menu">
<li>sub-title one</li>
</ul>
</li>
<li class="button">title five
<ul class="flyout-menu">
<li>section five sub-title one</li>
<li>section five sub-title two</li>
<li>section five sub-title three</li>
</ul>
</li>
</ul>
</nav>
</div>
</body>
</html>
i've update your fiddle
is this what you wanted to happen?
#nav .opener {
display: none;
}
ul li {
list-style-type: none;
list-style-image: none;
}
#nav {
width: 600px;
position: fixed;
top: 0;
right: 0;
padding-top: 0px;
z-index: 9999;
height: 100%;
}
#nav ul {
background: #4f626b;
width: 300px;
height: 100%;
position: absolute;
right: 0px;
margin-top: 0px;
z-index: 999999;
padding: 0;
}
/* Hover dropdown */
#nav ul li {
/* position: relative; */ // removed
padding-left: 40px; //added
}
#nav ul li a {
color: #fff;
}
#nav ul li ul {
display: none;
}
#nav ul li:hover ul {
display: block;
top: 0;
left: -100%; //changed to -100%
height: auto; //changed to auto
}
Related
I'm trying to create a nested dropdown menu that may potentially be very long and overflow off the page.
What I'd like to do is, when the menu is too long it will display a scroll bar. I'm doing this with overflow: auto. However, when I do this, it traps any submenus within the same 'scroll space' as defined by the first scroll bar.
I've also tried various iterations of overflow: none with the :not(:hover) selector, but nothing I've tried seems to work.
What I'd like it to do is show the scrollbar on each level, only if necessary (i.e. that submenu would scroll off the page). Each submenu should 'pop' out of the previous scroll bar, if any, as if it was not there.
I'd like to do this in all CSS, but I'm open to a JS solution as well.
I have a code pen showing the issue here:
https://codepen.io/mcmurphy510/pen/ZyGLKd
I'm not sure if I'm understanding your question correctly, but try isolating your desired element by using ID or CLASS. See the third level menu.
#primary_nav_wrap {
margin-top: 15px
}
#primary_nav_wrap ul {
list-style: none;
position: relative;
float: left;
margin: 0;
padding: 0;
}
#primary_nav_wrap ul a {
display: block;
color: #333;
text-decoration: none;
font-weight: 700;
font-size: 12px;
line-height: 32px;
padding: 0 15px;
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif
}
#primary_nav_wrap ul li {
position: relative;
float: left;
margin: 0;
padding: 0;
}
#primary_nav_wrap ul li.current-menu-item {
background: #ddd
}
#primary_nav_wrap ul li:hover {
background: #f6f6f6
}
#primary_nav_wrap ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
padding: 0;
}
#primary_nav_wrap ul ul li {
float: none;
width: 200px
}
#primary_nav_wrap ul ul a {
line-height: 120%;
padding: 10px 15px
}
#primary_nav_wrap ul ul ul {
top: 0;
left: 100%
}
#primary_nav_wrap ul li:hover > ul {
display: block;
height: 200px;
}
#primary_nav_wrap ul li ul li:not(:hover) {
}
/* ul li ul li ul li {
overflow: auto;
} */
#subdeep {
overflow: auto;
height: 50px !important;
}
<h1>Simple Pure CSS Drop Down Menu</h1>
<nav id="primary_nav_wrap">
<ul>
<li>Menu 1
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4
<ul>
<li>Deep Menu 1
<ul id="subdeep">
<li>Sub Deep 1</li>
<li>Sub Deep 2</li>
<li>Sub Deep 3</li>
<li>Sub Deep 4</li>
</ul>
</li>
<li>Deep Menu 2</li>
</ul>
</li>
<li>Sub Menu 5</li>
</ul>
</li>
</ul>
</nav>
Probably you could use the proposed solution as the elements are positioned relative to each other and therefore the menu can set up some branches, you would "just" require to ensure that the parent element(s) remain visible
Mouse over on item "Link 3" will shows its sub-menu on the right side of it and then mouse over on "Link 31" for further sub menu.
.menu {
position: relative;
}
ul {
width: 200px;
margin: 0;
color: black;
list-style:none;
padding:0;
max-height:100px;
overflow-x: hidden;
overflow-y: auto;
}
li {
padding:0.5em;
}
li:hover{
background-color:blue;
color:white;
}
li .menu {
position: absolute;
z-index: 10;
background-color:lightgrey;
opacity: 0;
transition: opacity 0.5s;
}
li:hover > .menu,
.menu:hover {
opacity: 1;
}
li.parent {
cursor: pointer;
}
.level2 {
top: 0px;
left: 200px;
}
<div class="menu">
<ul>
<li>Link1</li>
<li class="parent">Link3...
<div class="menu level2">
<ul>
<li class="parent">Link31...
<div class="menu level2">
<ul>
<li>Link 311</li>
<li>Link 312</li>
<li>Link 313</li>
<li>Link 314</li>
</ul>
</div>
</li>
<li>Link 32</li>
<li>Link 33</li>
<li>Link 34</li>
</ul>
</div>
</li>
<li>Link2</li>
<li>Link1</li>
<li>Link2</li>
</ul>
</div>
I have some problem with my horisontal drop down menu. The sub_menu is not appearing under its parent. Can anyone help me get it right? What am I doing wrong? I want the menu to be 100% wide and centerd.
nav {
max-width: 100%;
text-align: center;
}
nav > ul > li {
padding: 10px;
display: inline;
}
nav ul li a {
font-family: sans-serif;
font-size: 1em;
color: #000;
}
nav ul li:hover .sub_menu {
display: block;
}
.sub_menu {
display: none;
position: absolute;
}
<nav>
<ul>
<li>link 1
</li>
<li>link 2
<ul class="sub_menu">
<li>link 2.1
</li>
<li>link 2.2
</li>
</ul>
</li>
<li>link 3
<ul class="sub_menu">
<li>link 3.1
</li>
<li>link 3.2
</li>
</ul>
</li>
</ul>
</nav>
Two steps
1. Set position: relative; for li:
nav > ul > li {
padding: 10px;
display: inline;
position: relative;
}
2. Set right: 0; for ul:
.sub_menu {
display: none;
position: absolute;
right: 0;
}
jsFiddle
Please take a look at this Fiddle:
https://jsfiddle.net/wd9wj7oe/1/
CODES:
HTML
<nav id="navigation">
<ul class="menu">
<li>home</li>
<li>about</li>
<li>products</li>
<ul>
<li>Line 1</li>
<li>Line 2</li>
<li>Line 3</li>
<li>Line 4</li>
<li>Line 5</li>
</ul>
<li>help</li>
<li>join us</li>
<li>contact</li>
</ul>
</nav>
CSS:
#navigation{
float: left;
list-style: none;
font-family: Arial;
font-size: 20px;
position: absolute;
}
#navigation li{
list-style: none;
float:left;
padding-left: 28px;
}
#navigation ul ul{
left: 0;
top: 100%;
position: absolute;
float: none;
list-style: none;
}
#navigation ul ul li{
display: none;
left: 0;
float: none;
z-index: 1000;
}
#navigation ul li:hover > ul{
display:block;
}
As you can see, there are two main problems happening here:
1 - The sub menu is not showing up when i hover over "products", as it should.
2 - Even if it would show up, the sub is not positioned correctly.
Help please!
You have the wrong markup for a drop-down menu
instead
<ul>
<li>item 1</li>
<li>item 2</li>
<ul>
<li>subitem 1</li>
<li>subitem 2</li>
<li>subitem 3</li>
</ul>
<li>item 3</li>
</ul>
to
<ul>
<li>item 1</li>
<li>item 2
<ul>
<li>subitem 1</li>
<li>subitem 2</li>
<li>subitem 3</li>
</ul>
</li>
<li>item 3</li>
</ul>
ul{
padding: 0;
}
#navigation {
float: left;
list-style: none;
font-family: Arial;
font-size: 20px;
position: absolute;
}
#navigation li {
list-style: none;
float:left;
padding-left: 28px;
position: relative;
}
#navigation ul li:hover > ul {
display: block;
}
#navigation ul ul {
position: absolute; left: auto; top: 100%;
list-style: none;
display: none;
z-index: 1000;
}
#navigation ul ul li {
float: none;
padding: 0;
}
<nav id="navigation">
<ul class="menu">
<li>home
</li>
<li>about
</li>
<li>products
<ul>
<li>Line 1
</li>
<li>Line 2
</li>
<li>Line 3
</li>
<li>Line 4
</li>
<li>Line 5
</li>
</ul>
</li>
<li>help
</li>
<li>join us
</li>
<li>contact
</li>
</ul>
</nav>
You have to hide the ul and not the li element. And for the positioning, you have to set position: relative on #navigation li.
#navigation {
float: left;
list-style: none;
font-family: Arial;
font-size: 20px;
position: absolute;
}
#navigation li {
position: relative;
list-style: none;
float:left;
padding-left: 28px;
}
#navigation ul ul {
display: none;
left: 0;
top: 100%;
width: 6em;
position: absolute;
float: none;
list-style: none;
}
#navigation ul ul li {
left: 0;
float: none;
z-index: 1000;
}
#navigation ul li:hover > ul {
display:block;
}
https://jsfiddle.net/wd9wj7oe/5/
I am trying to create a vertical navigation in my HTML document, but I cannot seem to get the main menu to line up evenly. Here is my HTML for the vertical navigation:
<div id="navbar">
<ul>
<li>Menu 1</li>
<li>Menu 2
<ul>
<li>Drop 1</li>
<li>Drop 2</li>
<li>Drop 3</li>
</ul></li>
<li>Menu 3</li>
<li>Menu 4
<ul>
<li>Drop 1</li>
<li>Drop 2</li>
</ul></li>
<li>Menu 5</li>
</ul>
</div>
And my CSS:
#navbar {
margin-left: -40px;
}
#navbar li{
list-style: none;
position: relative;
width: 209px;
padding: 6px;
line-height: 20pt;
cursor: pointer;
}
#navbar ul ul{
margin-left: 100px;
margin-top: -28px;
visibility:hidden;
height: 100px;
}
#navbar ul li:hover ul{
visibility:visible;
}
This is my first post ever, so I apologize if I didn't post in the correct format. This code is also from a much larger HTML/CSS file, so I just copy/pasted the only part I'm having an issue with. If I need to post a screenshot of what I'm talking about I can do that.
Thank you in advance!!
demo - http://jsfiddle.net/uab2hr50/2/
if you are looking to align the sub menu below the main menu
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#navbar ul {
border: 1px solid red;
display: inline-block;
padding: 6px;
}
#navbar li {
list-style: none;
position: relative;
width: 209px;
line-height: 20pt;
cursor: pointer;
}
#navbar ul ul {
display: none;
padding: 0;
border: 0;
}
#navbar ul li:hover ul {
display: block;
}
<div id="navbar">
<ul>
<li>Menu 1
</li>
<li>Menu 2
<ul>
<li>Drop 1
</li>
<li>Drop 2
</li>
<li>Drop 3
</li>
</ul>
</li>
<li>Menu 3
</li>
<li>Menu 4
<ul>
<li>Drop 1
</li>
<li>Drop 2
</li>
</ul>
</li>
<li>Menu 5
</li>
</ul>
</div>
There are a few problems here preventing the display you expect:
First: the fiddle
CSS CHANGES
#navbar li{
list-style: none;
position: relative;
/*width: 209px;*/
padding: 6px;
line-height: 20pt;
cursor: pointer;
display: block;
}
#navbar li:after {
content: '';
display: table;
clear: both;
}
#navbar ul a {
display: inline-block;
}
#navbar ul ul{
margin-top: 0;
visibility:hidden;
height: 100px;
padding: 0;
display: inline-block;
vertical-align: top;
margin-bottom: -9000px;
}
#navbar ul ul li:first-child {
padding-top: 0;
}
We removed quite a bit of your padding and margin rules here, and stopped setting a width on the li that you went ahead and broke out of anyway in the original code.
Then, we told both the a and ul elements to display as inline-block, told them they were to vertically align at the top and removed the padding-top off the first child of your sub-nav.
Then, we way over-compensate for the height of your lists by setting a margin-bottom of -9000px to pull your subsequent list items up to where they belong.
No absolute positioning needed, which would probably require some JavaScript to position everything reliably for you given different conditions.
Hope that helps.
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;