I am trying to get the parent li (menu item) to widen (horizontally) on hover to fit all of the ul li items (submenu items) without hardcoding a width so no text is floating or cut off.
I am making a menu using an unordered list. Each submenu item is within the li tags of the main menu. My menu is horizontal and shows the submenu items when you hover over the elements.
I have tried various ways to try and get the li element to expand to the size of the submenu items or stay the same size if they are smaller. My clunky but working way was to hardcode a width of 22% on hover. I was wondering if there was a way to do this and to nicely fit the text rather than have a lot of white space. Hardcoding the width also causes menu items without submenu items to expand (I could work around this but I don't want to hardcode it to begin with).
I need to do this entirely in vanilla html, css, and javascript. It would also be nice if the solution were cross-browser compatible.
I apologize if my code is non-conventional, I have been trying to teach myself css. Thank you in advance.
The following is an example of my HTML/CSS (minus the links):
body {
margin: 0;
}
*{
font-family: Gotham Book, Arial, Helvetica, Sans-serif;
}
#navbar {
background-color: #f1f1f1;
text-align: center;
}
#navbaritems {
margin: 0 auto;
}
#navbaritems ul {
padding: 0;
width: 100%;
list-style-type: none;
margin: 0;
display: inline;
position: relative;
font-size: 0;
}
#navbaritems ul li {
display: inline-block;
white-space: nowrap;
text-align: center;
color: #000;
position: relative;
}
#navbaritems ul li ul {
width: 100%;
padding: 0;
position: absolute;
top: 6vh;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
text-align: center;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
#navbaritems ul li ul li {
background-color: #f1f1f1;
display: block;
}
#navbaritems ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
#navbaritems ul li:hover {
-o-transition: 1s;
-ms-transition: 1s;
-moz-transition: 1s;
-webkit-transition: 1s;
transition: 1s;
width: 22%;
}
#navbaritems ul li ul li:hover {
-o-transition: 1s;
-ms-transition: 1s;
-moz-transition: 1s;
-webkit-transition: 1s;
transition: 1s;
width: 100%;
}
#navbaritems ul li a {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
font-size: 1vw;
display: block;
height: 4vh;
line-height: 4vh;
color: #808080;
text-decoration: none;
padding: 1vh;
margin: 0;
}
#navbaritems ul li a:hover:not(.active) {
background-color: #82c986;
color: #ffffff;
-o-transition: .3s;
-ms-transition: .3s;
-moz-transition: .3s;
-webkit-transition: .3s;
transition: .3s;
cursor: pointer;
display: block;
}
#navbaritems ul li a.active {
color: #ffffff;
background-color: #4CAF50;
}
<div id="navbar" class="addBottomShadow">
<div id="navbaritems">
<ul>
<li><a class="active">Home</a>
</li>
<li><a>Patient Eligibility</a>
<ul>
<li><a>Eligibility Tracker</a>
</li>
</ul>
</li>
<li><a>Claim Status</a>
</li>
<li><a>Remittance Advice</a>
</li>
<li><a>E-Claims Batch Status</a>
</li>
<li><a>Fees</a>
<ul>
<li><a>Update Fees</a>
</li>
<li><a>Reimbursement Report</a>
</li>
<li><a>Reimbursement Detail Report</a>
</li>
<li><a>Submit Fees</a>
</li>
</ul>
</li>
<li><a>Inquiries</a>
<ul>
<li><a>Customer Service Inquiries</a>
</li>
<li><a>COB Change Requests</a>
</li>
<li><a>Submit Inquiry</a>
</li>
</ul>
</li>
<li><a>Settings</a>
<ul>
<li><a>Procedure Sets</a>
</li>
<li><a>Eligibility Tracker</a>
</li>
<li><a>Claim Settings</a>
</li>
<li><a>Remittance Advice</a>
</li>
<li></li>
</ul>
</li>
<li><a>Other</a>
<ul>
<li><a>Provider Seminars</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
The big problem here is that the parent li element only knows to be as big as the main a until hover because the child ul has display:none; which means the width is effectively 0. Instead of using display:none; you could try forcing the height to be 0 and leaving the initial width. Then on hover, do height:inherit; to display the menu items. Remember to use overflow:hidden; so things don't go outside of the element when the height isn't big enough for them.
EDIT: Needed to do some more work, but I think this is what you are looking for.
Related
I created a pen that has a nice slide effect between elements in menu.
<ul>
<li id="home"><a>home</a></li>
<li id="libra"><a>libra</a></li>
<li id="libra2"><a>libra22</a></li>
<div class="line"></div>
</ul>
ul {
list-style: none;
padding: 0;
background: black;
color: white;
}
ul li {
display: inline-block;
}
ul li:first-child {
margin-left: 0;
}
ul li a {
width: 100px;
text-align: center;
display: block;
}
.line {
width: 100px;
height: 5px;
background: red;
transition: all 500ms ease-in-out;
}
#libra:hover ~ div {
margin-left: 100px;
}
https://codepen.io/anon/pen/vPxmZV
However, that only works forwards, not backwards and it's not dynamic, you pre-set the margin amount of the underline to slide with transition.
Is there a way to make it work forwards and backwards, and be dynamic without javascript?
and if not, what would be the best clean way with javascript?
Explained
For example, currently it's hardcoded, so if you hover #libra your underline will go right by 100px, so currently I need to add that case for every element in the array, for example the next element will be margin left 200px, etc.
I have created it using Translate property:
Without hardcoding you'll have to use javascript with alot of calculations
nav {
height: 50px;
font-size: 20px;
padding: 10px;
width: 100%;
z-index: 1;
background:black;
}
nav ul,
nav li,
nav a {
display: inline;
text-decoration: none;
list-style: none;
outline: none;
color: ghostwhite;
}
nav ul:hover,
nav li:hover,
nav a:hover {
color: white;
text-decoration: none;
}
nav ul:nth-child(2):hover ~ .line,
nav li:nth-child(2):hover ~ .line,
nav a:nth-child(2):hover ~ .line {
-webkit-transform: translate(110px);
transform: translate(110px);
-webkit-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
}
nav ul:nth-child(3):hover ~ .line,
nav li:nth-child(3):hover ~ .line,
nav a:nth-child(3):hover ~ .line {
-webkit-transform: translate(240px);
transform: translate(240px);
-webkit-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
}
nav ul:nth-child(4):hover ~ .line,
nav li:nth-child(4):hover ~ .line,
nav a:nth-child(4):hover ~ .line {
-webkit-transform: translate(340px);
transform: translate(340px);
-webkit-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
}
nav ul:nth-child(5):hover ~ .line,
nav li:nth-child(5):hover ~ .line,
nav a:nth-child(5):hover ~ .line {
-webkit-transform: translate(450px);
transform: translate(450px);
-webkit-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
}
nav ul:nth-child(2):hover ~ .line,
nav li:nth-child(2):hover ~ .line,
nav a:nth-child(2):hover ~ .line {
-webkit-transform: translate(110px);
transform: translate(110px);
-webkit-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
}
nav li {
margin: 0 20px;
display: inline-block;
}
nav ul {
position: absolute;
right: 20px;
}
nav .line {
margin-top: 5px;
width: 120px;
height: 3px;
background-color: white;
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
<nav>
<ul>
<li>Home</li>
<li>Products</li>
<li>Quota</li>
<li>About</li>
<li>Contact</li>
<div class="line"></div>
</ul>
</div>
</nav>
I've been searching around and I haven't found any answers for my particular case. I want to have a search form aligned to the right of the page but for it always to be aligned with the div it is located in. I have resorted to absolute positioning but I would much rather find a cleaner way to do this with out me having to constantly change the value of the style "Top: ;"
Here is a link to the code: https://jsfiddle.net/nz4u376r/
And here is a snippet:
CSS:
/*----- Toggle Button -----*/
.toggle-nav {
display: none;
}
.toggle-nav-button {
color: #FFF;
padding: 12px;
transition: color 0.3s ease;
max-width: 45px;
cursor: default;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.toggle-nav-button:hover {
color: #0d2c87;
background-color: #909f8e;
-webkit-transition: background .4s ease;
-moz-transition: background .4s ease;
-ms-transition: background .4s ease;
-o-transition: background .4s ease;
transition: background .4s ease;
}
#media screen and (max-width: 970px) {
.toggle-nav {
float: left;
display: inline-block;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
color: #FFF;
font-size: 18px;
text-decoration: none;
}
.active {
display: none;
}
}
/*-- Toggle Button End --*/
/*---- Main Nav CSS ----*/
/*Colors: #0d2c87 #7E8F7C | http://www.hexcolortool.com/7E8F7C#909f8e | */
.menu {
background-color: #7E8F7C;
height: 48px;
width: 100%;
}
nav ul {
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
nav li {
float: left;
margin: 0;
padding: 0;
position: relative;
max-width: 190px;
width: 100%;
}
nav a {
background: #7E8F7C;
color: #FFF;
display: block;
font: 16px/48px sans-serif;
text-align: center;
text-decoration: none;
}
.header-li:hover {
background: #909f8e;
color: #0d2c87;
-webkit-transition: background .4s ease;
-moz-transition: background .4s ease;
-ms-transition: background .4s ease;
-o-transition: background .4s ease;
transition: background .4s ease;
}
nav li ul li:hover a {
background: #909f8e;
color: #0d2c87;
-webkit-transition: background .4s ease;
-moz-transition: background .4s ease;
-ms-transition: background .4s ease;
-o-transition: background .4s ease;
transition: background .4s ease;
}
nav li ul {
float: left;
left: 0;
opacity: 0;
position: absolute;
top: 35px;
visibility: hidden;
z-index: 11;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-ms-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
nav li:hover ul {
opacity: 1;
top: 48px;
visibility: visible;
}
nav li ul li {
float: none;
}
nav li ul a:hover {
background: #909f8e;
}
/*-- Main Nav CSS End --*/
/*--- Nav SearchBar ---*/
.search-form {
display: inline-block;
position: relative;
margin-top: 8px;
margin-right: 8px;
float: right;
}
.search-form input {
width: 200px;
height: 30px;
padding: 0px 8px;
font-size: 13px;
float: left;
}
.search-form input:hover,
input:focus {
border-top: 1px ridge #3292E0;
border-bottom: 1px ridge #3292E0;
border-left: 1px ridge #3292E0;
}
.search-form button {
height: 30px;
/*#66a992 #0d2c87 */
color: #FFF;
border: none;
padding: 5px;
background-color: #0d2c87;
}
.search-form button:hover {
opacity: 0.8;
-webkit-transition: opacity .4s ease;
-moz-transition: opacity .4s ease;
-ms-transition: opacity .4s ease;
-o-transition: opacity .4s ease;
transition: opacity .4s ease;
}
.search-from-drop {
display: none;
}
#media screen and (max-width: 1250px) {
.search-form input {
width: 120px;
}
.active-search {
display: none;
}
.search-from-drop {
display: inline-block;
}
}
#media screen and (max-width: 1125px) {
.search-form {
display: none;
}
}
#media screen and (max-width: 840px) {
.search-form {
display: inline-block;
right: 5%;
position: absolute;
top: 72px;
}
.search-form {
float: left;
}
}
<nav class="menu">
<ul class="active">
<li>
<a class="header-li" href="">Home</a>
</li>
<li>
<a class="header-li" href="">Our Company</a>
<ul>
<li>Blank
</li>
<li>Blank
</li>
<li>Blank
</li>
</ul>
</li>
<li>
<a class="header-li" href="">Services</a>
<ul>
<li>Blank
</li>
<li>Blank
</li>
<li>Blank
</li>
</ul>
</li>
<li>
<a class="header-li" href="">Products</a>
<ul>
<li>Blank
</li>
<li>Blank
</li>
<li>Blank
</li>
</ul>
</li>
<li>
<a class="header-li" href="">Resources</a>
<ul>
<li>Blank
</li>
<li>Blank
</li>
<li>Blank
</li>
</ul>
</li>
</ul>
<ul class="toggle-nav">
<li>
<div class="toggle-nav-button" href="#">☰</div>
<ul>
<li>Home
</li>
<li>Our Company
</li>
<li>Services
</li>
<li>Products
</li>
<li>Resources
</li>
</ul>
</li>
</ul>
<form class="search-form">
<input type="text">
<button><span class="active-search">Search</span><span class="search-from-drop">🔍</span>
</button>
</form>
</nav>
I found my mistake and I figured I would answer my question.
The error was that I was making an absolute value of top and right when all I needed was an absolute value for right, so after changing...
This:
.search-form {
display: inline-block;
right: 5%;
position: absolute;
top: 72px;
}
Into this:
.search-form {
display: inline-block;
right: 5%;
position: absolute;
}
Everything works fine. No longer have to worry about changing specific values every time a height changes on the header or nav.
Thanks for your help!
I want to mark a clicked item in my list. This works fine (test1 - test5) - but if I add some more item's (e.g. test6) to that list via JQuery's append, only test1-test5 that were there while loading the page, "use" the highlighting css functionality. How could I fix this?
$("#tracklist li").on("click", function() {
$('.highlight').removeClass('highlight');
$(this).addClass('highlight');
});
$("#test").click(function() {
$("#tracklist").append("<li class='list_style_tracklist_lastitem ui-sortable-handle'><a href='#'>test6</a></li>");
}
ol {
list-style-type: none;
margin: 0;
padding: 0;
height: 120px;
width: 450px;
overflow-y: auto;
overflow-x: hidden;
background: #e6e6e6;
}
li {
font: 200 15px/1.5 Helvetica, Verdana, sans-serif;
border-bottom: 1px solid #ccc;
border: 1px solid #d3d3d3;
background: #e6e6e6;
font-weight: normal;
padding: 0em 0em 0em 1.5em;
text-indent: 0.1em;
list-style: none;
background-repeat: no-repeat;
}
.list_style_tracklist_music {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAQAAABKIxwrAAAAvElEQVR4AWMgDygz2DLYoEOgmDYDMzblEQxzGGZhgRMZHBiYsCufiQmBGibBNRBWjtBAUDnzLEaEBnMCyllnNR3QWMwwA8QGykUSUM4xe90lixVw5RHDVfkMxplcxCoXmJO7c9OVQ3euPjNdTlA595xVF3/9+Q8ELz7qLCGkfIb64ifvQYo/fus7yjILKILfdJZZ8Vvmnek/6rGGFayYsFdnAOF0sDMIK0dAKiufhQuClRPOq4g8C5QnBwAAiy7V4BTvo9kAAAAASUVORK5CYII=');
}
ol li.list_style_tracklist_music a,
ol li.list_style_tracklist_video a,
ol li.list_style_tracklist_lastitem a {
text-decoration: none;
color: #000;
/*-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;*/
-webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
-moz-transition: font-size 0.3s ease, background-color 0.3s ease;
-o-transition: font-size 0.3s ease, background-color 0.3s ease;
-ms-transition: font-size 0.3s ease, background-color 0.3s ease;
transition: font-size 0.3s ease, background-color 0.3s ease;
display: block;
width: 450px;
}
ol li.list_style_tracklist_music a:hover,
ol li.list_style_tracklist_video a:hover,
ol li.list_style_tracklist_lastitem a:hover {
/*font-size: 18px;*/
background: #ffbb99;
}
.highlight {
background-color: #ffbb99;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ol id="tracklist">
<li class="list_style_tracklist_music">
test1
</li>
<li class="list_style_tracklist_music">
test2
</li>
<li class="list_style_tracklist_music">
test3
</li>
<li class="list_style_tracklist_music">
test4
</li>
<li class="list_style_tracklist_music">
test5
</li>
</ol>
<input type="button" name="test" value="test" id="test" />
First you bind your function to existing <li>s.
Then you create a new <li> (test6), which is obviously not binded!
The more simple here is to delegate binding to the parent <ol>, so any of its children is involved as soon as it exists:
$("#tracklist ol").on("click", function(e) {
$('.highlight').removeClass('highlight');
$(e.target).addClass('highlight');
});
My responsove menu works well in mobile menu, but I have one problem that when I resize browser back to large screen size. the mobile menu still appear. Does anybody know why?
Here is my code :
CSS
.main-navigation ul {
z-index: 999;
float: right;
font-size: 1rem;
}
.main-navigation ul>li {
float: left;
position: relative;
}
.main-navigation ul>li a {
color: #555;
height: 42px;
line-height: 42px;
margin-left: .5em;
padding-right: 1em;
position: relative;
}
.main-navigation ul>li ul {
opacity: 0;
filter: alpha(opacity=0);
visibility: hidden;
-webkit-transition: opacity .1s ease-in;
-moz-transition: opacity .1s ease-in;
-o-transition: opacity .1s ease-in;
transition: opacity .1s ease-in;
position: absolute;
background: white;
left: -1em;
}
.main-navigation ul>li ul li {
float: none;
white-space: nowrap;
border-bottom: 1px solid rgba(0,0,0,0.2);
background: #f9f9f9;
}
.main-navigation ul>li ul li a {
padding: 0 1em;
margin-right: 0;
font-weight: normal;
}
.main-navigation ul>li ul li a::before {
content: '';
}
.main-navigation ul>li ul li ul {
border-top: 1px solid #fff;
position: absolute;
left: 100%;
top: -1px;
height: 21px;
line-height: 21px;
opacity: 0;
filter: alpha(opacity=0);
visibility: hidden;
-webkit-transition: opacity .1s ease-in;
-moz-transition: opacity .1s ease-in;
-o-transition: opacity .1s ease-in;
transition: opacity .1s ease-in;
}
.main-navigation ul>li:hover>ul {
opacity: 10;
filter: alpha(opacity=100);
visibility: visible;
}
.main-navigation ul>li:hover>a {
color: #e74c3c;
}
#media only screen and (max-width:479px) {
.main-navigation ul {
z-index: 999;
float: right;
font-size: 1rem;
}
.main-navigation ul>li {
float: left;
position: relative;
}
.main-navigation ul>li a {
color: #555;
height: 42px;
line-height: 42px;
margin-left: .5em;
padding-right: 1em;
position: relative;
}
.main-navigation ul>li ul {
opacity: 0;
filter: alpha(opacity=0);
visibility: hidden;
-webkit-transition: opacity .1s ease-in;
-moz-transition: opacity .1s ease-in;
-o-transition: opacity .1s ease-in;
transition: opacity .1s ease-in;
position: absolute;
background: white;
left: -1em;
}
.main-navigation ul>li ul li {
float: none;
white-space: nowrap;
border-bottom: 1px solid rgba(0,0,0,0.2);
background: #f9f9f9;
}
.main-navigation ul>li ul li a {
padding: 0 1em;
margin-right: 0;
font-weight: normal;
}
.main-navigation ul>li ul li a::before {
content: '';
}
.main-navigation ul>li ul li ul {
border-top: 1px solid #fff;
position: absolute;
left: 100%;
top: -1px;
height: 21px;
line-height: 21px;
opacity: 0;
filter: alpha(opacity=0);
visibility: hidden;
-webkit-transition: opacity .1s ease-in;
-moz-transition: opacity .1s ease-in;
-o-transition: opacity .1s ease-in;
transition: opacity .1s ease-in;
}
.main-navigation ul>li:hover ul {
opacity: 10;
filter: alpha(opacity=100);
visibility: visible;
}
.main-navigation ul>li:hover>a {
color: #e74c3c;
}
}
HTML :
<a href="#" id="rwd-nav-btn" >☰</a>
<div class="rwd-nav"></div> <!-- end rwd-nav -->
<nav class="main-navigation">
<ul class="fr">
<li>home</li>
<li>articles</li>
<li>portfolio</li>
<li>
dropdown
<ul>
<li>home</li>
<li>articles</li>
<li>portfolio</li>
<li>
dropdown
<ul>
<li>home</li>
<li>articles</li>
<li>portfolio</li>
<li>
dropdown
</li>
<li>about</li>
<li>contact</li>
</ul>
</li>
<li>about</li>
<li>contact</li>
</ul>
</li>
<li>about</li>
<li>contact</li>
</ul>
</nav>
jQuery :
jQuery(document).ready(function(){
jQuery('.main-navigation ul:first-child').clone().appendTo('.rwd-nav');
jQuery('#rwd-nav-btn').click(function(event){
event.preventDefault();
jQuery('.rwd-nav').slideToggle();
});
There is no code which hides the menu. Instead of slideToggle, I suggest to add/remove a class like "closed" and "open" and set mymenu.closed to display:none and inside the media query set mymenu.open to display:block
I'm hoping one of you nice people can help. I have a pure CSS drop down menu, as part of the design it needs to be slightly away from the main menu item, the problem is that because of this design there's a gap - and so as soon as the mouse moves away from the sub menu it disappears. I want it to hold their for a while longer so the user has more chance to click. Can anyone help?
I've set up a JS fiddle here.
<div id="menu" class="top">
<ul>
<li>home</li>
<li>about</li>
<li>portfolio
<ul>
<li>Overview</li>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</li>
</div>
#menu{
position:absolute;
left:0;
zoom:1;
background-color:#010;
}
#menu ul{
position:relative;
border-top: dotted 1px #fff;
border-bottom: dotted 1px #fff;
padding:2px 0 2px 0;
float:right;
zoom:1;
list-style:none;
}
#menu ul li{
margin:0;
font:16px/16px 'Open Sans', sans-serif;
padding:0 5px 0 0;
display:inline;
position:relative;
zoom:1;
}
#menu ul li a{
color:#fff;
text-decoration:none;
}
#menu ul li a:hover{
text-decoration:underline;
}
#menu ul li.selected a{
color:#8dc63e;
}
#menu ul li ul {
border: 2px solid #fff;
border-radius:10px;
background-color: #8dc63e;
padding: 0;
position: absolute;
top: 45px;
right: -30px;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.8s;
-moz-transition: opacity 0.8s;
-ms-transition: opacity 0.8s;
-o-transition: opacity 0.8s;
-transition: opacity 0.8s;
}
#menu ul li ul li {
display: block;
border-bottom: 1px solid #fff;
color: #fff;
padding:10px;
}
#menu ul li ul li:hover { text-decoration:underline; }
#menu ul li.selected ul li a { color: #fff;}
#menu ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
z-index:250;
}
#menu ul li ul:after{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: #fff transparent;
display: block;
width: 0;
z-index: 1;
top: -15px;
left: 64px;
}
It seemed a bit of a mess, lots of duplication with display:none being set as well as opacity:0 and visibility:hidden. There are a few z-indexes in there as well. Not nice to maintain.
Really what you need is for the UL menu to be opacity 0, with a transition to fade it in over time, but not too quick, and then the hover state to be opacity 1.
So from fiddling with your fiddle...
#menu ul li ul {
border: 2px solid #fff;
border-radius:10px;
background-color: #8dc63e;
padding: 0;
position: absolute;
top: 45px;
right: -30px;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
opacity: 0;
-webkit-transiton: opacity 8s;
-moz-transition: opacity 8s;
-ms-transition: opacity 8s;
-o-transition: opacity 8s;
-transition: opacity 8s;
}
and
#menu ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
z-index:250;
}
This one works, http://jsfiddle.net/ydF3B/1/ although I set the transition to be 8s from 0.8s... you might want to dig through and remove all the unneccessary styles and see what is actually going on.
Have fun :)
EDIT Complete justification for my earlier comment about wanting to dig through it all, the fiddle above doesn't solve your issue as pointed out in the comments :) Instead a better approach is to make the area you are hovering over larger, so that when you pass over from the menu item onto the menu, there is no actual gap, even though there is a visual gap. I did this by increasing the padding: http://jsfiddle.net/ydF3B/2/