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;
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'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
}
I'd like for the menu sub menu to show 10 pixels underneath the menu, i can achieve that using margin-top on the ul, but then i cant move my mouse down to the sub menu because there is a gap. There are posts very similar to this but i could't extract an answer from them. Like this one
Space between menu and drop down menu
deepMenu {
background: black !important;
margin-left: 100px !important;
position: absolute !important;
}
.lmao li ul {
display: none;
position: absolute;
border-top: 5px solid black;
margin-top: 18px;
}
.lmao li ul li {
display: none;
border-top: 0.1px solid #F2F2F2;
padding: 10px 40px 10px 10px;
margin: 0;
position: relative;
z-index: 9999999;
background: white;
font-size: 8pt;
line-height: 24px;
text-align: left;
}
.lmao li:hover > ul,
.lmao li:hover > ul li {
display: block;
}
<ul class="lmao">
<li class="point1">home
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2 long lel</li>
<li>Sub Menu 3 really bare long mad</li>
<li>Sub Menu 4 dvg</li>
</ul>
<li class="point">features
<ul>
<li>sdfgsdfgsdfgsdfgsdfgsdfg</li>
<li>sdfg</li>
<li>sdfgsdfgsdfgsdfg</li>
<li>sdfgsdfgsdfgsdfgsdfg</li>
</ul>
<li class="point layout">Layouts
<ul>
<li>sfdgsdfgsdfgsdfgsdfgdfgsdgsdf</li>
<li>sfdgsdfgsdfgl</li>
<li>dfsgsdfgsdfgsdfgsdfgsdfgsdfg</li>
<li class="arrow">sfgsdfg
<ul class="deepMenu">
<li>Deep Menu 1
<ul>
<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>
</ul>
</li>
<li class="point">pages</li>
<li class="point">light version</li>
</ul>
UPDATE:
Now that you gave the reference, the hover menu is not actually distant from the li itself, but it is positioned right below it. On the example site the li has a height bigger than the text within and has position: relative; on it.
The dropdown is absolute positioned right below this bigger <li> element with a top: 100%; that way it is distant from the text that triggers the dropdown.
Check the updated Snippet bellow with an updated solution.
Margins are not 'hoverable', and therefore the hover selector is not triggered. One way to keep it distant whilst 'hoverable' is to use padding instead of margins.
So you could change your .lmao li ul, although I wouldn't advise adding style to tags as a CSS best practice, I usually adopt a CSS naming convention such as BEM, SMACSS, among others.
/* Reset the ul style */
ul {
list-style: none;
padding: 0;
margin: 0;
}
deepMenu {
background: black !important;
margin-left: 100px !important;
position: absolute !important;
}
.lmao {
width: 100%;
text-align: center;
}
.lmao li {
display: inline-block;
background-color: white;
padding: 15px;
position: relative;
padding: 20px;
}
.lmao li a {
text-decoration: none;
color: black;
}
.lmao li a:hover {
text-decoration: none;
color: #f38763;
}
.lmao li ul {
display: none;
position: absolute;
border-top: 5px solid black;
top: 100%;
min-width: 200px;
}
.lmao li ul li {
display: none;
border-top: 0.1px solid #F2F2F2;
padding: 10px 40px 10px 10px;
margin: 0;
position: relative;
z-index: 9999999;
background: white;
font-size: 8pt;
line-height: 24px;
text-align: left;
}
.lmao li:hover > ul,
.lmao li:hover > ul li {
display: block;
}
<ul class="lmao">
<li class="point1">home
<ul>
<li>Sub Menu 1
</li>
<li>Sub Menu 2 long lel
</li>
<li>Sub Menu 3 really bare long mad
</li>
<li>Sub Menu 4 dvg
</li>
</ul>
<li class="point">features
<ul>
<li>sdfgsdfgsdfgsdfgsdfgsdfg
</li>
<li>sdfg
</li>
<li>sdfgsdfgsdfgsdfg
</li>
<li>sdfgsdfgsdfgsdfgsdfg
</li>
</ul>
<li class="point layout">Layouts
<ul>
<li>sfdgsdfgsdfgsdfgsdfgdfgsdgsdf
</li>
<li>sfdgsdfgsdfgl
</li>
<li>dfsgsdfgsdfgsdfgsdfgsdfgsdfg
</li>
<li class="arrow">sfgsdfg
<ul class="deepMenu">
<li>Deep Menu 1
<ul>
<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>
</ul>
</li>
<li class="point">pages
</li>
<li class="point">light version
</li>
</ul>
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;
}
nav ul ul:before {
content: "";
display: block;
height: 20px;
position: absolute;
top: -20px;
width: 100%;
}
<body>
<nav>
<ul>
<li>One
<ul>
<li>A</li>
<li>B
</ul>
</li>
<li>Two
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</li>
<li>Three
<ul>
<li>A</li>
<li>B</li>
</ul>
</li>
<li>Four</li>
</ul>
</nav>
</body>
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'm having trouble with z-index in IE 7. The problem is that the menu items are in 2 rows. If any of first row item has sub-menu, the IE7 won't let you hover it. The problem is caused by IE7 only.
Here's my code:
<div id="wrapper">
<div id="main-nav">
<ul class="main-menu" id="menu-header-menu">
<li class="menu-item">item 1
<ul class="sub-menu">
<li class="menu-item"> sub item
<ul class="sub-menu">
<li class="menu-item">sub sub item</li>
<li class="menu-item">sub sub item</li>
</ul>
</li>
</ul>
</li>
<li class="menu-item">item 2</li>
<li class="menu-item">item 3</li>
<li class="menu-item"> test item
<ul class="sub-menu">
<li class="menu-item">sub sub item</li>
<li class="menu-item">sub sub item</li>
</ul>
</li>
</ul>
</div>
</div>
CSS:
#wrapper {
width:250px;
margin:0 auto;
}
#main-nav {
background-color:orange;
padding: 0 10px;
clear: both;
display: block;
float: left;
width: 100%;
}
#main-nav ul {
list-style: none;
margin: 0 0 0 -0.8125em;
padding-left: 0;
}
#main-nav li {
float: left;
position: relative;
}
#main-nav a {
color:#737373;
display: block;
line-height: 2.333em;
padding: 0 1.2125em;
text-decoration: none;
}
#main-nav ul ul {
display: none;
float: left;
margin: 0;
position: absolute;
top: 2.333em;
left: 0;
width: 188px;
z-index: 999;
}
#main-nav ul ul ul {
left: 100%;
top: 0;
}
#main-nav ul ul a {
background: yellow;
height: auto;
line-height: 1.4em;
padding: 10px 10px;
width: 168px;
}
#main-nav li:hover > a,
#main-nav a:focus {
color: #373737;
}
#main-nav ul li:hover > ul {
display: block;
}
Here you can see the problem. When you hover on the item 1, it does not let me hover its sub item which has yellow background.
Easy fix. Add this to the bottom of your css code:
#main-nav ul li:hover {z-index:9999;}
The problem is that your element needed a higher z-index upon hovering, not before.
Here's a live link to a demo I uploaded. Works on both ie7 and ff/chr/saf:
http://sotkra.com/stackoverflow/ie7zindex/index.html
I nonetheless suggest you simplify your code, it's too clunky. There is a tiny bug where once you hover your 3rd layer menu, exit and then re-enter, the yellow background will be there. Should be fixed with a proper cleanup of your html/css
Cheers
G