The problem is that when i hover on the area where the more link is, the menu appears and it should appear only if i have hovered over the More link, not on the area. I tried with overflow:hidden on the sub-menu .ktmsg ul li ul { but doesn't work.
I have the below code
HTML
<div class="ktmsg">
<li><a id="a0" href="#"> 0 </a></li>
<ul>
<li class="a1"> 1 </li>
<li>
More
<ul>
<li class="a4"> 4 </li>
<li class="a5"> 5 </li>
<li class="a6"> 6 </li>
</ul>
</li>
</ul>
</div>
CSS
.ktmsg {
font-size: 16px;
font-weight: normal;
margin: 0px;
height: 18px;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
width: 930px;
padding: 0px;
text-align: left;
height: 20px;
position: relative;
font-weight: normal;
font-size: 15px;
background-color: red;
}
.ktmsg a{
text-align: center;
padding: 13px 4px;
white-space: nowrap;
float: left;
text-decoration: none;
background:red;
color: #FFF;
min-width: 150px;
transition: all 0.4s;
}
.ktmsg ul{
list-style: none outside none;
width: 100%;
position: relative;
padding-left:0px;
}
.ktmsg li {
float:left;
position:relative;
list-style-type: none;
display: inline;
padding: 0px;
margin: 0px 10px;
background-image: none;
}
.ktmsg li a, .ktmenu li a:active, .ktmenu li a:visited {
margin:0px;
color: #FFF;
border: 0px;
text-decoration: none;
font-weight: bold;
}
.ktmsg ul li a:hover {
color: blue;
text-decoration: none;
}
.ktmsg a, .ktmsg a:active, .ktmsg a:visited {
color: #FFF;
margin:0px;
padding: 0px;
text-decoration: none;
}
.ktmsg ul li ul {
overflow:hidden;
padding:0;
background:red;
opacity:0;
height:auto;
width:auto;
margin-top:25px;
position:absolute;
transition-property: opacity;
box-shadow: 0 0 2px 2px;
border-radius: 6px;
transition-duration: 1s;
transition-timing-function: linear;
transition-timing-function: ease-out;
}
.ktmsg ul li:hover ul{
overflow:visible;
display:block;
background:red;
height:auto;
width:auto;
margin-top:25px;
opacity: 1;
box-shadow: 0 0 2px 2px;
border-radius: 6px;
}
.ktmsg ul li ul li{
background:red;
padding: 10px;
border-bottom: 1px solid rgb(51, 51, 51);
}
Fiddle-DEMO
This is because min-width of .ktmsg a is set to 150px. I suggest you to move it to .ktmsg li and it should solve problem you are mentioned.
As well you have to change .ktmsg ul a:hover + ul this is selector what should be instead to .ktmsg ul li:hover ul. And as well .ktmsg a shouldn't have float: left and paddings.
To ul doesn't disappear you have to add one other selector:
.ktmsg ul a + ul:hover,
.ktmsg ul a:hover + ul {
overflow:visible;
display:block;
opacity: 1;
/* rest of style */
}
I think it is working as you want it to, it's just that you have a min-width of 150px applied to your a links which is making the more link wider than you think it is.
.ktmsg ul li ul {
overflow: hidden !important;
}
Remove min-width: 150px; from style
Related
I have a nested <ul> within my nav ul. When the <ul> has only one element its padding is fine and the <li> fits nicely. However when I have more than one element in the nested <ul> it extends to the side of the page. I can see nothing to do with padding changes in my :first-child or anything in my css for the nested <ul>.
The nested ul with multiple elements
The nested ul with only one element
Here is the HTML:
<header id="header" class="alt">
<h1><strong>South Somerset Motocross Club</strong></h1>
<nav id="nav">
<ul>
<li>Home</li>
<li><a>Info</a>
<ul>
<li>Club Rules</li>
<li>Pre-Race Bike Check</li>
<li>Job Descriptions</li>
<li>Race Fees</li>
<li>Groups And Ages</li>
</ul>
</li>
<li><a>About Us</a>
<ul>
<li>Our Heritage</li>
<li>Committee</li>
</ul>
</li>
<li><a>News</a></li>
<li>Fixtures</li>
</ul>
</nav>
</header>
Here is the CSS:
#header nav {
height: inherit;
line-height: inherit;
position: absolute;
right: 1.25em;
top: 0;
vertical-align: middle;
}
#header nav ul {
list-style: none;
margin: 0;
padding-left: 0;
}
#header nav ul li {
color: #fff;
display: inline-block;
padding-left: 10px;
padding-right: 10px;
margin-left: 1em;
}
#header nav ul li ul {
display: none;
padding: 0;
margin: 0;
background-color: #eee;
border-radius: 4px;
}
#header nav ul li:hover ul {
display: block;
position: absolute;
}
#header nav ul li ul li {
border-radius: 4px;
margin: 0 0 0 0;
padding-left: 4px;
padding-top: 1px;
padding-right: 4px;
width: 100%;
color: black;
font-size: 12pt;
}
#header nav ul li ul li a {
color: #111;
padding: 0;
margin: 0;
display: block;
}
#header nav ul li ul li a:hover {
color: rgba(255, 255, 0, 1);
}
#header.alt nav ul li ul li a:hover {
color: rgba(255, 255, 0, 1);
}
#header.alt nav ul li ul li:hover {
background-color: #3477ff;
}
#header nav ul li ul li:hover {
background-color: #3477ff;
}
#header.alt nav ul li ul li a {
color: #000;
padding: 0;
display: block;
}
#header nav ul li a {
-moz-transition: color 0.1s ease-in-out;
-webkit-transition: color 0.1s ease-in-out;
-ms-transition: color 0.1s ease-in-out;
transition: color 0.1s ease-in-out;
color: #000;
display: inline-block;
text-decoration: none;
}
#header nav ul li a:hover {
color: #000;
}
Any ideas on how I can keep the width of the <ul> to the max length of one of the items?
Add display block in
#header nav ul li ul li {
border-radius: 4px;
margin: 0 0 0 0;
padding-left: 4px;
padding-top: 1px;
padding-right: 4px;
width: 100%;
color: black;
font-size: 12pt;
display:block;
}
here is the fiddle
Yop!
i checked Your css and the problem was here:
#header nav ul li ul li {
border-radius: 4px;
margin: 0 0 0 0;
padding-left: 4px;
padding-top: 1px;
padding-right: 4px;
width: 100%;
color: black;
font-size: 12pt;
}
Which i changed to this:
#header nav ul li ul li {
border-radius: 4px;
margin: 0 0 0 0;
padding-left: 4px;
padding-top: 1px;
padding-right: 4px;
//width: 100%;
display:table;
color: black;
font-size: 12pt;
}
So now it's getting the width of longest item :)
Hope i helped!
I have a Nav with some unordered elements displayed horizontally and then I have a submenu from one of those elements of the nav, so far I'm displaying all the elements inline but I would like to display them side by side, just two of them per line.
How it actually looks:
And how I want it to be:
Just two columns displaying elements side by side, aligned to left side (of 50% width each side).
But I can't get it done, here's what I got so far
HTML
<nav id="menu">
<ul>
<li class="menu1">HOME</li>
<li class="left">NEWS</li>
<li class="left">VIDEOS</li>
<li class="left">STYLE</li>
<li class="left">BEAUTY</li>
<li class="left">MOMS</li>
<li class="left">ENTERTAINMENT</li>
<li class="left">PETS</li>
<li class="left">NEWS
<ul>
<li>Content1</li>
<li>Content2</li>
<li>Content3</li>
<li>Content4</li>
<li>Content5</li>
<li>Content6</li>
<li>Content7</li>
<li>Content8</li>
</ul>
</li>
</nav>
CSS
#menu {
position: absolute;
left:80px;
top:50%;
transform: translate(0%,-50%);
-webkit-transform: translate(0%,-50%);
}
#menu ul {
list-style:none;
position:relative;
float:left;
margin:0;
padding:0;
top:50%;
}
#menu ul li {
display: inline;
position: relative;
}
#menu ul li a {
color: #fff;
text-decoration: none;
font-family: 'Cabin', sans-serif;
background-color: ;
position: relative;
padding-top: 12px;
padding-bottom: 10px;
padding-right: 10px;
padding-left: 10px;
transition: background-color 0.2s ease-in-out;
}
#menu ul li a.news {
color:#ec008c;
transition: color 0.2s ease-in-out;
}
#menu ul li a:hover.news {
color: #fff;
}
#menu ul li a:hover {
background-color: #ec008c;
text-decoration: none;
border-bottom: 2px solid #bf1b33;
color: #fff;
}
#menu ul ul
{
display:none;
position:absolute;
top:100%;
right: 0%;
margin-left:0px;
text-align: center;
width: 350px;
line-height: 60px;
margin-top:12px;
background-color: #243641;
}
#menu ul ul.longer {
width: 150px;
}
#menu ul ul li
{
float:none;
width:100%;
background-color: ;
}
#menu ul ul a
{
line-height: 0px;
padding:0px 5px;
width: 100%;
background-color: ;
}
#menu ul li:hover > ul
{
display:block;
}
You can do something like this :
#menu ul ul li
{
float: left;
width: 50%;
}
See working demo here
You can use display: flex on the last ul and set a flex-basis width on the children (li). See my example below.
#menu ul li:hover > ul {
display: flex;
flex-flow: row wrap;
}
#menu ul ul li {
flex-basis: 50%;
}
This is all the extra code that's needed. I also fixed your code. because the <ul> didn't have closed tag (</ul>).
#menu {
position: absolute;
left: 80px;
top: 50%;
transform: translate(0%, -50%);
-webkit-transform: translate(0%, -50%);
}
#menu ul {
list-style: none;
position: relative;
float: left;
margin: 0;
padding: 0;
top: 50%;
}
#menu ul li {
display: inline;
position: relative;
}
#menu ul li a {
color: #fff;
text-decoration: none;
font-family: 'Cabin', sans-serif;
background-color: ;
position: relative;
padding-top: 12px;
padding-bottom: 10px;
padding-right: 10px;
padding-left: 10px;
transition: background-color 0.2s ease-in-out;
}
#menu ul li a.news {
color: #ec008c;
transition: color 0.2s ease-in-out;
}
#menu ul li a:hover.news {
color: #fff;
}
#menu ul li a:hover {
background-color: #ec008c;
text-decoration: none;
border-bottom: 2px solid #bf1b33;
color: #fff;
}
#menu ul ul {
display: none;
position: absolute;
top: 100%;
right: 0%;
margin-left: 0px;
text-align: center;
width: 350px;
line-height: 60px;
margin-top: 12px;
background-color: #243641;
}
#menu ul ul.longer {
width: 150px;
}
#menu ul ul li {
float: none;
width: 100%;
background-color: ;
}
#menu ul ul a {
line-height: 0px;
padding: 0px 5px;
width: 100%;
background-color: ;
}
#menu ul li:hover > ul {
display: flex;
flex-flow: row wrap;
}
#menu ul ul li {
flex-basis: 50%;
}
<nav id="menu">
<ul>
<li class="menu1">HOME</li>
<li class="left">NEWS</li>
<li class="left">VIDEOS</li>
<li class="left">STYLE</li>
<li class="left">BEAUTY</li>
<li class="left">MOMS</li>
<li class="left">ENTERTAINMENT</li>
<li class="left">PETS</li>
<li class="left">NEWS
<ul>
<li>Content1</li>
<li>Content2</li>
<li>Content3</li>
<li>Content4</li>
<li>Content5</li>
<li>Content6</li>
<li>Content7</li>
<li>Content8</li>
</ul>
</li>
</ul>
</nav>
You should use display: inline-block; width width: 50% on #menu ul ul li elements:
#menu ul ul {
display:none;
position:absolute;
top:100%;
right: 0%;
margin-left:0px;
text-align: center;
width: 350px;
line-height: 60px;
margin-top:12px;
background-color: #243641;
font-size: 0; /* white spaces fix */
}
#menu ul ul li {
font-size: 1rem; /* white spaces fix */
float: none;
width: 50%;
display: inline-block;
background-color: ;
}
#menu ul ul a {
display: block;
padding: 0px 5px;
width: 100%;
background-color: ;
}
JSfiddle here.
This might be useful for your needs.
I don't know if you are using any framework or not, but this should work for you :)
http://alijafarian.com/bootstrap-multi-column-dropdown-menu/
I want to build a menu that is CSS only. No jQuery.
I've gotten this far but can't make the menu slide in from the top. Here's a fiddle (oddly enough, it doesn't look like my menu... but all the styles are there)
Some code: The HTML:
<div class="menu">
<ul>
<li class="blue"> <a style="text-decoration: none" href="/who-we-are">Who We Are</a>
</li>
<li class="red"> <a style="text-decoration: none" href="/services">Services</a>
<ul>
<li> Post 1
</li>
<li> Post 2
</li>
<li> Post 3
</li>
</ul>
</li>
<li class="orange"><a style="text-decoration: none" href="/packages">Packages</a>
<ul>
<li> Post 1
</li>
<li> Post 2
</li>
<li> Post 3
</li>
</ul>
</li>
<li class="green"><a style="text-decoration: none" href="/contact-us">Contact</a>
</li>
</ul>
</div>
And my CSS:
.menu {
float: left;
margin-top: 0px;
}
.blue, div.item.blue div {
color: #009dc4;
}
.red, div.item.red div {
color: #fe4f00;
}
.orange, div.item.orange div {
color: #ff5958;
}
.green, div.item.green div {
color: #50c402;
}
.menu ul li a {
display: block;
height: 45px;
padding-top: 18px;
}
.menu ul li a:visited {
color: inherit;
}
.menu ul {
list-style: none;
margin: 0;
}
.menu ul li {
display: inline-block;
position: relative;
cursor: pointer;
width: 145px;
font-family: Georgia;
height: 45px;
font-size: 20px;
line-height: 22px;
font-weight: bold;
padding-left: 5px;
margin-top: 0px;
margin-right: 46px;
border-bottom: 5px solid;
z-index: 5000;
}
.menu ul li:hover {
color: #ffffff !important;
}
.menu ul li.blue:hover {
background-color: #009dc4;
border-bottom: 5px solid #009dc4;
}
.menu ul li.red:hover {
background-color: #fe4f00;
border-bottom: 5px solid #fe4f00;
}
.menu ul li.orange:hover {
background-color: #ff5958;
border-bottom: 5px solid #ff5958;
}
.menu ul li.green:hover {
background-color: #50c402;
border-bottom: 5px solid #50c402;
}
.menu ul li ul {
display: none;
opacity: 0;
visibility: hidden;
position: absolute;
top: 45px;
}
.menu ul li ul li {
display: block;
font-size: 12px;
border-bottom: none;
width: 145px;
color: #ffffff;
padding-left: 0px;
height: 34px;
line-height: normal;
position: relative;
left: -5px;
}
.menu ul li ul li a {
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
height: auto;
padding: 10px 5px;
font-size: 12px;
background-color: #4fc7c1;
-webkit-transition: all 0.1s;
-moz-transition: all 0.1s;
-ms-transition: all 0.1s;
-o-transition: all 0.1s;
transition: all 0.1s;
}
.menu ul li ul li a:hover {
background: #a3edf5;
}
.menu ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
.menu > ul > li:last-of-type {
margin-right: 0px;
}
If someone can just help with getting the slide down to work, I'd appreciate it.
Unfortunately there is no way to animate height:0 to height:auto with CSS (as of CSS3). However there is a workaround using max-height documented here: http://css3.bradshawenterprises.com/animating_height/
With that logic I have created a simple example from your JS fiddle. All it does is set the css style max-height:0 on the drop-down <ul> element, some transitions for the max-height css attribute and then a large max-height value on menu hover.
Unfortunately the max-height must be hard-coded (cannot be auto) so we are limited here; but if you are confident that your menus will never exceed say 500px then you would simply put 500px.
Here's the fiddle:
http://jsfiddle.net/6ame5wcu/4/
All you need to do is to set max-height:0; and overflow:hidden; then add a transition on it like this:
.menu ul li ul {
max-height:0em;
overflow:hidden;
position: absolute;
top: 45px;
transition:max-height .9s ease
}
on :hover set a max-height ie max-height:600px;
.menu ul li:hover ul {
max-height:600px;
}
DEMO
Full code:
<div class="menu">
<ul>
<li class="blue"> Who We Are
</li>
<li class="red"> Services
<ul>
<li> Post 1
</li>
<li> Post 2
</li>
<li> Post 3
</li>
</ul>
</li>
<li class="orange">Packages
<ul>
<li> Post 1
</li>
<li> Post 2
</li>
<li> Post 3
</li>
</ul>
</li>
<li class="green">Contact
</li>
</ul>
</div>
css
a{text-decoration: none}
.menu {
float: left;
margin-top: 0px;
}
.blue, div.item.blue div {
color: #009dc4;
}
.red, div.item.red div {
color: #fe4f00;
}
.orange, div.item.orange div {
color: #ff5958;
}
.green, div.item.green div {
color: #50c402;
}
.menu ul li a {
display: block;
height: 45px;
padding-top: 18px;
}
.menu ul li a:visited {
color: inherit;
}
.menu ul {
list-style: none;
margin: 0;
}
.menu ul li {
display: inline-block;
position: relative;
cursor: pointer;
width: 145px;
font-family: Georgia;
height: 45px;
font-size: 20px;
line-height: 22px;
font-weight: bold;
padding-left: 5px;
margin-top: 0px;
margin-right: 46px;
border-bottom: 5px solid;
z-index: 5000;
}
.menu ul li:hover {
color: #ffffff !important;
}
.menu ul li.blue:hover {
background-color: #009dc4;
border-bottom: 5px solid #009dc4;
}
.menu ul li.red:hover {
background-color: #fe4f00;
border-bottom: 5px solid #fe4f00;
}
.menu ul li.orange:hover {
background-color: #ff5958;
border-bottom: 5px solid #ff5958;
}
.menu ul li.green:hover {
background-color: #50c402;
border-bottom: 5px solid #50c402;
}
.menu ul li ul {
max-height:0em;
overflow:hidden;
position: absolute;
top: 45px;
transition:max-height .9s ease
}
.menu ul li:hover ul {
max-height:600px;
}
.menu ul li ul li {
display: block;
font-size: 12px;
border-bottom: none;
width: 145px;
color: #ffffff;
padding-left: 0px;
height: 34px;
line-height: normal;
position: relative;
left: -5px;
}
.menu ul li ul li a {
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
height: auto;
padding: 10px 5px;
font-size: 12px;
background-color: #4fc7c1;
-webkit-transition: all 0.1s;
-moz-transition: all 0.1s;
-ms-transition: all 0.1s;
-o-transition: all 0.1s;
transition: all 0.1s;
}
.menu ul li ul li a:hover {
background: #a3edf5;
}
.menu > ul > li:last-of-type {
margin-right: 0px;
}
I have a dropdown menu that is generated from WordPress so I do not want to change the HTML of it. i can change the CSS as needed though and I pretty much have ot working as I need it with the exception of an alignment issue with my dropdown menu.
Google Chrome
FireFox
Internet Explorer
From the images above you can see that IE and FIreFox display it the same but Chrome is always different from the 2. My Goal is to get this box to align perfectly with the right of the menu button and then get it to look that way in all 3 of these browsers.
I have extracted the HTML and CSS into a JSFiddle page for testing and playing around with here...
Code View: http://jsfiddle.net/jasondavis/hAb4k/
Full View for viewing the menu: http://jsfiddle.net/jasondavis/hAb4k/embedded/result/
My HTML
<nav id="head-nav-menu" class="nav-main" role="navigation" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement">
<ul id="nav" class="nav nav-pills">
<li class="active menu-home">
Home
</li>
<li class="menu-about">
About
</li>
<li class="menu-projects">
Projects
</li>
<li class="menu-blog">
Blog
</li>
<li class="dropdown menu-services">
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="/services/">Services <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="menu-consulting">Consulting</li>
<li class="menu-magento-development">
Magento Development
</li>
<li class="menu-wordpress-development">
WordPress Development
</li>
<li class="menu-sugarcrm-development">
SugarCRM Development
</li>
<li class="menu-web-development">
Web Development
</li>
<li class="menu-seo">
SEO
</li>
</ul>
</li>
<li class="menu-contact">
Contact
</li>
</ul>
</nav>
CSS
body{
background: #40C8F4 !important;
}
nav ul, nav ol {
list-style: none;
list-style-image: none;
}
#head-nav-menu{
float: right;
margin-top: 29px;
}
#head-nav-menu li {
float: left;
position: relative;
padding: 0 2px 0 2px;
}
.nav a {
font-family: 'arial';
font-size: 18px;
padding: 8px 18px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
white-space: nowrap;
color: #fff;
opacity: 0.9;
letter-spacing: 1px;
text-decoration: none;
}
.menu-contact a {
border: 2px solid #FFF;
padding: 8px 18px;
transition: 0.05s linear;
-moz-transition: 0.05s linear;
-webkit-transition: 0.05s linear;
}
.nav .menu-contact a:hover {
background-color: #FFF;
color: #797979;
}
#nav ul a {
font-weight: 100;
}
.nav a:hover,
.nav > .active a {
opacity: 1;
background-color: #3DBCE6;
}
.nav > .active li a {
background-color: inherit;
}
.tinynav {
display: none;
width: 100%;
margin-top: .5em;
margin-bottom: .6em;
}
.nav li.button a {
background-color: rgba(255, 255, 255, 0.1);
border: 2px solid #FFF;
border-radius: 4px;
margin-top: 5px;
padding: 8px 18px;
font-family: 'ProximaNova-bold', Helvetica, Arial, sans-serif;
font-weight: normal;
margin-left: 16px;
color: #FFF !important;
}
.nav li.button a:hover {
background-color: #FFF;
opacity: 1;
color: #444 !important;
}
/* ==========================================================================
Main Container General Layout Styles
========================================================================== */
.header-container header {
padding-top: 13px;
padding-bottom: 18px;
}
/* Navigation > Dropdown Menus */
#nav .dropdown-menu,
#nav .children {
display: none;
padding: 0;
position: absolute;
z-index: 99999;
border: 1px solid #86DEFC;
width: 333%;
/*right: 8px;*/
left: -239%;
top: 23px;
background-color: #F2F9FC;
}
#nav .dropdown-menu li {
width: 195px;
float: left;
display: inline-block;
/*width: 50%;*/
}
.nav .dropdown-menu a {
color: #030303;
}
#nav li:hover > ul,
#nav ul li:hover > ul,
.dropdown:hover > ul {
display: inline-block;
-webkit-animation: fadeDown 250ms ease;
-moz-animation: fadeDown 250ms ease;
-ms-animation: fadeDown 250ms ease;
-o-animation: fadeDown 250ms ease;
animation: fadeDown 250ms ease;
background-color: #fff;
color: #000;
border: 1px solid #E9E9E9;
border-top: none;
}
#nav .dropdown-menu ul,
#nav .children ul {
left: 99.75%;
top: -1px;
}
#nav ul li,
#nav ul ul li {
margin-left: 0;
}
#nav ul li:first-child,
#nav ul ul li:first-child {
border-top: none;
}
#nav ul a,
#nav ul ul a {
font-size: 14px;
line-height: 21px;
text-align: left;
padding: 10px;
display: inline-block;
min-width: 125px;
border-bottom: none;
margin-bottom: 0 !important;
width: 100%;
letter-spacing: 1px;
font-family: arial;
}
#nav ul a:hover,
#nav ul ul a:hover {
color: #098EB9 !important;
background: none;
}
#nav ul ul.dropdown-menu a:hover {
width: 100%;
color: #63E924 !important;
border-bottom: none;
}
#nav li.current_page_item ul a,
#nav li.current-menu-parent ul a,
#nav li.current_page_parent ul a {
color: #000;
font-weight: 700;
}
#nav ul li.current-menu-item a {
color: #e9242e !important;
}
#head-nav-menu .nav li:hover a.dropdown-toggle {
background: #fff;
color: #000;
opacity: 1;
border-right: 1px solid #E7E7E7;
}
.nav .dropdown a:hover {
opacity: 1;
background-color: #fff;
}
#nav .dropdown-menu li:hover {
background: #F8F8F8;
}
Give display: block to .nav a
then remove left: 239% of #nav .dropdown-menu and give right: 2px and top: 38px to it.
Here is the edited demo for it.
http://jsfiddle.net/hAb4k/3/
I make pure css menu with 2 levels .But now I need to make it 3 levels .I tried many time but not working for me . here is the jsfiddle .
I don't need any jquery code, just pure css .
CSS
#menu {
width: 980px;
height: 30px;
float: left;
border-top: dashed 1px #d8d8d8;
margin-left: 7px;
}
#menu ul.Mainmenu {
width: 996px;
margin: 0px;
padding: 0px;
margin-top: 10px;
}
#menu ul.Mainmenu li {
float: left;
list-style: none;
margin-right: 20px;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
color: #860300;
margin-right: 16px\9; /* IE8 and below */
position: relative;
height: 30px;
}
#menu ul.Mainmenu li a {
text-decoration: none;
font-family: Verdana, Geneva, sans-serif;
font-size: 13px;
color: #860300;
}
ul li ul {
padding: 0;
position: absolute;
top: 25px;
left: -10px;
width: 190px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.5s;
-moz-transition: opacity 0.5s;
-ms-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
-transition: opacity 0.5s;
z-index: 100000;
width: 200px;
background-color: #FFF;
padding: 7px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
ul li ul li {
color: #fff;
float: left;
width: 190px;
height: auto !important;
min-height: 20px;
margin-bottom: 9px;
line-height: 18px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
padding-top: 3px;
padding-left: 3px;
}
ul li ul li a {
color: #fff;
font-size: 12px !important;
}
ul li ul li:hover {
background: #820B06;
color: #FFF;
}
ul li ul li:hover a {
color: #FFF !important;
}
ul li:hover ul {
opacity: 1;
visibility: visible;
}
Thanks guys
See this example
css
#nav ul{
margin:0;
padding:0;
list-style:none;
}
#nav ul li{
margin:0;
padding:10px 20px;
position:relative;
height:20px;
line-height:20px;
background-color:#EEE;
}
#nav > ul > li {
float: left;
height:30px;
line-height:30px;
background-color:#CCC;
}
#nav li > ul{
visibility:hidden;
width:200px;
position: absolute;
top:0px;
left:200px;
border-left:1px solid #000;
}
#nav > ul > li > ul{
top:50px;
left:0;
}
#nav li:hover{
background-color:#999;
}
#nav li:hover > ul{
visibility:visible;
}
html
<div id="nav">
<ul>
<li>Level 1
<ul>
<li>Level 2-1</li>
<li>Level 2-2
<ul>
<li>Level 3-1</li>
<li>Level 3-2</li>
</ul>
</li>
</ul>
</li>
</ul>
Here i added sample CSS Menu with level 3. Please check and let me know. Hope it should helpful for you. Thanks.
.third-level-menu
{
position: absolute;
top: 0;
right: -150px;
width: 150px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.third-level-menu > li
{
height: 30px;
background: #999999;
}
.third-level-menu > li:hover { background: #CCCCCC; }
.second-level-menu
{
position: absolute;
top: 30px;
left: 0;
width: 150px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.second-level-menu > li
{
position: relative;
height: 30px;
background: #999999;
}
.second-level-menu > li:hover { background: #CCCCCC; }
.top-level-menu
{
list-style: none;
padding: 0;
margin: 0;
}
.top-level-menu > li
{
position: relative;
float: left;
height: 30px;
width: 150px;
background: #999999;
}
.top-level-menu > li:hover { background: #CCCCCC; }
.top-level-menu li:hover > ul
{
/* On hover, display the next level's menu */
display: inline;
}
/* Menu Link Styles */
.top-level-menu a /* Apply to all links inside the multi-level menu */
{
font: bold 14px Arial, Helvetica, sans-serif;
color: #FFFFFF;
text-decoration: none;
padding: 0 0 0 10px;
/* Make the link cover the entire list item-container */
display: block;
line-height: 30px;
}
.top-level-menu a:hover { color: #000000; }
<ul class="top-level-menu">
<li>About</li>
<li>Services</li>
<li>
Offices
<ul class="second-level-menu">
<li>Chicago</li>
<li>Los Angeles</li>
<li>
New York
<ul class="third-level-menu">
<li>Information</li>
<li>Book a Meeting</li>
<li>Testimonials</li>
<li>Jobs</li>
</ul>
</li>
<li>Seattle</li>
</ul>
</li>
<li>Contact</li>
</ul>
I have also put together a live demo here http://jsfiddle.net/4ScFz/400/ that's available to play with.