My transition does not apply to the submenu <a> tag. The color change is doing well, but the transition does not trigger on hover. If I apply the same rules, on another element with a main class, it works well. The problem is with nested elements or CSS subclasses/selectors. Any ideas?
I have the following HTML, JS structure & CSS:
$( document ).ready(function() {
$('.menu_container').mouseover(function(e) {
$('ul', this).show();
});
$('.menu_container').mouseout(function(e) {
$('ul', this).hide();
});
});
.menu { background:#f8f8f8; color:#707070; text-align:center; }
.menu li { margin-bottom:0 }
.menu li { display:inline-block; font-size:16px; border-top:2px solid #f8f8f8; }
.menu li:hover { background-color:#022a3b; background-color:#022a3b; border-top:2px solid #06a7ea; text-decoration:none;}
.menu li a { padding:13px 13px 16px 13px; display:block; text-decoration:none; color:#313131; }
.menu li a:hover { color:#06a7ea; }
.menu li span { padding:13px 13px 16px 13px; display:block; text-decoration:none; color:#313131; cursor:pointer; }
.menu li span:hover { color:#06a7ea; }
.menu li.menu_container { position:relative; display:inline-table; }
.menu li.menu_container ul { display:none; position:absolute; top:51px; left:0; background:#022a3b; padding-left:0; padding:5px; }
.menu li.menu_container ul li { display:table; max-width:200px; min-width:130px; text-align:left; border-top:none; margin-left:10px; }
.menu li.menu_container ul li a { color:#FFFFFF; font-size:14px; padding:10px; transition:color 2s; }
.menu li.menu_container ul li a:hover { color:#FF0000; }
<nav class="container-fluid menu">
<ul>
<li>Home</li>
<li>Home</li>
<li class="menu_container">
<span>Home
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</span>
</li>
</ul>
</nav>
Live example: http://thyalie.ro/casedevanzareoradea/
Use jQuery's mouseenter and mouseleave events rather than mouseover and mouseout.
mouseover and mouseout fire every time you hover from one element to another within .menu_container. Therefore, when you hover from one element to a submenu item, the submenu ul's inline style is being rapidly changed from display: none to display: block. This causes the transition on the links to not take effect.
This jQuery page has a good example of the differences between the events.
$( document ).ready(function() {
$('.menu_container').mouseenter(function(e) {
$('ul', this).show();
});
$('.menu_container').mouseleave(function(e) {
$('ul', this).hide();
});
});
.menu { background:#f8f8f8; color:#707070; text-align:center; }
.menu li { margin-bottom:0 }
.menu li { display:inline-block; font-size:16px; border-top:2px solid #f8f8f8; }
.menu li:hover { background-color:#022a3b; background-color:#022a3b; border-top:2px solid #06a7ea; text-decoration:none;}
.menu li a { padding:13px 13px 16px 13px; display:block; text-decoration:none; color:#313131; }
.menu li a:hover { color:#06a7ea; }
.menu li span { padding:13px 13px 16px 13px; display:block; text-decoration:none; color:#313131; cursor:pointer; }
.menu li span:hover { color:#06a7ea; }
.menu li.menu_container { position:relative; display:inline-table; }
.menu li.menu_container ul { display:none; position:absolute; top:47px; left:0; background:#022a3b; padding-left:0; padding:5px; }
.menu li.menu_container ul li { display:table; max-width:200px; min-width:130px; text-align:left; border-top:none; margin-left:10px; }
.menu li.menu_container ul li a { color:#FFFFFF; font-size:14px; padding:10px; transition:color 2s; }
.menu li.menu_container ul li a:hover { color:#FF0000; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="container-fluid menu">
<ul>
<li>Home</li>
<li>Home</li>
<li class="menu_container">
<span>Home
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</span>
</li>
</ul>
</nav>
Your Javascript seems to be interfering with displaying your menu correctly. You do not need any javascript to make this work, however, you can do it on pure CSS, by adding this line:
.menu li.menu_container:hover ul { display: block; }
Because a hover hovers over the parent as well, this works just fine an requires no JS whatsoever.
.menu { background:#f8f8f8; color:#707070; text-align:center; }
.menu li { margin-bottom:0 }
.menu li { display:inline-block; font-size:16px; border-top:2px solid #f8f8f8; }
.menu li:hover { background-color:#022a3b; background-color:#022a3b; border-top:2px solid #06a7ea; text-decoration:none;}
.menu li a { padding:13px 13px 16px 13px; display:block; text-decoration:none; color:#313131; }
.menu li a:hover { color:#06a7ea; }
.menu li span { padding:13px 13px 16px 13px; display:block; text-decoration:none; color:#313131; cursor:pointer; }
.menu li span:hover { color:#06a7ea; }
.menu li.menu_container { position:relative; display:inline-table; }
.menu li.menu_container ul { display:none; position:absolute; top:47px; left:0; background:#022a3b; padding-left:0; padding:5px; }
.menu li.menu_container:hover ul { display: block; }
.menu li.menu_container ul li { display:table; max-width:200px; min-width:130px; text-align:left; border-top:none; margin-left:10px; }
.menu li.menu_container ul li a { color:#FFFFFF; font-size:14px; padding:10px; transition:color 2s; }
.menu li.menu_container ul li a:hover { color:#FF0000; }
<nav class="container-fluid menu">
<ul>
<li>Home</li>
<li>Home</li>
<li class="menu_container">
<span>Home
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</span>
</li>
</ul>
</nav>
Add
transition: color 2s;
to
.menu li.menu_container ul li a:hover
Related
I'm currently working on my website and I have an existing navigation bar. The problem is that I have too much information to share on one page. That's why I'd like to implement a dropdown menu in the existing navigation bar. I've tried many many things but it all seems to screw up my lay-out of the css or it completely deletes the navigation bar.
I got an exisiting code for a dropdown menu but I simply am not able to blend it with the existing css code. I got this code from the internet, it is not my property.
My HTML:
<div id="menu">
<ul>
<li class="current_page_item">Home</li>
<li>Onze service</li>
<li>Ons team</li>
<li>Prijzen</li>
<li>Contact</li>
</ul>
</div>
My CSS:
#menu
{
position: absolute;
right: 0;
top: 1em;
}
#menu ul
{
display: inline-block;
}
#menu li
{
display: block;
float: left;
text-align: center;
line-height: 60px;
}
#menu li a, #menu li span
{
display: inline-block;
margin-left: 1px;
padding: 0em 1.5em;
letter-spacing: 0.10em;
text-decoration: none;
font-size: 1.0em;
text-transform: uppercase;
outline: 0;
color: #212121;
background: #ECECEC;
}
#menu li:hover a, #menu li.active a, #menu li.active span
{
}
#menu .current_page_item a
{
background: #E24E2A;
color: #FFF;
}
#menu .icon
{
}
Drop down 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
}
Thanks in advance!
Your navigation wrapper is menu whereas in the CSS from online it is primary_nav_wrap, so swap instances of these to menu.
In the html itself nested unordered list elements is used for the drop-downs, so add these under the list element where you need a drop-down.
Html:
<div id="menu">
<ul>
<li class="current_page_item">Home<ul>
<li>sub1</li>
<li>sub2</li>
<li>sub3</li>
</ul>
<li>Onze service</li>
<li>Ons team</li>
<li>Prijzen</li>
<li>Contact</li>
</ul>
</div>
CSS:
#menu ul {
display:inline-block;
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
#menu li {
display:block;
float:left;
text-align:center;
line-height:60px
}
#menu li a,#menu li span {
display:inline-block;
margin-left:1px;
padding:0 1.5em;
letter-spacing:.1em;
text-decoration:none;
font-size:1em;
text-transform:uppercase;
outline:0;
color:#212121;
background:#ECECEC
}
#menu .current_page_item a {
background:#E24E2A;
color:#FFF
}
#menu {
margin-top:15px
}
#menu 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
}
#menu ul li {
position:relative;
float:left;
margin:0;
padding:0
}
#menu ul li.current-menu-item {
background:#ddd
}
#menu ul li:hover {
background:#f6f6f6
}
#menu ul ul {
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
#menu ul ul li {
float:none;
width:200px
}
#menu ul ul a {
line-height:120%;
padding:10px 15px
}
#menu ul ul ul {
top:0;
left:100%
}
#menu ul li:hover > ul {
display:block
}
Here is a jsfiddle of the code merged:
https://jsfiddle.net/o51pp5s6/
My output:
Home | cat | Info
|sub1
| sub1sub1
| sub1sub2
|sub2
| sub2sub1
<div class="menu" >
<span>
<ul id="nav">
<li><a href="#" >HOME</a></li>
<li>cat
<div class="subs">
<div class="wrp2">
<ul>
<li><a href="#" >sub1</a></li>
<ul>
<li><a href="#" >sub1sub1</a></li>
<li> <a href="#" >sub1sub2</a></li>
</ul>
</ul>
<ul>
<li><a href="#" >sub2</a></li>
<ul><li><a href="#" >sub2sub1</a></li>
</li>
<li>Info</li>
</ul>
</span>
</div>
My CSS:
/* main menu styles */
.menu {
background: none repeat scroll 0px 0px rgba(255, 255, 255, 0.65);
text-align:center;
width:100%;
height:30px;
text-transform: uppercase;
padding-top: 8px;
padding-bottom: 5px;
font-size:19px;
}
.menu > span {
display:inline-block;
margin:0 auto;
}
#nav {
display:inline;
text-align:left;
position:relative;
list-style-type:none;
}
#nav > li {
float:left;
padding:0;
position:relative;
}
#nav > li > a {
color:black;
display:block;
padding:3px 10px;
position:relative;
text-decoration:none;
}
#nav > li > a:hover {
background-color:rgba(255, 255, 255, 0.65);
color:black;
}
#nav > li.selected > a {
z-index:2;
}
#nav li div {
position:relative;
}
#nav li ul a {
font-size: 100%;
color:black;
display:block;
margin-bottom:1px;
padding:3px 5px;
text-decoration:none;
}
#nav li ul a:hover{
background-color:rgba(255, 255, 255, 0.65);
color:black;
}
#nav li div div {
padding:12px 0;
display:none;
margin:0;
position:absolute;
top:6px;
background: none repeat scroll 0px 0px rgba(255, 255, 255, 0.65);
z-index:999;
width:auto;
}
#nav li div div.wrp2 {
width:380px;
}
#nav .sep {
left:190px;
bottom:0;
height:auto;
margin:15px 0;
position:absolute;
top:0;
width:1px;
}
#nav li div ul {
padding-left:10px;
padding-right:10px;
position:relative;
width:170px;
float:left;
list-style-type:none;
}
#nav li div ul li {
margin:0;
padding:0;
}
#nav li div ul li h3 {
color:black;
margin:0 5px 4px;
padding-bottom:3px;
padding-top:3px;
}
#nav li ul ul {
padding:0 0 8px;
padding-left:5px;
}
#nav li ul ul li {
margin:0;
padding:0;
}
#nav li ul ul li a {
font-size: 90%;
color:black;
display:block;
margin-bottom:1px;
padding:3px 5px;
text-decoration:none;
}
#nav li ul ul li a:hover{
background-color:rgba(255, 255, 255, 0.65);
color:black;
}
How can I make cat visible only with CSS and NO jquery. It should be: If I click on cat the submenu should come up. A fade-in/out effect would be great. Is it possible in general?
yes you can do that >
try to make dislay:none to the cat menu . them you must put : hover as dislay:block
ok.
it is east just make an new class to sub menu whit display:none . it means that this block doesn't open it self . after that put another class in : hover and make display that as block
If you want it on click, you can use the :target pseudoclass along with element IDs to control what is visible.
Update the relevant line in your HTML with a link to the ID:
<li id="cat">cat
Then add some simple CSS:
li .subs {
visibility:hidden;
opacity:0;
transition:visibility 0s linear 0.5s,opacity 0.5s linear;
}
li:target .subs {
visibility:visible;
opacity:1;
transition-delay:0s;
}
You will also need to remove any display:none styles that will hide your submenus since we will be using visibility and opacity instead. This allows us to have a nice fade effect.
Here it is:
http://gyazo.com/e94edf3c9b10bc33c2d9be8ed049583e
As you can see, the submenu works, and when I hover over something on the submenu, it creates a grey background. The problem is, once I get under "Sports Edition", the hover basically cancels and closes the submenu. It stops right where that blue line begins.
Here is the code:
HTML:
<div id="toprightunder">
<ul>
<li>
Content options
<ul>
<li>Default Homepage</li>
<li>News Edition li>
<li>Entertainment Edition</li>
<li>Sports Edition</li>
<li>Latino Edition</li>
</ul>
</li>
</ul>
</div>
CSS: (there is a lot because I was testing a lot)
#toprightunder {
margin-top:18px;
height:15px;
position:absolute;
width:200px;
right:0;
}
#toprightunder a {
text-decoration:none;
color:rgb(100, 100, 100);
margin-left:0;
padding-bottom:3px;
}
#toprightunder ul {
list-style:none;
margin:0 auto;
/*text-align:right;*/
position:relative;
display:inline-table;
margin-left:0;
padding-left:0;
}
#toprightunder ul li {
display:inline;
color:rgb(100, 100, 100);
font-family:"arial", times, sans-serif;
font-size:10px;
margin-top:13px;
text-decoration:none;
margin-left:0;
padding-left:0;
}
#toprightunder ul ul {
display:none;
}
#toprightunder ul li:hover > ul {
display:block;
}
#toprightunder ul ul {
position: absolute;
top: 100%;
padding-top:2px;
padding-bottom:7px;
margin-right:0;
right:0px;
background: white;
border: 1px solid #000;
overflow:hidden;
height:auto;
margin:auto;
}
#toprightunder ul ul li {
position:relative;
color:rgb(100, 100, 100);
font-size:13px;
display:block;
/*margin-bottom:10px;
padding-left:25px;
padding-right:4px;*/
white-space:nowrap;
height:auto;
margin:auto;
}
#toprightunder ul ul li a {
color:#fff;
text-align:left;
float:left;
margin-right:0;
position:relative;
}
#toprightunder a:hover {
background-color:transparent;
color:rgb(100, 100, 100);
}
#toprightunder ul li:hover > li {
background-color:transparent;
}
#toprightunder ul ul li:hover > a {
color:rgb(50, 50, 50);
background:rgb(240, 240, 240);
}
#toprightunder ul ul li > a {
color:rgb(100, 100, 100);
padding-bottom:7px;
padding-top:2px;
padding-left:25px;
width:100%;
}
#headbar a {
text-decoration:none;
color:white;
padding-bottom:2px;
padding-top:4px;
padding-left:8px;
padding-right:8px;
}
#headbar ul ul {
display:none;
}
#headbar ul li:hover > ul {
display:block;
color:green;
}
#headbar ul {
text-decoration:none;
list-style:none;
margin-top:1px;
padding:0;
position:relative;
}
#headbar ul li {
display:inline;
color: white;
padding-bottom:2px;
padding-top:3px;
font-family:"arial", times, sans-serif;
font-size:12px;
}
#headbar ul ul {
border-radius: 0px;
position: absolute;
top: 100%;
padding-top:6px;
}
#headbar ul ul li {
float:none;
position:relative;
color:rgb(100,100,100);
font-size:16px;
}
#headbar ul ul li a {
color:#fff;
}
#headbar ul ul li a:hover {
}
/*#headbar ul:after {
content: "";
clear:both;
display:block;*/
#headbar a:hover {
background-color:rgb(255,255,255);
color:rgb(100,100,100);
}
#headbar ul li:hover > a{
color:rgb(50,50,50);
background-color:transparent;
padding-top:8px;
}
#headbar ul ul li > a {
color:rgb(100,100,100);
padding-top:8px;
}
#headbar {
width: 100%;
height: 20px;
background-color: rgb(30,144,255);
text-decoration:none;
padding-top:129px;
text-align: left;
/*position:relative;*/
}
Add z-index: 2; to the #toprightunder selector and that should resolve your problem.
#toprightunder {
margin-top:18px;
height:15px;
position:absolute;
width:200px;
right:0;
z-index: 2;
}
I wish to add a transition to my current CSS dropdown menu.
I have my "transition: height ease-in-out 500ms;" code all ready to go, I just need to know where to add it.
How I have my menu setup is like so:
<ul id="nav">
<li>
About Us <img style="border:0;" src="/index_files/darrow.png" />
<ul id="accordion">
<li>Who We Are</li>
<li>Contact Us</li>
<li>Join Us For Worship</li>
<li>Meet Our Staff</li>
</ul>
</li>
</ul>
So, what I am wondering is where I would put my transition code in my .css file to affect the "accordion" section. (I can remove the id="accordion" section, that was just there from testing.
All help is appreciated, thank you.
EDIT: Here is the CSS:
#nav {
font-size:20px;
text-align:center;
position:relative;
z-index:500;
display:block;
margin-bottom:20px;
padding:0;
width:950px;
background:#33A1DE;
float:left;
border-bottom:none;
color:white;
-moz-box-shadow: 0px 5px 10px #333333;
-webkit-box-shadow: 0px 5px 10px #333333;
box-shadow: 0px 5px 10px #333333;
}
#nav a:visited, #nav a {
color:white;
}
#nav li a, #nav li {
float:left;
}
#nav > li {
line-height:2em;
width:20%;
list-style:none;
position:relative;
border-top:none;
border-right:1px solid white;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
#nav > li.right {
line-height:2em;
width:20%;
list-style:none;
position:relative;
border-right:none;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
#nav li a {
height:100%;
width:100%;
text-decoration:none;
background:#33A1DE;
}
#nav li a:hover {
background:#000000;
}
/* Submenu */
#nav li ul {
list-style:none;
width:100%;
display:none;
position:absolute;
left:0;
top:100%;
padding:0; margin:0;
}
#nav li ul:last-child {
border-bottom:1px solid white;
}
#nav li:hover > ul {
display:block;
}
#nav li ul li, #nav li ul li a {
float:none;
}
#nav li ul > li {
left:-1px;
text-align:center;
margin:auto;
position:relative;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
_display:inline; /* for IE6... God knows why */
}
#nav li ul li a {
display:block;
border:1px solid white;
border-bottom:none;
}
/* Sub-Submenu */
#nav li ul li > ul {
list-style:none;
display:none;
position:absolute;
}
#nav li ul li:hover ul {
border-left:1px solid white;
z-index:5;
left:0px;
top:0px;
left:100%;
width:200px;
}
#nav li ul li ul:last-child {
border-bottom:1px solid white;
}
#nav li ul li:hover ul.youth {
border-left:1px solid white;
z-index:5;
left:0px;
top:-100%;
left:100%;
width:200px;
box-sizing:border-box;
}
Start by deleting the display:none from to the accordion. Then specify a height to the accordion li elements as well as a transition type.
in the :hover state of the About us li, you specify the new height for the accordion li's.
DEMO
You add that directive on the same rule where the height of the menu changes (not the :hover state).
You'll have to provide us with more details if you want a more detailed answer.
I have a dropdown bar -
<div class="buttonContainer">
<ul>
<li>
<a class="menu1one" href="">Dashboard</a>
</li>
</ul>
<ul>
<li>
<div class="noLink">Tasks</div>
<ul>
<li>View</li>
<li>Edit</li>
<!--[if lte IE 6]></a><![endif]-->
</ul>
<!--[if lte IE 6]></a><![endif]-->
</li>
<li>
<div class="noLink">Dictionaries</div>
<ul>
<li>Needs</li>
<li>Activities</li>
</ul>
<!--[if lte IE 6]></a><![endif]-->
</li>
<li>
<div class="noLink">Admin</div>
<ul>
<li>User Accounts</li>
</ul>
<!--[if lte IE 6]></a><![endif]-->
</li>
</ul>
</div>
CSS -
/*dropdown menu*/
.menu { float:left; width:100%; font-family: arial; border-top:1px solid #4c597f; background-color: #1079b5; min-width:950px; }
.menu .buttonContainer { padding:0 0 0 200px; }
.menu ul { padding:0; margin:0; list-style-type:none; }
.menu ul li { margin:0; float:left; position:relative; background-color:#153d71; }
.menu ul li a, .menu ul li a:visited { float:left; display:block; text-decoration:none; color:#ddf; padding:0px 16px; line-height:25px; height:30px; }
.menu ul li a:hover { background-color:#9fc1ed; color: #153d71;}
.noLink { display:block; color:#ddf; padding:0px 16px; line-height:25px; height:30px; }
.menu ul li:hover { width:auto; }
.menu ul li ul { display: none; }
/* specific to non IE browsers */
.menu ul li:hover ul { display:block; position:absolute; top:30px; left:0; width:154px; border-bottom:1px solid #000; }
.menu ul li:hover ul.endstop { left:-92px; }
.menu ul li:hover ul li ul { display: none; }
.menu ul li:hover ul li a { display:block; background:#1079b5; color:#000; height:auto; line-height:15px; padding:4px 16px; width:120px; border:1px solid #000; border-bottom:0; }
.menu ul li:hover ul li a.drop { background:#ccd no-repeat 3px 8px; }
.menu ul li:hover ul li a:hover { background-color: #153d71; color: #FFFFFF; }
.menu ul li:hover ul li a:hover.drop { background: #ccd no-repeat 3px 8px; }
.menu ul li:hover ul li:hover ul { display:block; position:absolute; left:153px; top:-1px; }
.menu ul li:hover ul li:hover ul.left { left:-153px; }
/* IE6 */
.menu ul li a:hover ul { display:block; position:absolute; top:30px; t\op:33px; background:#153d71; left:0; border-bottom:1px solid #000; }
.menu ul li a:hover ul.endstop { left: -92px; }
.menu ul li a:hover ul li a { display:block; background:#153d71; color:#000; height:1px; line-height:15px; padding:4px 16px; width:154px; w\idth:120px; border:1px solid #000; border-bottom:0; }
.menu ul li a:hover ul li a.drop { background:#ccd url('') no-repeat 3px 8px; padding-bottom:4px; }
.menu ul li a:hover ul li a ul { visibility:hidden; position:absolute; height:0; width:0; }
.menu ul li a:hover ul li a:hover { color:#000; background: #ccd url('') no-repeat 3px 8px; }
.menu ul li a:hover ul li a:hover.drop { background: #ccd url('') no-repeat 3px 8px; }
.menu ul li a:hover ul li a:hover ul { visibility:visible; position:absolute; top:0; color:#000; left:153px; }
.menu ul li a:hover ul li a:hover ul.left { left:-153px; }
The dropdown menu is working well or showing up on hover in IE7 but not responding in Firefox.
Could anybody help me with this please?? I tried position : relative for inner li a:hover and it shows the menu but extends the whole div till its end. What is to be changed here?
Also, i don't want to use javascript/jquery for this.
-thanks
EDITED - I have found the solution to get it to work. I added 'position: absolute;' attribute to the .menu{} in the css. That made it work... Thanks.
I just tested on IE7 its working fine to me
http://jsfiddle.net/vcN5g/
I have found the solution to get it to work. I added 'position: absolute;' attribute to the .menu{} in the css. That made it work... Thanks.