Would like the last submenu of this css drop-down menu to be right-aligned: https://jsfiddle.net/mishka00/p6cyy5p7/. It is currently right-aligned (incorrectly) just to show the desired end result. Tried various combinations of right:0 and left:auto, but couldn't figure it out.
See https://jsfiddle.net/sjmcpherso/b1pyqLpc/
#nav ul li:last-child ul {
right:0px;left:auto;
text-align:right;
background:white;
}
Plus add position:relative to the parent
add position: relative for #nav ul li
add right: 0; for #nav ul li:last-child ul
#nav ul {
padding:0;
margin:0;
list-style:none;
}
#nav ul li {
float:left;
border:1px solid #fff;
margin:0 30px;
position: relative;
}
#nav ul li a {
display:block;
padding:10px 6px;
position:relative;
}
#nav ul li:hover {
border-left:1px solid #E9E9E9;
border-right:1px solid #E9E9E9;
border-top:1px solid #E9E9E9;
}
#nav ul li ul {
display:none;
}
#nav ul li:hover ul {
display:block;
position:absolute;
z-index: 10;
background:#fff;
width:150px;
border:0;
}
#nav ul li ul li {
display:block;
position:relative;
border:none;
float:none;
margin:0;
left:-1px;
}
#nav ul li ul li:hover {
border:none;
background:#F7F9FB;
}
#nav ul li ul li a {
padding:10px;
border:1px solid #E9E9E9;
}
#nav ul li:last-child ul {
right: 0;
background:white;
}
#nav ul li:last-child ul li{
left:1px;
}
<div id="nav">
<ul>
<li>Menu1
<ul>
<li>Item1
</li>
<li>Item2
</li>
<li>Item3
</li>
<li>Item4
</li>
</ul>
</li>
<li>Menu2
<ul>
<li>Item1
</li>
<li>Item2
</li>
<li>Item3
</li>
<li>Item4
</li>
</ul>
</li>
<li>Menu3
<ul>
<li>Item1
</li>
<li>Item2
</li>
<li>Item3
</li>
<li>Item4
</li>
</ul>
</li>
</ul>
</div>
<div style='clear: both;margin-bottom:5px;'></div>
<div style='border-top:1px solid navy;'></div>
just add this code to your css
#nav ul li:last-of-type {
float: right;
}
Related
I am trying to make a horizontal menu, with several horizontal submenus. But the code does not work: https://jsfiddle.net/5v9Ljrwy/
I thought #help ul li:hover > li:first-child {position: absolute;display:inline;width: 80%;left:0;} would make the next submenu visible. Any suggestions how to do this?
<html>
<head>
<style>
#help{
overflow:hidden;
text-align:center;
width:80%;
background-color:#0066ff;
}
#help li{
list-style-type:none;
float:left;
padding:5px;
margin:0px;
}
#help li ul {display: none;background-color:#abcdef;}
//#help li:hover ul, #help li.hover ul {position: absolute;display: inline;width: 80%;left:0;}
#help ul li:hover > li:first-child {position: absolute;display:inline;width: 80%;left:0;}
</style>
</head>
<body>
<p id="ShowHelp">I like</p>
<nav id="help">
<ul>
<li>animals
<ul>
<li>Mammals
<ul>
<li>Elephant</li>
<li>Elephant</li>
<li>Elephant</li>
</ul>
</li>
<li>Fish</li>
</ul>
</li>
<li>cars
<ul>
<li>Ferrari</li>
</ul>
</li>
<li>games</li>
<li>other</li>
</ul>
</nav>
</body>
</html>
You can go with:
#help ul li:hover ul {
position: absolute;
display: inline;
width: 80%;
left: 0;
}
But will still need to style positioning of the submenu.
If looking for a clean code to start with, you may want to try:
HTML:
<ul id="nav">
<li>Home</li>
<li>
Products
<ul class="child">
<li>Hard Drives</li>
<li>Monitors</li>
<li>Speakers
<ul class="child">
<li>10 watt</li>
<li>20 watt</li>
<li>30 watt</li>
</ul>
</li>
<li>Random Equipment</li>
</ul>
</li>
<li>
Services
<ul class="child">
<li>Repairs</li>
<li>Installations</li>
<li>Setups</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
CSS:
#nav {position: relative;}
#nav li {
list-style:none;
float: left;
}
#nav li a {
display: block;
padding: 8px 12px;
text-decoration: none;
}
#nav li a:hover {
background-color:red;
color:#FFF;
opacity:1;
}
/* Targeting the first level menu */
#nav {
top:150px;
min-width:850px;
background:#fff;
opacity:0.5;
display: block;
height: 34px;
z-index: 100;
position: absolute;
}
#nav > li > a {
}
/* Targeting the second level menu */
#nav li ul {
color: #333;
display: none;
position: absolute;
width:850px;
}
#nav li ul li {
display: inline;
}
#nav li ul li a {
background: #fff;
border: none;
line-height: 34px;
margin: 0;
padding: 0 8px 0 10px;
}
#nav li ul li a:hover {
background-color:red;
color:#FFF;
opacity:1;
}
/* Third level menu */
#nav li ul li ul{
top: 0;
}
ul.child {
background-color:#FFF;
}
/* A class of current will be added via jQuery */
#nav li.current > a {
background: #f7f7f7;
float:left;
}
/* CSS fallback */
#nav li:hover > ul.child {
left:0;
top:34px;
display:inline;
position:absolute;
text-align:left;
}
#nav li:hover > ul.grandchild {
display:block;
}
Codepen example here.
Please could someone help me. I am trying to figure out why the third level menu isn't hiding.
Thanks for your help. The url is below:
http://www.aimsmediatesting.co.uk/solar/SF/SF/
<nav class="relative sixteen columns">
<ul>
<li> Home </li>
<li> About us </li>
<li> Solar PV
<ul>
<li>Benefits of Solar Panels</li>
<li> How Solar Panels Work
<ul>
<li> Feed in Tariffs </li>
<li> How Panels are installed </li>
</ul>
</li>
<li>Why Choose Us</a></li>
<li>Insurance Backed Guarantee</a></li>
</ul>
</li>
<li> ThermoDynamic </li>
</li>
<li> Solar Thermal </li>
</li>
<li> Energy Saver Optimiser </li>
</li>
<li> Testimonials
<ul>
<li> Michael Muller </li>
<li> Gordon Porter </li>
<li> Thomas Hagan </li>
<li> John MacBean </li>
<li> Cameron CS </li>
<li> Installation Map </li>
</ul>
</li>
</ul>
</nav>
MY CSS
nav{
width:100%;
background: #118542;
display:block;
height:45px;
}
nav ul{
display:inline;
}
nav li{
float:left;
padding: 12px;
}
nav li a{
color:#fff!important;
padding:5px;
font-size:14px;
font-weight:bold;
}
nav li a{
color:#fff!important;
}
nav ul ul{
display:none;
}
nav li:hover > ul a {
background: #58595b;
padding-top: 10px;
color: #FFFFFF;
text-decoration: none;
}
nav li:hover > ul {
background: #58595b;
padding-top: 10px;
color: #FFFFFF;
text-decoration: none;
}
nav li > ul > li:hover > ul {
left: 180px;
position: absolute !important;
top: 0;
}
nav li li{
position:relative;
}
nav li li ul{
display:none;
}
nav li li ul:hover{
display:block;
position:absolute;
top:0;
left:100%;
}
nav li a:hover {
padding-top:10px;
color:#fff!important;
padding-bottom:10px;
}
nav li ul {
display:none;
height:auto;
margin:0px;
border:0px;
position:absolute;
width:200px;
z-index:200;
}
nav li:hover ul {
display:block;
}
nav li ul {
top: 34px;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:200px;
z-index:200;
}
nav li:hover ul {
display:block;
}
nav li li {
display:block;
float:none;
margin:0px;
padding:0px;
width:200px;
background:#58595b;/*this is where the rounded corners for the dropdown disappears*/
}
nav li:hover li a {
background:none;
}
nav ul li:hover a {
background:#58595b;
padding-top:10px;
color:#FFFFFF;
text-decoration:none;
}
nav li ul a {
display: block;
font-size: 12px;
font-style: normal;
margin: 0px;
padding: 10px 10px 10px 15px;
text-align: left;
}
If anyone could help me figure out what class I need to add or change I would be really grateful for your help.
Thanks
This happens due to the nav li:hover ul{display:block;} rule. it will enable all levels of submenus once a top level item is hovered..
Change it to affect only immediate children (and not descendants)
nav li:hover > ul{
display:block;
}
(also you have that rule twice in your code, so remove one of the two instances)
I want you to know before I get started that I have been looking at all of the sub sub menu questions and I didn't see anything that could help the code I already have laid out. I appreciate any help at all that anybody can give me.
So, I am trying to add a sub sub menu and I thought I had figured it out, but I don't think I quite understand how to get the child combinators to work. If you could take a look at that part of the code specifically, you would be on my 'saint list.'
ETA: Oh yeah, and the problem is that the sub sub menu does not go out to the right and show up next to the parent that it is supposed to be subbing from, which is what I want it to do. I hope that makes sense.
Here is the fiddle preview - http://jsfiddle.net/BVtSC/18/
And here is the CSS:
/*------------------------- Header ---------------------------*/
#header {
background: #333 url(../images/bg-header2.png) repeat-x;
height:184px;
margin:15px 0 0;
}
#header div {
margin:0 auto;
padding:28px 0 0;
position:relative;
width:500px;
}
#header div ul {
height:118px;
left:10px;
list-style:none;
margin:0;
overflow:visible;
padding:0;
position:absolute;
top:10px;
float: left;
width: 500px;
}
#header div ul li:first-child {
margin:0;
}
#header div ul li {
float:left;
height:66px;
margin:0 0 0 65px;
text-align:left;
position:relative;
}
#header div ul li a {
color:#fff;
font-family:oswaldregular;
font-size:16px;
line-height:24px;
text-decoration:none;
text-transform:uppercase;
}
#header div ul li.selected a, #header div ul li a:hover {
color:#DD2D00;
}
#header div ul li ul {
height:1000px;
left:-99999px;
overflow:visible;
position:absolute;
top:37px;
width:115px;
float: left;
}
#header div ul li:hover ul {
left:0;
top:37px;
}
#header div ul li ul li {
background:none #343434;
border:1px solid #4f4f4f;
float:none;
height:29px;
margin:-1px 0 0;
padding:0 12px;
position:relative;
width:auto;
z-index:1000;
}
#header div ul li ul li:hover {
background:none #DD2D00;
}
#header div ul li ul li:hover {
left:0;
top:0;
}
#header div ul li ul li a {
color:#ffffff!important;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:28px;
text-transform:none;
}
#header div ul li ul li.selected a, #header div ul li ul li a:hover {
color:#fff!important;
}
#header div ul li ul li ul {
height:1000px;
right:-99999px;
overflow:visible;
position:absolute;
top:37px;
width:115px;
float: right;
}
#header div ul li ul li:hover ul {
left:0;
top:37px;
}
#header div ul li ul li ul li {
background:none #343434;
border:1px solid #4f4f4f;
float:none;
height:29px;
margin:-1px 0 0;
padding:0 12px;
position:relative;
width:auto;
z-index:1000;
}
#header div ul li ul li ul li:hover {
background:none #DD2D00;
}
#header div ul li ul li ul li:hover {
left:0;
top:0;
}
#header div ul li ul li ul li a {
color:#ffffff!important;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:28px;
text-transform:none;
}
#header div ul li ul li ul li.selected a, #header div ul li ul li ul li a:hover {
color:#fff!important;
}
Here is the HTML:
<div id="header">
<div>
<ul>
<li> Home
</li>
<li> About
</li>
<li class="selected"> Portfolio
<ul>
<li> Fantasy
</li>
<li> Makeup
<ul>
<li>Glamour Makeup
</li>
<li>Special Effects Makeup
</li>
</ul>
</li>
<li> Boudoir
</li>
<li> Baby & Kids
<ul>
<li><a href="baby.html">Baby</li>
<li><a href="baby.html">Kids</li> </ul>
</li>
<li>
Family
<ul>
<li><a href="couples.html">Couples</li>
<li><a href="mombaby.html">Mother/Baby</li>
<li><a href="momchild.html">Mother/Child</li>
<li><a href="fatherchild.html">Father/Child</li>
</ul>
</li>
<li>
Pets
</li>
<li> Portrait
</li>
</ul>
</li>
<li> Contact
</li>
</ul>
</div>
</div>
Again, any help at all would do wonders. Thank you for your consideration. :)
three things can help you.first using '>' in css selectors. second using this
ul ul{
display:none;
}
ul > li:hover > ul {
display:block;
}
that cause a ul block being displayed when you hover on its '< li >' parent.
and third one is using css positions to adjust submenus position.like this
#header > ul{
position:relative;
}
li{
position:relative;
}
ul ul{
position:absolute;
left:120px;
top:0;
}
or you can use this which is a simple example of nested menu.(unlimited). jsfiddle
you should just adjust its size and color.
HTML
<ul class="menu">
<li>item1</li>
<li>item2
<ul>
<li>sub item1</li>
<li>sub item2</li>
<li>sub item3
<ul>
<li>sub sub item 1</li>
<li>sub sub item 2
<ul>
<li>sub sub sub item1</li>
<li>sub sub sub item2</li>
<li>sub sub sub item3
<ul>
<li>yes why not?</li>
<li>you can still continue</li>
<li>if you want</li>
<li>you can try.(-;</li>
</ul>
</li>
<li>sub sub sub item4</li>
</ul>
</li>
<li>sub sub item 3</li>
</ul>
</li>
<li>sub item4</li>
</ul>
</li>
<li>item3</li>
</ul>
CSS
ul.menu{
position:relative;
}
ul.menu li{
padding:0;
margin:0;
position:relative;
border:1px solid;
}
ul.menu > li{
float:left;
padding:10px 45px;
}
ul.menu > li li{
padding:7px;
}
ul.menu , ul.menu ul{
list-style:none;
padding:5px;
margin:0;
overflow:visible;
}
ul.menu li:hover > ul{
display:block;
}
ul.menu ul{
display:none;
position:absolute;
left:-6px;
top:37px;
width:160px;
}
ul.menu ul:hover{
display:block;
}
ul.menu ul ul{
left:158px;
top:0;
}
uMy child pages are showing up in a horizontal line under the parent page link in the navigation. I can't figure out where the css is wrong. You can see what I'm talking about here (the links under Sample Page are the ones in question): http://sitetest3.talktothedogs.com.
HTML for Navigation (which is auto-generated by WP)
<div id="nav">
<div class="menu">
<ul>
<li class="current_page_item">Home</li>
<li class="page_item page-item-2">Sample Page
<ul class='children'>
<li class="page_item page-item-4">Testing page 2</li>
<li class="page_item page-item-6">Testing page 1</li>
</ul>
</li>
</ul>
</div>
</div>
My CSS Code
.menu, .menu ul { margin:0; padding:0; list-style:none; height:29px; text-align:center; }
.menu a { color:#fff; display:block; padding-left:15px; padding-right:15px; padding-bottom:0px; }
.menu a:hover { color:#000; display:block; text-decoration:none; }
.menu li { float:left; margin:0; padding: 0px; }
.menu li li { float:left; margin: 0 0 0 5px; padding:0; width:130px; }
.menu li ul.submenu li { display:block; position:absolute; left:0; }
.menu li li a, .menu li li a:link, .menu li li a:visited { background:#a82652; width:150px; float:none; margin:0; padding: 4px 10px 5px 10px; color:#fff; }
.menu li li a:hover, .menu-header li li a:active { background:#000; width:150px; float: none; margin: 0; padding: 4px 10px 5px 10px; color:#fff; }
.menu li ul { position:absolute; width:10em; left:-999em; padding-top:13px; z-index:1; }
.menu li:hover ul { left:auto; display:block; }
.menu li:hover ul, #menu li.sfhover ul { left: auto; }
.menu li.current_page_item a { }
.menu li.current_page_item a:hover{ }
Any help would be appreciated. Thanks in advance!
Change your CSS as follows:
.menu li a{ margin-bottom:13px;}
.menu li li { float:none; margin: 0; padding:0; width:130px; }
Here is how this would look
Your first line in the CSS:
.menu, .menu ul { ... }
is setting the height of both the <div class="menu"> AND the <ul> within that .menu to the same height. The entire menu is constrained to a container that's 29px high.
http://www.sage-wellness.com/nav.html
I am having a problem with this in IE7- all of the top-level navigation is stacked vertically instead of horizontally.
Here is the CSS
#navigation { width:800px; height:27px; background-image:url(images/navbg.gif); background- repeat:no-repeat; margin-top:30px; }
#navigation ul { margin:0px; padding:0px; font-family: Arial, Helvetica, sans-serif; font-size: 12px;line-height: 27px; display:inline; }
#navigation ul li { display:inline; float:left; list-style:none; height:27px; line-height:27px; position:relative; }
#navigation li a { color:#a1c301; text-decoration:none; padding-right:10px; padding-left:10px; }
#navigation li a:hover, #navigation li:hover a { color:#fff; background-color: #91b000; display:inline-block; }
#navigation li ul { margin:0px; padding:0px; display:none; position:absolute; left:0px; top:27px; background-color:#5b5b52;}
#navigation li:hover ul { display:block; width:150px;}
#navigation li li a { color:#a1c301; text-decoration:none; }
#navigation li li a:hover, #navigation li li:hover a { color:#fff; background-color: #91b000; width:130px; display:inline-block;}
#navigation li.top { }
#navigation li.top a:hover { }
#navigation ul.submenu { background-color:#5b5b52; }
#navigation li.submenu { width:150px; border: 1px dotted #999; background-color:#5b5b52; }
#navigation .submenu li a { background:#5b5b52; }
and here is the HTML
<div id="navigation">
<ul class="top">
<li class="top"> </li>
<li class="top">Home</li>
<li class="top">Acupuncture</li>
<li class="top">Chinese Medicine
<ul class="submenu">
<li class="submenu">Herbal Medicine</li>
<li class="submenu">Other Modalities</li>
</ul>
</li>
<li class="top">Conditions Treated</li>
<li class="top">About
<ul class="submenu">
<li class="submenu">Deb Valentin Bio</li>
<li class="submenu">FAQs</li>
<li class="submenu">Community Resources</li>
</ul>
</li>
<li class="top">Testimonials</li>
<li class="top">Blog</li>
<li class="top">Schedule an Appointment</li>
</ul>
</div>
ie7 doesn't understand :hover on elements other than anchors, as well as has no clue what display:inline-block means. check out suckerfish dropdowns for a solution http://www.htmldog.com/articles/suckerfish/dropdowns/