I need to add an effect for my mobile where the menu is display smoothly when the navigation button is hovered.
what I need is that the menu should display with ease not sudden appearance and if its possible not to adjust the content of my site like overlapping the content above if plausible
CSS
.menuimg:hover + #navcontainer {
display: block;
height: auto;
}
#navcontainer:hover {
display: block;
height: auto;
}
.children {
display: none;
}
#navcontainer {
position: relative;
z-index: 1;
display: block;
float: none;
width: 100%;
height: 20px;
list-style: none;
text-align: center;
}
.menu {
display: inline-block;
float: left;
width: auto;
text-align: left;
}
#navcontainer ul {
overflow: hidden;
margin: 0;
padding: 0;
list-style-type: none;
text-align: left;
}
#navcontainer ul li {
display: block;
float: left;
margin-left: 0;
padding: 0 6px;
}
#navcontainer ul li a {
display: block;
width: 100%;
padding: .2em 1em;
text-decoration: none;
color: #694a31;
border-top: 1px solid transparent;
border-right: 1px solid transparent;
border-left: 1px solid transparent;
background-color: transparent;
}
#navcontainer ul li ul li {
display: block;
float: none;
width: auto;
margin-left: 0;
border-top: 1px solid #e3d7be;
background: #edebd7;
}
#navcontainer ul li ul li a {
opacity: 1 !important;
color: #724e32;
border-top: 0 !important;
border-right: 0 !important;
border-left: 0 !important;
-webkit-border-radius: 0 0 0 0 !important;
-moz-border-radius: 0 0 0 0 !important;
border-radius: 0 0 0 0 !important;
background: transparent !important;
background-color: transparent !important;
}
#navcontainer li:hover ul,
#navcontainer li:active ul {
display: block;
}
#navcontainer ul li:hover a {
opacity: .5;
color: #724e32;
border-top: 1px solid #694b0a;
border-right: 1px solid #694b0a;
border-left: 1px solid #694b0a;
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
background-color: #edebd7;
}
#navcontainer ul li a:hover {
color: #fff;
background-color: #d3c096;
}
#navcontainer li:hover ul.children,
#navcontainer li:active ul.children {
position: absolute;
z-index: 300;
top: auto;
overflow: visible;
width: auto;
height: auto;
padding: 5px;
white-space: nowrap;
color: #724e32;
border-right: 1px solid #694b0a;
border-bottom: 1px solid #694b0a;
border-left: 1px solid #694b0a;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
background: #edebd7;
}
#navcontainer ul li ul li:hover {
margin-left: 0;
color: #fff;
background-color: #d3c096;
}
#navcontainer ul li ul li a:hover {
margin-left: 0;
color: #fff;
background-color: #d3c096;
}
#navcontainer ul li ul li:hover a {
color: #fff;
background-color: transparent;
}
I want is to appear my menu at easy like from fading transition when i hovered on the navigation button
http://prntscr.com/4yverw
i have tested my css on fiddle its working fine there but when i transfer it to my site the menu transition doesn't work change and addeds some
.menu { display:none > opacity:0
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;}
.menuimg:hover + .menu
{
display: block; height: auto; opacity: 1;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}.menu:hover
{
opacity: 1;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out; display: block; height: auto;
}
http://jsfiddle.net/xeqcx1zL/1/ - workign trasition
i changed the code
original code
.menuimg:hover + #navcontainer
#navcontainer:hover
to this
.menuimg:hover + .menu
.menu:hover
I have now my transition menu the only problem is that since i remove the display:none; the menu is always their but you cant see it since its on opacity:0; i want to hide it so it doesnt eats a space on my site, but using the display none and block css the transition wont work.
the menu is displayed under the button but you cant see it. it should be activated if you hover your mouse on the button.
http://prntscr.com/4z4jah
Related
Below is the HTML and CSS I'm using. Unfortunately the questions already asked do not give the answer required. Basically it decreases the width of all siblings and increases the one that is hovered over. I'm using ease-in-out but the OUT part of the transition just instantaneously jumps back to its original state.
html {
background: #000066;
}
body {
height: 100%;
background: #cfcfd0;
margin: 4% 4% 4% 4%;
}
#title {
background: ;
text-align: center;
margin: 2% 2%;
padding: 2% 2%;
}
#nav {
width: 90%;
overflow: auto;
margin: 0 auto;
padding: 0px 0px 0px 0px
}
ul {
margin: 4% auto;
padding: 0;
width: 100%;
list-style-type: none;
overflow: auto;
}
li {
box-sizing: border-box;
text-align: center;
display: inline-block;
float: left;
width: 33.33%;
padding: 2% 0;
margin: 0%;
background: blue;
border-top: 1px solid black;
border-bottom: 1px solid black;
border-right: 1px solid black;
}
li:first-child {
border-left: 1px solid black;
}
li:last-child {
border-right: 1px solid black;
}
a {
color: black;
text-decoration: none;
}
ul:hover > li:hover {
width: 37.33%;
color: white;
background: darkblue;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
ul:hover > li {
width: 31.33%;
-webkit-transition: width 300ms ease-in-out;
-moz-transition: width 300ms ease-in-out;
-ms-transition: width 300ms ease-in-out;
-o-transition: width 300ms ease-in-out;
transition: width 300ms ease-in-out;
}
<div id="title">
<h1>Projects Home</h1>
</div>
<div id="nav">
<ul>
<li>Project 1
</li>
<li>Project 2
</li>
<li>Project 3
</li>
</ul>
</div>
I can't figure out why this is.
Any CSS property gets applied to an element only when the selector is matched. When transition property is specified under the :hover selector, they naturally get applied only when the hover is on. When we hover out, they just snap back because the transition setting is no longer applicable for the element.
In your case, since transition is specified only within ul:hover > li:hover and ul:hover > li it gets applied only when the mouse is over an li or when the mouse is atleast over the ul (that is when we are moving from one li to another while still being inside the ul boundaries).
To get the transition to work properly even during mouse out, it should be specified within the li selector like in the below snippet.
html {
background: #000066;
}
body {
height: 100%;
background: #cfcfd0;
margin: 4% 4% 4% 4%;
}
#title {
background: ;
text-align: center;
margin: 2% 2%;
padding: 2% 2%;
}
#nav {
width: 90%;
overflow: auto;
margin: 0 auto;
padding: 0px 0px 0px 0px
}
ul {
margin: 4% auto;
padding: 0;
width: 100%;
list-style-type: none;
overflow: auto;
}
li {
box-sizing: border-box;
text-align: center;
display: inline-block;
float: left;
width: 33.33%;
padding: 2% 0;
margin: 0%;
background: blue;
border-top: 1px solid black;
border-bottom: 1px solid black;
border-right: 1px solid black;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
li:first-child {
border-left: 1px solid black;
}
li:last-child {
border-right: 1px solid black;
}
a {
color: black;
text-decoration: none;
}
ul:hover > li:hover {
width: 37.33%;
color: white;
background: darkblue;
}
ul:hover > li {
width: 31.33%;
}
<div id="title">
<h1>Projects Home</h1>
</div>
<div id="nav">
<ul>
<li>Project 1
</li>
<li>Project 2
</li>
<li>Project 3
</li>
</ul>
</div>
Remove the > on ul:hover > li to ul:hover li:
html {
background: #000066;
}
body {
height: 100%;
background: #cfcfd0;
margin: 4% 4% 4% 4%;
}
#title {
background: ;
text-align: center;
margin: 2% 2%;
padding: 2% 2%;
}
#nav {
width: 90%;
overflow: auto;
margin: 0 auto;
padding: 0px 0px 0px 0px
}
ul {
margin: 4% auto;
padding:0;
width: 100%;
list-style-type: none;
overflow: auto;
}
li {
box-sizing: border-box;
text-align: center;
display: inline-block;
float:left;
width: 33.33%;
padding: 2% 0;
margin: 0%;
background: blue;
border-top: 1px solid black;
border-bottom: 1px solid black;
border-right: 1px solid black;
}
li:first-child {
border-left: 1px solid black;
}
li:last-child {
border-right: 1px solid black;
}
a {
color: black;
text-decoration: none;
}
ul:hover > li:hover{
width: 37.33%;
color: white;
background: darkblue;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
ul:hover li {
width: 31.33%;
-webkit-transition: width 300ms ease-in-out;
-moz-transition: width 300ms ease-in-out;
-ms-transition: width 300ms ease-in-out;
-o-transition: width 300ms ease-in-out;
transition: width 300ms ease-in-out;
}
<div id= "title">
<h1>Projects Home</h1>
</div>
<div id= "nav">
<ul>
<li>Project 1</li>
<li>Project 2</li>
<li>Project 3</li>
</ul>
</div>
I have been trying to make a dropdown menu with some simple css and i cant understand why the dropdown wont work i have tried everything i could think of below i have posted the css and the html.
The html code is this
<ul><li>Home</li>
<li>Crockery</li>
<li>
Cutlery
<ul>
<li>Kings</li>
<li>Bead</li>
<li>Tableware</li>
</ul>
</li>
<li>Glassware</li>
<li>Contact</li>
</ul>
The css is this
body {
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 20px 50px 150px;
font-size: 13px;
text-align: center;
background: #E3CAA1;
}
ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
ul li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
ul li:hover {
background: #555;
color: #fff;
}
ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
ul li ul li {
background: #555;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover { background: #666; }
ul li:hover ul {
display: block;
}
Remove this lines:
opacity: 0;
visibility: hidden;
From ul li ul{} selector.
https://jsfiddle.net/uc1pq9no/3/
You have to update ✄ your code with visibility, z-index and opacity as this sample:
ul li:hover ul {
display: block;
visibility: visible;
z-index: 12;
opacity: 1;
}
This code make the submenu visible on hover the first level menù item, with the pseudo-class-selectors
→ Test here a working demo.
using this CSS code, how can i make it so there is an active/current class?
#cssmenu *{
z-index: 999
}
#cssmenu ul { margin: 0; padding: 0; text-align: center; }
#cssmenu li { margin: 0; padding: 0;}
#cssmenu a { margin: 0; padding: 0;}
#cssmenu ul {list-style: none;}
#cssmenu a {text-decoration: none;}
#cssmenu {height: 50px; background-color: #f36f25; box-shadow: 0px 2px 3px rgba(0,0,0,.4);}
#cssmenu > ul > li {
display: inline-block;
margin-left: 15px;
position: relative;
}
#cssmenu > ul > li > a {
color: #ffffff;
font-size: 15px;
line-height: 50px;
padding: 16px 20px;
-webkit-transition: color .15s;
-moz-transition: color .15s;
-o-transition: color .15s;
transition: color .15s;
}
#cssmenu > ul > li > a:hover {color: #ffffff; background-color:#666666; }
#cssmenu > ul > li > ul {
opacity: 0;
visibility: hidden;
padding: 16px 0 20px 0;
background-color: #eeeeee;
text-align: left;
position: absolute;
top: 30px;
left: 50%;
margin-left: -90px;
width: 180px;
-webkit-transition: all .3s .1s;
-moz-transition: all .3s .1s;
-o-transition: all .3s .1s;
transition: all .3s .1s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}
#cssmenu > ul > li:hover > ul {
opacity: 1;
top: 50px;
visibility: visible;
}
#cssmenu > ul > li > ul:before{
content: '';
display: block;
border-color: transparent transparent rgb(250,250,250) transparent;
border-style: solid;
border-width: 10px;
position: absolute;
top: -20px;
left: 50%;
margin-left: -10px;
}
#cssmenu > ul ul > li { position: relative;}
#cssmenu ul ul a{
color: #000000;
font-size: 13px;
background-color: #eeeeee;
padding: 5px 8px 7px 16px;
display: block;
-webkit-transition: background-color .1s;
-moz-transition: background-color .1s;
-o-transition: background-color .1s;
transition: background-color .1s;
}
#cssmenu ul ul a:hover {background-color: #f36f25;}
#cssmenu ul ul ul {
visibility: hidden;
opacity: 0;
position: absolute;
top: -16px;
left: 206px;
padding: 16px 0 20px 0;
background-color: #eeeeee;
text-align: left;
width: 160px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}
#cssmenu ul ul > li:hover > ul { opacity: 1; left: 196px; visibility: visible;}
#cssmenu ul ul a:hover{
background-color: #f36f25;
color: rgb(240,240,240);
}
fiddle is here of the full menu: http://jsfiddle.net/eza2Z/
Also, on the submenu there is a small arrow pointing upwards - how can i change the colour of this to the same colour as the background on the sub menu (#eeeeee)
and 1 more thing :)
When you hover over a link and the sub menu displays, the top and bottom of the sub menu appear about 1-2 seconds after the rest of it for some reason
Help would be much appreciated :)
thanks
#cssmenu > ul > li.active {
/* Add styles for currently "active" list items here */
}
If you want the down arrow to have the same background as it's parent you can use the inherit rule on the background property, as so:
#myArrow {
background-color: inherit; /* Will inherit from parent */
}
i have a CSS menu with this CSS Code:
#cssmenu ul { margin: 0; padding: 0; text-align: center; }
#cssmenu li { margin: 0; padding: 0;}
#cssmenu a { margin: 0; padding: 0;}
#cssmenu ul {list-style: none;}
#cssmenu a {text-decoration: none;}
#cssmenu {height: 50px; background-color: #f36f25; box-shadow: 0px 2px 3px rgba(0,0,0,.4);}
#cssmenu > ul > li {
display: inline-block;
margin-left: 15px;
position: relative;
}
#cssmenu > ul > li > a {
color: #ffffff;
font-size: 15px;
line-height: 50px;
padding: 16px 20px;
-webkit-transition: color .15s;
-moz-transition: color .15s;
-o-transition: color .15s;
transition: color .15s;
}
#cssmenu > ul > li > a:hover {color: #ffffff; background-color:#666666; }
#cssmenu > ul > li > ul {
opacity: 0;
visibility: hidden;
padding: 16px 0 20px 0;
background-color: #eeeeee;
text-align: left;
position: absolute;
top: 30px;
left: 50%;
margin-left: -90px;
width: 180px;
-webkit-transition: all .3s .1s;
-moz-transition: all .3s .1s;
-o-transition: all .3s .1s;
transition: all .3s .1s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}
#cssmenu > ul > li:hover > ul {
opacity: 1;
top: 50px;
visibility: visible;
}
#cssmenu > ul > li > ul:before{
content: '';
display: block;
border-color: transparent transparent rgb(250,250,250) transparent;
border-style: solid;
border-width: 10px;
position: absolute;
top: -20px;
left: 50%;
margin-left: -10px;
}
#cssmenu > ul ul > li { position: relative;}
#cssmenu ul ul a{
color: #000000;
font-size: 13px;
background-color: #eeeeee;
padding: 5px 8px 7px 16px;
display: block;
-webkit-transition: background-color .1s;
-moz-transition: background-color .1s;
-o-transition: background-color .1s;
transition: background-color .1s;
}
#cssmenu ul ul a:hover {background-color: #f36f25;}
#cssmenu ul ul ul {
visibility: hidden;
opacity: 0;
position: absolute;
top: -16px;
left: 206px;
padding: 16px 0 20px 0;
background-color: #eeeeee;
text-align: left;
width: 160px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}
#cssmenu ul ul > li:hover > ul { opacity: 1; left: 196px; visibility: visible;}
#cssmenu ul ul a:hover{
background-color: #f36f25;
color: rgb(240,240,240);
}
There is a slider underneath the nav code but the sub menus on the navigation are displaying behind the images on the slider, any ideas what i can do to get them to display in front of the slider images?
JS Fiddle of the menu is here: http://jsfiddle.net/JLRte/
Add a z-index to the menu: #cssmenu *{ z-index: 999 } Fiddle: http://jsfiddle.net/JLRte/1/
i have this CSS Code for my nav menu:
#cssmenu ul { margin: 0; padding: 0;}
#cssmenu li { margin: 0; padding: 0;}
#cssmenu a { margin: 0; padding: 0;}
#cssmenu ul {list-style: none;}
#cssmenu a {text-decoration: none;}
#cssmenu {height: 50px; background-color: #f36f25; box-shadow: 0px 2px 3px rgba(0,0,0,.4);}
#cssmenu > ul > li {
float: left;
margin-left: 15px;
position: relative;
}
#cssmenu > ul > li > a {
color: #ffffff;
font-size: 15px;
line-height: 50px;
padding: 5px 20px;
-webkit-transition: color .15s;
-moz-transition: color .15s;
-o-transition: color .15s;
transition: color .15s;
}
#cssmenu > ul > li > a:hover {color: #666666; }
#cssmenu > ul > li > ul {
opacity: 0;
visibility: hidden;
padding: 16px 0 20px 0;
background-color: #eeeeee;
text-align: left;
position: absolute;
top: 30px;
left: 50%;
margin-left: -90px;
width: 180px;
-webkit-transition: all .3s .1s;
-moz-transition: all .3s .1s;
-o-transition: all .3s .1s;
transition: all .3s .1s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}
#cssmenu > ul > li:hover > ul {
opacity: 1;
top: 65px;
visibility: visible;
}
#cssmenu > ul > li > ul:before{
content: '';
display: block;
border-color: transparent transparent rgb(250,250,250) transparent;
border-style: solid;
border-width: 10px;
position: absolute;
top: -20px;
left: 50%;
margin-left: -10px;
}
#cssmenu > ul ul > li { position: relative;}
#cssmenu ul ul a{
color: #000000;
font-size: 13px;
background-color: #eeeeee;
padding: 5px 8px 7px 16px;
display: block;
-webkit-transition: background-color .1s;
-moz-transition: background-color .1s;
-o-transition: background-color .1s;
transition: background-color .1s;
}
#cssmenu ul ul a:hover {background-color: #f36f25;}
#cssmenu ul ul ul {
visibility: hidden;
opacity: 0;
position: absolute;
top: -16px;
left: 206px;
padding: 16px 0 20px 0;
background-color: #eeeeee;
text-align: left;
width: 160px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}
#cssmenu ul ul > li:hover > ul { opacity: 1; left: 196px; visibility: visible;}
#cssmenu ul ul a:hover{
background-color: #f36f25;
color: rgb(240,240,240);
}
i need to make the sub menu box move up a little more so you can see the small arrow on top on the orange part of the menu (main bit) and also make it full page width as it is but make the links/text centred on the page
here is a fiddle: http://jsfiddle.net/dQnjt/
any ideas?
Use display: inline-block instead of float and add text-align: center to the parent ul:
#cssmenu ul { margin: 0; padding: 0; text-align: center; }
#cssmenu > ul > li {
display: inline-block;
margin-left: 15px;
position: relative;
}
And just reduce the top value on hover:
#cssmenu > ul > li:hover > ul {
opacity: 1;
top: 55px;
visibility: visible;
}
http://jsfiddle.net/dQnjt/1/
You can just add ul:display:table; margin:0 auto;, this will center the floated elements in it.
I have added a Position: relative to the the following:
#cssmenu > ul > li > ul {
opacity: 0;
visibility: hidden;
padding: 16px 0 20px 0;
background-color: #eeeeee;
text-align: left;
position: relative;
left: 50%;
margin-left: -90px;
width: 180px;
-webkit-transition: all .3s .1s;
-moz-transition: all .3s .1s;
-o-transition: all .3s .1s;
transition: all .3s .1s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}
#cssmenu > ul > li:hover > ul {
opacity: 1;
top: 0px;
visibility: visible;
position:relative;
}
http://jsfiddle.net/dQnjt/5/