This menu is a multi-level horizontal menu. I am trying to make a 3nd level submenu to become vertical (1st & 2nd level would stay as horizontal)
So if I hover Products, it will list Harddrives, Monitors, and Speakers... horizontally. However, when I hover the Speakers, it now should list 10 Walt, 20 Walt... verticallly like a dropdown list.
Can this be done? Please help.
<style>
/**
* horizontal navigation (SO)
*/
body {
background: url('.jpg') 50% 50%;
}
/* Targeting both first and second level menus */
#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;
}
</style>
<!-- content to be placed inside <body>…</body> -->
<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>
jsFiddle Demo: http://jsfiddle.net/fJQ59/
Add to your style following codes
#nav li ul li ul li { display: block; float: none; }
Here's a starting point for you:
HTML
<ul>
<li>
Option One
<ul>
<li>
Second Row One
<ul>
<li>
Third Row One
</li>
<li>
Third Row Two
</li>
<li>
Third Row Three
</li>
</ul>
</li>
<li>
Second Row Two
</li>
</ul>
</li>
<li>
Option Two
</li>
<li>
Option Three
</li>
</ul>
CSS
ul {
width: 600px;
list-style-type: none;
}
ul > li,
ul > li > ul > li {
position: relative;
float: left;
padding: 3px 5px;
margin: 10px 5px;
cursor: pointer;
}
/*****************************
This next line is the key to
making the third row vertical:
******************************/
ul ul ul li {
float: none;
}
li > ul {
display: none;
}
li:hover > ul {
position: absolute;
display: block;
width: 600px;
}
View on JSFiddle
Related
I am using this template that doesn't support sub menu natively but i really like its design: zStartup
The HTML structure of my menu is:
<div id="menu">
<nav>
<div class="wrap-nav">
<ul>
<li>Home</li>
<li>Projects
<ul class="sub-menu">
<li>Blog</li>
<li>Services
<ul class="sub-menu">
<li>ONE</li>
<li>TWO</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
The CSS for submenu-less version, as in the template is:
nav {
display: inline-block;
z-index: 1111;
position: relative;
float: right;
}
ul.menu {
margin: 28px 10px 0px 0px;
display: inline-block;
}
ul.menu li {
float: left;
line-height: 30px;
margin: 0px 0px 0px 48px;
}
ul.menu li:hover,
ul.menu li.current {} ul.menu li a {
font-size: 25px;
line-height: 30px;
color: #f2f2f2;
display: inline-block;
}
ul.menu li a:hover,
ul.menu li.current a {
color: #ff9000;
}
I added the following to accomodate the submenu with unwanted effects as shown in the pictures:
ul.menu li ul { display:none; list-style:none;top:30px; left:auto; float:right; text-align:left;position:relative; width:200px !important; border:1px solid blue;z-index:10000; }
ul.menu li:hover > .sub-menu { display:block; }
.sub-menu li {display:block;}
.sub-menu li a {
display:block; height:40px;font-size: 0.89em;padding:5px 30px;
}
The width:200px was a desperate move as it refused to show the submenu vertically (i assumed display:block would do the trick).
Anyway, the above codes shows the following result, which is ugly:
Any input?
You have several issues in your code. Here are a couple of informations that can help you:
Rule #1: Always format your code properly. Trust me that will make a difference!
You are using a menu class in your css but there is none in your html (it's an id not a class).
I show you below the mechanism of sub-menu in pure css, with that you'll have everything you need to make yours.
ul {
/* We are removing default styles of ul */
list-style: none;
padding: 0;
margin: 0;
}
ul li {
/* Applies to all li */
display: block;
float: left;
position: relative; /* this will make the sub-menu positionned relatived to the hovered li */
}
ul li + li {
margin-left: 28px; /* just to space your li */
}
li ul {
display: none; /* Hides the submenu */
text-align: right; /* Display sub-menu text on the right */
}
ul li a {
/* Your styles for the links here I let browser's defaults */
}
ul li a:hover {
/* Your styles for the links when hovered */
color: #ff9000;
}
li ul li + li {
margin-left: 0; /* Remove the margin between li that we applied above */
}
li:hover > ul {
display: block; /* On hover show sub-menu */
position: absolute;
}
li:hover li {
float: none; /* Remove floating for sub-menu li so that li displays one above the other */
}
ul ul ul {
right: 100%; /* position sub-menu of sub-menu to the left of the parent submenu */
top: 0;
}
ul ul ul li {
margin-right: 8px; /* Just so that li inside submenu of submenu don't touch parent submenu's li (it depends on the style you want for your menu) */
}
ul::after {
/* Clearfix because we've used float on ul */
content: '';
display: block;
clear: both;
}
<nav>
<ul>
<li>Home</li>
<li>Projects
<ul class="sub-menu">
<li>Blog</li>
<li>Services
<ul class="sub-menu">
<li>ONE</li>
<li>TWO</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
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.
I have created a dropdown list using css. The drop down list works perfect, opening the menu to down. How can I modified in order to open the menu to up (opposite direction)? make something like drop up list.
This is my html code.
<div id="menu">
<ul>
<li> <?php echo $user_data['name']; ?>
<ul>
<li>Logout</li>
<li>Change Password<li>
<li>Settings<li>
</ul>
</li>
<li> Profile
<ul>
<li>Edit Profile</li>
<li>View Profile</li>
</ul>
</li>
<li> Home </li>
</ul>
</div>
and this is my css.
#menu ul{
padding:0px;
margin:0px;
list-style:none;
}
#menu ul li {
float:left;
}
#menu ul li a:hover{
background:#fff;
color:#333;
}
#menu ul li ul{
position:absolute;
height:0px;
overflow:hidden;
}
#menu ul li ul li{
float:none;
}
#menu ul li:hover ul{
overflow:visible;
}
#menu ul li:hover ul li a{
padding:10px;
}
#menu ul li ul li a{
-webkit-transition:0.3s;
-moz-transition:0.3s;
padding: 0px 10px;
}
http://codepen.io/bjornmeansbear/pen/MwGYZL
The following CSS should help you — it incorporates the "drop-up" and also cleans up a few other things...
#menu {
margin-top: 100px;
}
#menu ul {
padding: 0px;
margin: 0px;
list-style: none;
}
#menu > ul > li {
float: left;
margin: 10px;
position: relative;
}
#menu a { display: block;}
#menu a:hover {
background: #fff;
color: #333;
}
#menu ul li ul {
position: absolute;
height: 0px;
width: 250%;
overflow: hidden;
}
#menu ul li:hover ul {
height: initial;
bottom: 100%;
overflow: visible;
background: lightgray;
}
#menu li li a {
padding: 5px 10px;
}
#menu a {
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
padding: 0px 10px;
}
Basically, if you position the <li> that houses the child <ul> relatively, you can use the absolute position of the <ul> to position it anywhere based directly on its the parent... does that make sense?
I have horizontal menu with 2 sub level. When i move down i would like to keep the Top level menu in hover state.
I have create jsfiddle. link to the JsFiddle
Html Code is :
<div>
<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>
</div>
And Css code is
> body {
}
#nav li {
list-style:none;
float: left;
}
#nav li a {
display: block;
padding: 8px 12px;
text-decoration: none;
}
#nav li a:hover {
opacity:1;
}
/* Targeting the first level menu */
#nav {
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 {
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;
}
Can somebody guide me how to do that?
Thanks.
Change the selector from
#nav > li > a:hover
to
#nav > li:hover > a
And
#nav li ul li a:hover
to
#nav li ul li:hover > a
Fiddle here: http://jsfiddle.net/csaltyj/3A78u/
I want the sub-sub nav menu to align with the top of its parent (hence top: 0) but it aligns with the parent's parent for some reason. I'm not sure what's going on.. any ideas?
HTML:
<div id="nav">
<ul>
<li><a>Item One</a></li>
<li><a>Item Two</a>
<ul>
<li><a>Item two has babies</a></li>
<li><a>Baby #2</a>
<ul>
<li><a>Sub-babies</a></li>
<li><a>This is fun</a></li>
<li><a>Last Item</a></li>
</ul>
</li>
<li><a>SubSub</a>
<ul>
<li><a>Another Item</a></li>
<li><a>Another!</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
CSS:
#nav {
height: 40px;
}
#nav ul {
list-style: none;
font-family: Arial, sans-serif;
font-size: 0.8em;
}
/* When mousing over any LI, reveal its UL if any */
#nav > ul li:hover > ul {
display: block;
}
/* For all links */
#nav a {
text-decoration: none;
color: #000;
}
/* Main nav styling */
#nav > ul > li > a {
padding: 1em;
}
#nav a:hover {
color: red;
}
#nav > ul > li {
float: left;
border: 1px solid #999;
}
/* Subnav styling */
#nav > ul ul {
display: none;
position: absolute;
font-size: 1em;
background: #eee;
padding: 0.5em;
border: 1px solid #999;
}
/* Subsubnav styling */
#nav > ul ul ul {
left: 50px;
top: 0;
width: 150px;
position: absolute;
}
#content {
}
You need to add position: relative to the "level 2" li elements:
#nav > ul ul li {
position: relative
}
Here's a version where the babies are all lined up: http://jsfiddle.net/3A78u/2/
If you'd like to use >, it would be #nav > ul > li > ul > li.
The 'top' property is relative to the first non-statically positioned parent. In this is case it's the UL element (which is absolutely positioned). You need to add 'position:relative;' to the list-items to get elements inside to align relatively to it.