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
Related
I have created my nav bar which was working fine but now i tried to add sub menu in my navbar and its not showing sub menu on hover. kindly check and correct me.
First I added <ul> in my <li> tag then I added css to hide nested <ul> then I tried to show <ul> on hover <li>
*{
margin: 0;
padding: 0;
}
nav{
background-color: red;
}
ul{
background-color: purple;
width: 50%;
}
nav ul li {
list-style: none;
padding: 5px;
display: inline-block;
}
nav ul li a{
text-decoration: none;
color:black;
font: bold 12px Arial;
}
nav ul li:hover{
background-color: blue;
color: red;
}
nav ul li:hover a{
color: red;
}
ul li ul {
display: none;
position:absolute;
}
nav ul li:hover ul {
display:block;
}
<nav>
<ul>
<li> Home</li>
<li> About Us</li>
<li> Contact Us</li>
<li> Privacy Policy</li>
<li>
<ul>
<li>Submenu 1</li>
<li>Submenu 2</li>
<li>Submenu 3</li>
<li>Submenu 4</li>
</ul>
</li>
</ul>
</nav>
Looks like your <li> wrap is incorrect!
here is the fiddle
After Privacy Policy you have created another <li> that shouldn't be needed. you have to wrap the sub-menus with in privacy policy tag not a new one that is one of the reason why the css was not showing data as expected and you were almost there regarding CSS I just fixed it for you! hope it helps.
* {
margin: 0;
padding: 0;
}
nav {
height: 30px;
}
nav ul {
display: block;
position: relative;
z-index: 100;
}
nav ul li {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
nav ul li ul {
display: none;
}
nav ul li a {
width: 100px;
height: 30px;
display: block;
text-decoration: none;
text-align: center;
line-height: 30px;
background-color: black;
color: white;
}
nav ul li a:hover {
background-color: red;
}
nav ul li:hover ul {
position: absolute;
top: 30px;
display: block;
width: 100px;
}
nav ul li:hover ul li {
display: block;
}
<nav>
<ul>
<li> Home</li>
<li> About Us</li>
<li> Contact Us</li>
<li> Privacy Policy
<ul>
<li>Submenu 1</li>
<li>Submenu 2</li>
<li>Submenu 3</li>
</ul>
</li>
</ul>
</nav>
Why don't you start from this working snippet and try to change data according to your needs :)
HTML Sub-Nav
*{
margin: 0;
padding: 0;
}
nav{
background-color: red;
}
ul{
background-color: purple;
width: 50%;
}
nav ul li {
list-style: none;
padding: 5px;
display: inline-block;
}
nav ul li a{
text-decoration: none;
color:black;
font: bold 12px Arial;
}
nav ul li:hover{
background-color: blue;
color: red;
}
nav ul li:hover a{
color: red;
}
ul li ul {
display: none;
position:absolute;
}
nav ul li:hover ul {
display:block;
}
<nav>
<ul>
<li> Home</li>
<li> About Us</li>
<li> Contact Us</li>
<li> Privacy Policy</li>
<li>
test
<ul>
<li>Submenu 1</li>
<li>Submenu 2</li>
<li>Submenu 3</li>
<li>Submenu 4</li>
</ul>
</li>
</ul>
You have to add an anchor tag in the sub nav you have created. Because currently those sub-tabs are created but are not associated with any super-tab.
Subnav
So add this above your sub-nav code. You are good to go.
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'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'm trying to make a vertical dropdown menu but doesn't seem to work. It currently doesn't display any text, just a bar going across the top of the page. It is being pushed to be by by 115px for due to requirements. Here's the HTML:
<div id="wrapper">
<h1>Flags </h1>
<nav>
<ul>
<li>Introduction</li>
<li>History</li>
<li>National Flags</li>
<li>International Maritime Signal Flags
<ul>
<li>Maritime Signals: Letters</li>
<li>Maritime Signals: Numbers</li>
</ul>
</li>
</ul>
</nav>
Here is the CSS:
nav {
height:30px;
}
nav ul {
background-color: #5d2c2c;
padding: 0;
list-style: none;
position: relative;
bottom: 115px;
display: block;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: right;
bottom: 115px;
position: relative;
}
nav ul li a {
display: block; padding: 5px 5px;
color: #FFF; text-decoration: none;
text-align:right;
}
nav ul ul {
background: #5d2c2c; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #000;
border-bottom: 1px solid #575f6a;
position: relative;
}
The CSS needed a little work on
Try this FIDDLE it'll work
This was missing:
nav ul li:nth-child(4) ul { display:none; }
nav ul li:nth-child(4):hover ul { display:block; color:red; }
and bottom was removed from this one
nav ul li {
float: left;
position: relative;
}
I found this link the other day, it's an step by step guide with full examples, check it out: http://www.adam-bray.com/blog/91/Easy+HTML+5+%26+CSS+3+Navigation+Menu/
check this fiddle , a similar implementation
<nav>
<ul>
<li class="header">
People
<ul class="content">
<li>Sub 1</li>
<li>Sub 2</li>
</ul>
</li>
<li class="header">
Animals
<ul class="content">
<li>Sub 1</li>
<li>Sub 2</li>
</ul>
</li>
</ul>
</nav>
nav > ul{}
nav > ul > li{float:left;margin:0 5px;background:#cc3333;}
.header li a{background:#eee;color:#cc3333;}
.header li a:hover{color:#fff;background:#cc3333;}
ul{padding:0;}
li{list-style-type:none;}
a{color:#fff;text-decoration:none;padding:5px;display:block;text-align:center;}
.content{
display:none;
}
.header:hover > .content{display:block;}
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