I created a horizontal navigation (menu) bar for my site. When I re-size my window to a size smaller than that of the bar, the menu items get wrapped. I want the menu to remain intact (that is, it should remain horizontal) irrespective of the size of window as it usually can be seen in sites such as Google. I tried various ways posted on various forums including this one but nothing worked for me. Below I have pasted my CSS code for the menu.
CSS CODE:
#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: 70px; background-color: #6699CC; box-shadow: 0px 2px 3px rgba(0,0,0,.4); }
#cssmenu > ul > li {
float: left;
margin-left: 30px;
position: relative;
}
#cssmenu > ul > li > a {
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
line-height: 70px;
padding: 15px 20px;
-webkit-transition: color .15s;
-moz-transition: color .15s;
-o-transition: color .15s;
transition: color .15s;
}
#cssmenu > ul > li > a:hover {color: #00FF00; }
body.home li.home, body.tech li.tech {font-weight:bold; }
#cssmenu > ul > li > ul {
opacity: 0;
visibility: hidden;
padding: 16px 0 20px 0;
background-color: #FFFFFF;
text-align: left;
position: absolute;
top: 55px;
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: rgb(50,50,50);
font-family: Verdana, 'Lucida Grande';
font-size: 13px;
background-color: rgb(250,250,250);
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: rgb(240,240,240);}
#cssmenu ul ul ul {
visibility: hidden;
opacity: 0;
position: absolute;
top: -16px;
left: 206px;
padding: 16px 0 20px 0;
background-color: rgb(250,250,250);
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: rgb(205,44,36);
color: rgb(240,240,240);
}
HTML Code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="styles.css" rel="stylesheet" type="text/css">
<title>Home</title>
</head>
<body class="home" background="teenscorner1.jpg" text="#FFFFFF" style="background-attachment: fixed">
<div id='cssmenu'>
<ul>
<li class="home"><a href='home.jsp'><span>Home</span></a></li>
<li class="tech"><a href='tech.jsp'><span>Tech Specs</span></a></li>
<li><a href='#'><span>Fun</span></a></li>
<li><span>Deals</span></li>
<li><span>Wheelz</span></li>
<li><a href='#'><span>About</span></a></li>
</ul>
</div>
</body>
When you don't know the width because the links can differ in width you could use display: inline-block on the list item <li> and white-space:nowrap on the list itself <ul>
http://jsfiddle.net/Frd8J/
You should set a min-width for #cssmenu > ul, one that allows all your menu items to fit.
The accepted answer did not work in my case but #Ana original answer did. I tried to add this as a comment to her answer but it would not fit. Putting a min-width on the UL as suggested, brought all of the LI items back to one line as desired, but that line extended to the right of the containing div. I added the same min-width to the parent div and I got what I wanted, all of the LI on one line within the container. As a final step, I removed the min-width from the UL (so this is a different, more general answer than Ana's) and everything still worked. In a nut shell if you make the UL nowrap in css as documented in the accepted answer and it wraps anyway, then make sure you give the list enough width so that it does not need to wrap. Another way to increase the width that also works (without using min-width) is to increase the width of the content area below the UL in the containing div. My case was a tabbed DIV, the LIs were the tabs on top. Each tab had content below it. When the content below was wide enough already the LIs stayed in one row. I could have put a min width on every tab content, but for me it worked better to put it once on the outside container. HTH.
im assuming these are you nav bar items
<li class="home"><a href='home.jsp'><span>Home</span></a></li>
<li class="tech"><a href='tech.jsp'><span>Tech Specs</span></a></li>
<li><a href='#'><span>Fun</span></a></li>
<li><span>Deals</span></li>
<li><span>Wheelz</span></li>
<li><a href='#'><span>About</span></a></li>
if you just put them like this
<li class="home"><a href='tech.jsp'><span>Tech Specs</span></li> <li><span>Deals</span></li> <li><span>Wheelz</span></li> <li><a href='#'><span>About</span></a></li>
thats all you have to do is join them all together with no spaces between the li end and start tags, now that would display them all in line with no spaces visually between your nav items on your loaded page, so you might not want them all to be visually joined like its one bar, so iv also put a code for a space in between the li end and start tags, this will give you a single space between all nav tags visually on your loaded screen but they will still stay tied together so that wont go staking up if you make screen narrow.
I am having the same problem with my menu items wrapping to the next line. It took a few changes. First, I had to set the <ul> to have a max-height and overflow set to hidden. Then I just had to set a width to the parent container.
In my case, since the design is responsive and the area available changes (since the menu is flanked on both sides by elements with preset hard widths) I had to expand the area given as it grows.
#primary-menu {
display: none;
}
#media screen and (min-width: 59em) {
#primary-menu {
display: inline-block;
width: 74%;
}
}
#media screen and (min-width: 64em) {
#primary-menu {
width: 78%;
}
}
#media screen and (min-width: 78.75em) {
#primary-menu {
width: 83%;
}
}
ul {
max-height: 53px;
overflow: hidden;
}
<div id="primary-menu" class="menu">
<ul class="menu menu__navigation--primary">
<li class="first leaf active-trail">
Equipment
</li>
<li class="leaf">
Solutions
</li>
<li class="leaf">
Services
</li>
<li class="leaf">
Locations
</li>
<li class="leaf">
Our Company
</li>
<li class="last leaf">
Contact Us
</li>
</ul>
</div>
You should give "display:flex" to "ul" tag
Related
I don't understand why I am able to see through my navigation bar like this. I can even highlight the text through it. Any help guys?
Here's the HTML and CSS, when I test this on an online editor, it works properly. But on my local code, it doesn't.
nav{
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #fff;
box-shadow: 0 3px 10px -2px rgba(0,0,0,.1);
border: 1px solid rgba(0,0,0,.1);
}
nav ul{
list-style: none;
position: relative;
float: right;
margin-right: 100px;
display: inline-table;
}
nav ul li{
float: left;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
nav ul li:hover{background: rgba(0,0,0,.15);}
nav ul li:hover > ul{display: block;}
nav ul li{
float: left;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
nav ul li a{
display: block;
padding: 30px 20px;
color: #222;
font-size: .9em;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
}
<nav role="navigation">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
</nav>
I cant comment, so this appears as an answer but its more a suggestion as I cant see all your code (like where is the Lorem Ipsum coming from?)
You've set the nav to position:fixed, this removes itself from the structure of the DOM. I dont see a z-index property there so that might fix the situation. The text will be hidden behind the navigation if you set the z-index to anything greater than 0.
nav {
position:fixed;
z-index: 1;
...
}
To make sure the text sits underneath the navigation, you may want to set a margin-top to your body tag equating to the height of the navigation bar.
I have a list for my navbar. I want to have a border below the active li item, not just on the bottom.
I've been able to add the border to the bottom using border-bottom, but again, it needs to be below the li element. Any help would be appreciated.
Here is my custom css so far, in addition to default Bootstrap navbar list:
.nav .active{
border-bottom: 5px solid yellow;
}
See below:
Just an example ..... use border-bottom with background-clip padding box
ul {
list-style-type: none;
}
li {
height: 50px;
width: 180px;
line-height: 50px;
border-bottom: 5px solid transparent;
background: #ddd;
display: inline-block;
text-align: center;
background-clip: padding-box;
}
li:hover {
border-bottom: 5px solid gold;
}
<ul>
<li>Hello</li>
<li>World</li>
</ul>
Altarnatively you can try box shadow. see this
ul {
list-style-type: none;
}
li {
height: 50px;
width: 180px;
line-height: 50px;
background: #ddd;
display: inline-block;
text-align: center;
}
li:hover {
box-shadow: 0 5px 0 0 gold;
}
<ul>
<li>Hello</li>
<li>World</li>
</ul>
Try like this: demo
CSS:
ul.nav {
list-style-type: none;
}
li {
display:block;
float:left;
line-height: 26px;
margin-right:10px;
background-color:#ccc;
padding:4px 10px;
border-bottom: 5px solid transparent;
}
li a{
text-decoration:none;
color:#000;
}
li:hover, li.active {
border-bottom: 5px solid red;
}
HTML:
<ul class="nav">
<li> Menu 1
</li>
<li class="active"> Menu 1
</li>
<li> Menu 1
</li>
<li> Menu 1
</li>
</ul>
I typically use an :after for small details like this, to get the border outside the menu items normal height.
HTML:
<ul>
<li>Home</li>
<li class="active">About</li>
<li>Contact</li>
<li>Blog</li>
</ul>
<div class="main">
Next Box
</div>
CSS:
html,body{
margin:0px;
padding:0px;
}
ul{
/* for looks */
list-style:none;
margin:0px;
padding:0px;
}
li{
background:black;
color:white;
display:inline-block;
margin:0px;
padding:5px 20px;
}
li.active{
position:relative;
}
li.active:after{
content:'';
position:absolute;
top:100%;
left:0px;
border-top:5px solid yellow;
width:100%;
}
.main{
background-color:#dddddd;
min-height:400px;
}
Most of the css is just for presentation but the key stuff is on the li, the li.active, and the li.active:after.
You can check out my demo at jsfiddle
This is the sample I always use. Hope this can help you ;)
This method is using the last child of the "li" element as the border.
The class "selected" on "li" element choose the position of the border to stay at initial.
When the mouse is on one of the menu bar button, the bar will follow it by an animation.
If you don't want an animation, please just delete ALL transition CSS style in ".menu > li:last-child" class.
If you want to know more about last child CSS style, please go to this link >> http://www.w3schools.com/cssref/sel_last-child.asp
.menu, .menu li {
margin: 0;
padding: 0;
list-style: none;
display: inline-block;
}
.menu {
margin: auto;
position: relative;
overflow: hidden;
height: 25px;
}
.menu li {padding: 0px 5px;}
.menu > li {
text-align: center;
width: 80px;
font-size: 14px;
}
.menu > li > a {
display: block;
padding: 0px 0px;
color: #444;
text-decoration: none;
font-size: 15px;
-webkit-transition: color 0.5s ease;
-moz-transition: color 0.5s ease;
-ms-transition: color 0.5s ease;
-o-transition: color 0.5s ease;
transition: color 0.5s ease;
}
.menu li a:hover {
color: #ffa500;
}
.menu > li:last-child {
position: absolute;
top: 20px;
right: -90px;
height: 5px;
width: 80px;
background: #ffa500;
-webkit-transition: transform 0.5s ease;
-moz-transition: transform 0.5s ease;
-ms-transition: transform 0.5s ease;
-o-transition: transform 0.5s ease;
transition: transform 0.5s ease;
}
.menu .selected {
position: relative;
pointer-events: none;
cursor: default;
}
.selected a {
color: #ffa500 !important;
}
.menu li:nth-child(1):hover ~ li:last-child {
-webkit-transform:translateX(-375px) !important;
-moz-transform:translateX(-375px) !important;
-ms-transform:translateX(-375px) !important;
-o-transform:translateX(-375px) !important;
transform:translateX(-375px) !important;
}
.menu li:nth-child(1).selected ~ li:last-child {
-webkit-transform:translateX(-375px);
-moz-transform:translateX(-375px);
-ms-transform:translateX(-375px);
-o-transform:translateX(-375px);
transform:translateX(-375px);
}
.menu li:nth-child(2):hover ~ li:last-child {
-webkit-transform:translateX(-280px) !important;
-moz-transform:translateX(-280px) !important;
-ms-transform:translateX(-280px) !important;
-o-transform:translateX(-280px) !important;
transform:translateX(-280px) !important;
}
.menu li:nth-child(2).selected ~ li:last-child {
-webkit-transform:translateX(-280px);
-moz-transform:translateX(-280px);
-ms-transform:translateX(-280px);
-o-transform:translateX(-280px);
transform:translateX(-280px);
}
.menu li:nth-child(3):hover ~ li:last-child {
-webkit-transform:translateX(-185px) !important;
-moz-transform:translateX(-185px) !important;
-ms-transform:translateX(-185px) !important;
-o-transform:translateX(-185px) !important;
transform:translateX(-185px) !important;
}
.menu li:nth-child(3).selected ~ li:last-child {
-webkit-transform:translateX(-185px);
-moz-transform:translateX(-185px);
-ms-transform:translateX(-185px);
-o-transform:translateX(-185px);
transform:translateX(-185px);
}
.menu li:nth-child(4):hover ~ li:last-child {
-webkit-transform:translateX(-90px) !important;
-moz-transform:translateX(-90px) !important;
-ms-transform:translateX(-90px) !important;
-o-transform:translateX(-90px) !important;
transform:translateX(-90px) !important;
}
.menu li:nth-child(4).selected ~ li:last-child {
-webkit-transform:translateX(-90px);
-moz-transform:translateX(-90px);
-ms-transform:translateX(-90px);
-o-transform:translateX(-90px);
transform:translateX(-90px);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div class="menubox">
<ul class="menu">
<li class="selected">
<a href="#">
First
</a>
</li>
<li>
<a href="#">
Second
</a>
</li>
<li>
<a href="#">
Third
</a>
</li>
<li>
<a href="#">
Forth
</a>
</li>
<li></li>
</ul>
</div>
</body>
</html>
EDIT:
I found a solution myself. The width and height in my a element should be put in the li element instead. So these:
width: 7vw;
height: 7vw;
Into the li:)
I have been at it for a while and I just can't figure it out. Internet explorer and Firefox seem to display my menu correctly, but Chrome doesn't.
Here's the html:
<div id="navigationmenu">
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
And here's the CSS.
I have a lot of stuff there, but I posted it all. Maybe something is interfering??
#navigationmenu a {
display: block;
text-transform: uppercase;
text-decoration: none;
color: #a2a2a2;
font-size: 1.1vw;
line-height: 7vw;
text-align: center;
width: 7vw;
height: 7vw;
border: 1px #a2a2a2 solid;
background: #ffffff;
-moz-border-radius: 50%;
border-radius: 50%;
cursor: default;
margin-top: 0;
margin-bottom: 0;
margin-left: 2.1%;
margin-right: 2.1%;
transition-duration: 400ms;
transition-property: box-shadow;
transition-timing-function: ease;
-webkit-transition-duration: 400ms;
-webkit-transition-property: box-shadow;
-webkit-transition-timing-function: ease;
-o-transition-duration:400ms;
-o-transition-property: box-shadow;
-o-transition-timing-function: ease;
}
#navigationmenu a:hover{
background:#ffffff;
border: 1px #a2a2a2 solid;
-webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.75);
box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.75);
}
#navigationmenu li {
display: inline;
float: left;
margin: 0;
padding: 0;
}
I have already tried putting the a element margin and padding to 0 and applying the left and right margins to the li elements instead, but this made the li elements go too far from each other in Firefox (in Chrome they were a little better, but not ok).
Use the following css to add margin between the li elements in you ul
Live example here:
http://jsbin.com/piyilafupe/1/
#navigationmenu ul li {
margin-right: 50px; /* ADD YOU DESIRED DISTANCE HERE */
}
Notes: if for any reason you need to remove the margin on the most right element you can add this
#navigationmenu ul li:last-child {
margin-right: none;
}
Apply the margin to the <li> elements instead of the <a>
You can get rid of the following code in #navigationmenu a
margin-left: 2.1%;
margin-right: 2.1%;
Instead do this
#navigationmenu li {
display: inline;
float: left;
margin-left: 2px;
margin-right: 2px;
padding: 0;
}
I want to reduce the size of the drop down menus to the same as the buttons. Adjusting either the padding or margin would move the items out of place and close themselves when I try to hover over it. I'd like to know what is causing this. Here's the Fiddle
Any help would be great.
CSS:
.sort ul {
text-align: left;
display: inline;
margin: 0;
list-style: none;
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
float:right;
}
.sort ul li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #FF5C00 url(http://i1350.photobucket.com/albums/p769/Stonecold_Stone/Games/SoManySales/Joint%20Supplement/alert-overlay_zpsf561d19b.png) repeat-x;
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;
color:#fff;
}
.sort ul li:hover {
background: #555;
color: #fff;
}
.sort 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;
}
.sort ul li ul li {
background: #FFDFDF;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
z-index:9999;
}
.sort ul li ul li:hover { background: #666; }
.sort ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
.button, ul{ padding-left: 15px;}
.button {
list-style: none; cursor: pointer;
float: left; margin: 10px 10px;
background-color: #039fd3; color: #fff;
padding: 5px 10px;
font-size: 13px;
border-radius: 3px;
-webkit-transition:background-color 0.3s ease-in;
-moz-transition:background-color 0.3s ease-in;
-o-transition:background-color 0.3s ease-in;
transition:background-color 0.3s ease-in;
}
HTML:
<div class="sort"><ul>
<li>
Sort AXXX
<ul>
<li><a href='#'>SXXXX</a></li>
<li><a href='%#%'>AXXXx</a></li>
</ul>
</li>
<li>Sort BXXX
<ul>
<li><a href='%#%'>CXXXX</a></li>
</ul>
</li>
<li>Sort C
<ul>
<li><a href='%#%'>WSXXXX</a></li>
<li><a href='%#%'>SXXXX</a></li>
</ul>
</li>
</ul></div>
Following the op coding style, in order to adjust the width of the dropdown it is required to set a width value for the list items under .sort div. Also added paddings similar to the ones set to the blue buttons on the left.
.sort ul li{
width:70px;
padding-top:5px;
padding-bottom:5px;
padding-left:5px;
padding-right:5px;
}
Also it is necesary to adjust the top relative position of the sub menu to always be below the the main menu,
.sort ul li ul{
top:100%;
}
To adjust the distance from the top of the menu to be the same as with the buttons, it is possible to tweak the top relative distance of the menu to achieve it.
The ul element containing the buttons is a block element and the list items within it are floated with a margin-top of 10px and padding-top of 5px so a total of 15px from the top. The ul element within div.sort is floated to the right and has a padding-top of 5px so with margin-top 10px (i.e. 15-5) should be aligned with the buttons.
.sort > ul{
margin-top:10px;
}
http://jsfiddle.net/fLSyE/
First is, if you want your buttons and drop down menu to have the same size, just set the width to be the same. Here is an example(from your code):
.sort ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 100px; /* set width of drop down menu to 100px */
-webkit-box-shadow: none;
/* SOME OTHER CODES FOLLOW */
}
.sort ul li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
width: 100px; /* also set the width of the menus to 100px */
position: relative;
padding: 15px 20px;
}
Hope it helps!
JSFiddle: http://jsfiddle.net/x6bM3/
If you hover over the products link you will see i have created a drop down effect, but what im trying to do is give it a nice transition instead of it just appearing.
I have tried using :hover with the css transitions on various parts of the menu, but after researching it i realised the animation wont work with display: none; on it. Please help,
Thanks in advance,
Adam
CSS:
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
list-style: none;
position: relative;
display: inline-table;
margin-top: 23px;
padding: 0;
float: left;
}
nav ul:after {
content:"";
display: block;
}
nav ul li {
float: left;
height: 50px;
width: auto;
padding: 5px;
margin-left: 22px;
}
nav ul li a {
display: block;
text-decoration: none;
}
nav ul ul {
background: #363c43;
border-radius: 3px;
border: 1px solid #2e363f;
padding: 7px;
position: absolute;
font-size: 0.9em;
}
nav ul ul:before {
content:'';
display:block;
width:0;
height:0;
position:absolute;
border-right: 7px solid transparent;
border-left: 7px solid transparent;
border-bottom:10px solid #363c43;
top:-8px;
left: 30px;
}
nav ul ul li {
height: 30px;
float: none;
position: relative;
padding: 0px 0px 5px 0px;
margin: 0px;
}
/* Other base styles */
* {
font-family: arial;
}
a:link, a:visited {
color: #979797;
font-size: 1.145em;
/* 18px */
text-decoration: none;
font-weight: lighter;
-webkit-transition: all .25s linear;
transition: color .25s linear;
}
a:hover {
color: #c4c1c1;
font-size: 1.145em;
/* 22px */
text-decoration: none;
}
HTML:
<nav>
<ul class="menu">
<li>home
</li>
<li>products
<ul>
<li>product 1
</li>
<li>product 2
</li>
</ul>
</li>
<li>solutions
</li>
</ul>
</nav>
I can explain in detail, but this person does a great job: https://stackoverflow.com/a/3332179/363605
nav ul ul {
display: block;
-webkit-transition: opacity 1s ease-in;
-moz-transition: opacity 1s ease-in;
-o-transition: opacity 1s ease-in;
transition: opacity 1s ease-in;
opacity: 0;
height: 0;
overflow: hidden;
}
nav ul li:hover > ul {
height: auto;
opacity: 1;
}
http://jsfiddle.net/pYhrk/