I am trying to implement a horizontal navigation menu with a horizontal dropdown menu. I am trying to figure out how to center the horizontal dropdown text so it sits in the center of the navigation container so the user doesn't have to move the mouse far left to reach the links.
<style type="text/css">
#nav-container {
padding: 4px;
width: 900px;
height: 60px;
background: #CCC;
}
#navbar {
margin:0;
padding:0;
}
#navbar li {
padding: 6px;
display: inline;
list-style: none;
}
#navbar li ul {
display: none;
position: absolute;
margin:0;
padding:0;
width: 900px;
}
#navbar li:hover ul {
display: block;
}
</style>
</head>
<body>
<div id="nav-container">
<ul id="navbar">
<li>Link
<ul>
<li>Hello</li>
<li>World</li>
</ul>
</li>
<li>Link
<ul>
<li>Peace</li>
<li>Love</li>
</ul>
</li>
<li>Link
<ul>
<li>Smiles</li>
<li>Cries</li>
</ul>
</li>
<li>Link
<ul>
<li>Homer</li>
<li>Peter</li>
</ul>
</li>
<li>Link
<ul>
<li>Giggity</li>
<li>Fapping</li>
</ul>
</li>
<li>Link
<ul>
<li>Napster</li>
<li>Myspace</li>
</ul>
</li>
</ul>
</div>
This is rough code just to show an example, here is a live example of the code.
Thanks
A combination of relative-absolute positioning should do the trick. I tried adding these two rules and that seemed to work:
#navbar li {
position: relative;
}
#navbar li ul {
position: absolute;
left: 0;
top: 24px; /* must me same as the height of parent li +/- a couple of pixels */
}
That seems to do the trick.
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
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 trying to make the navbar elements appear in a row, side by side, with the dropdown one causing a menu to drop down beneath them.
I know there's the nav element and I know there are a thousand jQuery plugins for this. I just want to understand why this isn't working.
http://codepen.io/anon/pen/hjKLD
<!-- Works all the way down to IE7! -->
<header>
<nav>
link
link
<ul class="drop">
<li>
dropdown
</li>
<li class="menu">
link
link
link
link
</li>
</ul>
link
link
</nav>
</header>
li {
list-style-type:none;
margin: 0px;
padding: 0px;
border: 0px;
}
Try
ul, li {
display: inline;
}
Update
I found a quick solution, and without using JavaScript! You might need to make some changes to fix the minor issues.
Here's what I'd suggest for your HTML:
<header>
<nav>
<ul>
<li>link 1</li>
<li>link 2</li>
<li class="menu">Dropdown
<ul class="drop">
<li>link 3</li>
<li>link 4</li>
<li>link 5</li>
<li>link 6</li>
</ul>
</li>
<li>link 7</li>
<li>link 8</li>
</ul>
</nav>
</header>
It's cleaner and more semantic.
Now for the CSS:
a, ul, li {
list-style-type:none;
margin: 0px;
padding: 0px;
border: 0px;
display: inline;
text-decoration: none;
}
a:hover {text-decoration: underline;}
ul {display: inline-block;}
.drop {
display: none;
padding: 5px;
border: 1px solid #000;
background-color: #fff;
}
.menu:hover .drop {
display: block;
position: absolute;
left: 90px;
}
.drop li {display: block;}
No JS required.
Demo via Codepen here.
Need to add display: inline; to the <li> element as well. Otherwise, it's still blocked.
Your list is being displayed as a block element. Which will fill the space horizontaly causing the elements to render vertically.
In order to fix this issue you can chance the display type:
display: inline;
display: inline-block;
Or you can float the element, which will make it no longer fill horizontally and allow the elements to be displayed side by side:
float: left;
See here for more details on css display types http://css-tricks.com/almanac/properties/d/display/
Try this css instead:
a{
vertical-align: top;
}
li {
list-style-type:none;
margin: 0px;
padding: 0px;
border: 0px;
}
ul{
display: inline-block;
margin: 0px;
padding: 0px;
}
This will make them all end up on the same row, but something does still need to be done about the dropdown menu pushing the items to the right further when it's shown.
I think that's what you searching for:
Try this: http://codepen.io/anon/pen/vaEkt
For consistency of markup I swapped the <ul> list in <nav> element.
HTML
<header>
<nav>
link
link
<nav class="drop">
<span>dropdown</span>
<nav class="menu">
link
link
link
link
</nav>
</nav>
link
link
</nav>
</header>
CSS
li {
list-style-type:none;
margin: 0px;
padding: 0px;
border: 0px;
}
nav,
ul {
display: inline-block;
}
.drop {
position: relative;
}
.drop .menu {
position: absolute;
bootom: 0;
left: 0;
}
I have a list that I'd like the main elements to align vertically and the sub elements of each to drop down underneath the main element. I want to keep the position: absolute on the subNav class because the width of this nav will vary from each so I can't set a width. This works in Firefox, but in IE 7 the absolute causes the subnav to display inline (so shifted to the right and up from where I would like). How can I fix this?
Example:
<style>
#nav ul, #nav li ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#nav li {
float: left;
width: 120px;
border-right: 1px solid #000;
padding: 10px;
}
#nav li ul li {
float: none;
width: auto;
height: auto;
border-right: none;
text-align: left;
padding: 0;
}
#nav .subNav {
background: #eee;
position: absolute;
padding: 10px;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li>Main One
<ul class="subNav">
<li>Sub One A</li>
<li>Sub One B</li>
</ul>
</li>
<li>Main Two
<ul class="subNav">
<li>Sub Two A</li>
<li>Sub Two B</li>
</ul>
</li>
</ul>
</div>
</body>
Don't forget to put in your top and left values.
nav .subNav{
top:10px;
left:20px;
}
nav.containerDiv {
position:relative;
}
HTML
<ul class="nav">
<li>
<div class="containerDiv">
<ul class="subNav">...
</div>
</li>
</ul>
This will result in the subNav being relative to the container div, instead of the whole document.