I have a horizontal ccs dropdown menu which isn't working in IE. the colors doesn't hover and the dropdown won't come down. It works in the other browsers like Safari, firefox etc. I have IE 10.
What have i done wrong?
Here is my HTML:
<ul class="nav">
<li><a href = '#'><img src="images/house.png"/></a></li>
<li class="menu"><a href = '#'><span>Je Studie</span></a>
<ul>
<li><a href='#'>Programma</a></li>
<li><a href='#'>Begeleiding</a></li>
<li><a href='#'>Locaties</a></li>
<li><a href='#'>Open dag</a></li>
<li><a href='#'>Toelatingseisen</a></li>
<li><a href='#'>Aanmelden</a></li>
</ul>
</li>
<li class="menu"><a href = '#'><span>Voor ouders</span></a>
<ul>
<li><a href='#'>Studiekeuzeproces</a></li>
<li><a href='#'>Studiekeuzeactiviteiten</a></li>
<li><a href='#'>Het puberbrein</a></li>
<li><a href='#'>Tips</a></li>
<li><a href='#'>Begeleiding</a></li>
</ul>
</li>
<li class="menu"><a href = '#'><span>Voor decanen</span></a>
<ul>
<li><a href='#'>Advies</a></li>
<li><a href='#'>Studiekeuzeactiviteiten</a></li>
<li><a href='#'>Decanennieuws</a></li>
</ul>
</li>
<li class="menu"><a href = '#'><span>Voor bedrijven</span></a>
<ul>
<li><a href='#'>Opleiding</a></li>
<li><a href='#'>Opdrachtstages</a></li>
<li><a href='#'>Afstudeeropdrachten</a></li>
</ul>
</li>
<li class="menu"><a href = '#'><span>Contact</span></a></li>
</ul>
and my CSS:
.nav , .nav ul {
list-style-type:none;
background:#d70047;
}
.nav {
position:relative;
height:37;
background:#d70047;
}
.nav a {display:block;
color:white;
font-family:Myriad Pro;
font-size:16px;
}
.nav li{
float:left;
margin:3px 0px 0px 0px;
padding:3px 10px;
}
.nav .menu{
padding:11px 47px 7px 47px;
margin:0px 0px 0px 0px;
}
.nav .menu:hover{
background:#e3e1e1;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.nav ul{
visibility:hidden;
top:100%;
left:0;
position:absolute;
background:#e3e1e1;
width:920px;
height:33;
}
.nav ul li a{
font-family:Myriad Pro;
font-size:15px;
color:black !important;
}
.nav .menu:hover a{
color:#1882a5;}
.nav ul li{
background:#e3e1e1;
padding:5px 50px 5px 5px;
}
.nav ul li:hover{
}
.nav ul li:hover a{
text-decoration:underline;
font:bold;
}
.nav li:hover>ul{
visibility:visible;
}
Have you tried changing your heights to px values, i.e. height: 37px; and height: 33px;? If that's it, it's possible that the other browsers are assuming that you meant px where IE might not.
Have you tried em instead of px.
Related
I am learning HTML5 and CSS. So my question is probably very basic and very naive. My apology for that.
To practice I am developing a header menu with drop down sub menu. I primarily hide the drop down menu by setting its display property to none, after hovering on the parent I set the display to block. But it seems like hover can't change the display value. Also it is worth mentioning that my html page is using flex box in order to have grid layout.
here is the html file:
<div class="menue">
<nav>
<ul>
<li>Home</li>
<ul>
<li>All</li>
<li>New Arrival</li>
<li>Casual</li>
<li>Gown</li>
<li>Bridesmade</li>
</ul>
<li>Woman</li>
<ul>
<li>All</li>
<li>New Arrival</li>
<li>Casual</li>
<li>Gown</li>
<li>Bridesmade</li>
</ul>
<li>Men</li>
<ul>
<li>All</li>
<li>New Arrival</li>
<li>Casual</li>
<li>Gown</li>
<li>Bridesmade</li>
</ul>
<li>Kids</li>
<ul>
<li>All</li>
<li>New Arrival</li>
<li>Casual</li>
<li>Gown</li>
<li>Bridesmade</li>
</ul>
<li>Flyers</li>
<ul>
<li>All</li>
<li>New Arrival</li>
<li>Casual</li>
<li>Gown</li>
<li>Bridesmade</li>
</ul>
<li>Contact Us</li>
</ul>
</nav>
</div>
and here is the css file:
.menue {
background: #fc575e;
}
nav{
height:40px;
width: 960px;
display: block;
margin: 0,auto;
text-align: center;
text-transform: uppercase;
}
nav a{
display: block;
text-decoration: none;
font-size: 13px;
color: #112233;
}
nav ul{
list-style: none;
}
nav ul li{
float:left;
width:140px;
height:40px;
line-height: 40px;
background: #fc575e;
}
nav ul ul li{
position: relative;
display: none;
}
nav ul li:hover ul li{
display: block;
}
nav ul li:hover{
background-color: #223433;
color:#f0f1f5;
}
It seems like my hover action does not doing its job to change the display value of sub-menu to block.
I was wondering if some one could give me a hint?
It is really appreciated.
your css seems to be working fine. what you want to do is wrap both the <a> and <ul> tag inside an <li>
<li>
Home
<ul>
<li>All</li>
<li>New Arrival</li>
<li>Casual</li>
<li>Gown</li>
<li>Bridesmade</li>
</ul>
</li>
#Davi has it right, but you could also change
nav ul li:hover ul li{
display: block;
}
for
nav ul li:hover + ul li {
display: block;
}
Heres a jfiddle of it working
By the way, when you hover over a menu button, whenever the submenu wants to show up, it will displace all other elements in the original menu
Also, here is a nice tutorial on what you want to do specifically
I know #JSelser has already provided a working answer. Yet, I felt mine could be helpful to another person. I went through this tutorial http://inspirationalpixels.com/tutorials/creating-a-dropdown-menu-with-html-css and adjusted to satisfy your menu.
<!DOCTYPE html>
<html>
<head>
<style>
.clearfix:after {
display:block;
clear:both;
}
/*----- Menu Outline -----*/
.menu-wrap {
width:100%;
box-shadow:0px 1px 3px rgba(0,0,0,0.2);
background:#3e3436;
}
.menu {
width:1000px;
margin:0px auto;
}
.menu li {
margin:0px;
list-style:none;
font-family:'Ek Mukta';
}
.menu a {
transition:all linear 0.15s;
color:#919191;
}
.menu li:hover > a{
text-decoration:none;
color:#ffffff;
background:#696969;
}
.menu .arrow {
font-size:11px;
line-height:0%;
}
/*----- Top Level -----*/
.menu > ul > li {
float:left;
display:inline-block;
position:relative;
font-size:19px;
}
.menu > ul > li > a {
padding:10px 40px;
display:inline-block;
text-shadow:0px 1px 0px rgba(0,0,0,0.4);
}
.menu > ul > li:hover > a{
background:#2e2728;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
z-index:1;
opacity:1;
}
.sub-menu {
width:160%;
padding:5px 0px;
position:absolute;
top:100%;
left:0px;
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
box-shadow:0px 2px 3px rgba(0,0,0,0.2);
background:#2e2728;
}
.sub-menu li {
display:block;
font-size:16px;
}
.sub-menu li a {
padding:10px 30px;
display:block;
text-decoration: none;
}
.menu-title{
text-decoration: none;
background-color: #fc575e;
color: #000000;
}
a.menu-title{
color: #000000;
}
</style>
</head>
<body>
<div class="menu_wrap">
<nav class="menu">
<ul class="clearfix">
<li><a class="menu-title" href="#">Home <span class="arrow">▼</span></a>
<ul class="sub-menu">
<li>All</li>
<li>New Arrival</li>
<li>Casual</li>
<li>Gown</li>
<li>Bridesmade</li>
</ul>
</li>
<li><a class="menu-title" href="#">Woman <span class="arrow">▼</span></a>
<ul class="sub-menu">
<li>All</li>
<li>New Arrival</li>
<li>Casual</li>
<li>Gown</li>
<li>Bridesmade</li>
</ul>
</li>
<li><a class="menu-title" href="#">Men <span class="arrow">▼</span></a>
<ul class="sub-menu">
<li>All</li>
<li>New Arrival</li>
<li>Casual</li>
<li>Gown</li>
<li>Bridesmade</li>
</ul>
</li>
<li><a class="menu-title" href="#">Kids <span class="arrow">▼</span></a>
<ul class="sub-menu">
<li>All</li>
<li>New Arrival</li>
<li>Casual</li>
<li>Gown</li>
<li>Bridesmade</li>
</ul>
</li>
<li><a class="menu-title" href="#">Flyers <span class="arrow">▼</span></a>
<ul class="sub-menu">
<li>All</li>
<li>New Arrival</li>
<li>Casual</li>
<li>Gown</li>
<li>Bridesmade</li>
</ul>
</li>
<li><a class="menu-title" href="#">Contact Us</a></li>
</ul>
</nav>
</div>
</body>
</html>
I try to build a horizontal menu. I want absolute positioning of the second level:
Parent 1 | Parent 2 | Parent 3
Child 2.1 | Child 2.2
It works in Firefox but not in IE 8, the padding-top is ignored there and the second line overlaps the first one.
Here is the fiddle:
http://jsfiddle.net/oe8wksax/
Here is the markup:
<ul id="#top" class='nav'>
<li><a href='#'>Parent 1</a>
<ul>
<li><a href='#'>Child 1.1</a></li>
<li><a href='#'>Child 1.2</a></li>
</ul>
</li>
<li><a href='#'>Parent 2</a>
<ul style="display:block">
<li><a href='#'>Child 2.1</a></li>
<li><a href='#'>Child 2.2</a></li>
</ul>
</li>
<li><a href='#'>Parent 3</a>
<ul>
<li><a href='#'>Child 3.1</a></li>
<li><a href='#'>Child 3.2</a></li>
</ul>
</li>
<ul>
Here the CSS:
nav, .nav ul
{
list-style:none;
clear: both;
}
.nav > li
{
float:left;
margin-right:10px;
}
.nav ul
{
position:absolute;
left:5px;
display:none;
padding-top:5px;
}
Try this.
.nav, .nav ul
{
list-style:none;
clear: both;
}
.nav{position:relative;padding: 0;}
.nav > li{margin-right: 15px;}
.nav ul li{margin-right: 10px;}
.nav > li,.nav ul li
{
float:left;
}
.nav ul
{
position:absolute;
display:none;
top: 25px;
left: 0;
padding: 0;
width: 100%;
}
I am doing horizontal navigation with css only.
I can’t position first submenu to the middle of it’s parent of the smaller width.
I'm not using display: because I need transitions. Also first submenu's min-width must be the same of it's parent.
Thanks in advance!
Here's a codepen link!
It needs to be like this http://i.stack.imgur.com/G4sUV.jpg
CSS
nav {
position:relative;
border: 1px solid #222;
background-image: linear-gradient(#444, #111);
border-radius: 6px;
box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
height:40px;
margin:50px auto;
padding:0;
width:90%;
z-index:10;
}
nav ul,
nav ul ul {
list-style:none;
padding:0;
margin:0;
}
nav>ul {
clear:left;
display:flex;
justify-content:center;
align-content: stretch;
text-align:center;
font:12px Arial, Helvetica, sans-serif;
text-transform:uppercase;
}
nav ul li {
border-right: 1px solid #222;
box-shadow: 1px 0 0 #444;
height:40px;
padding:0;
margin:0;
position: relative;
text-align: center;
}
nav ul li:last-child {
border:none;
box-shadow:none
}
nav ul li a {
display:block;
text-align: center;
color: #ccc;
text-decoration: none;
padding:13px 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
nav ul li a:hover {
background-image: linear-gradient(#04acec, #0186ba);
color: #fafafa
}
nav ul li ul {
background: linear-gradient(#444, #111);
border-radius: 3px;
transition: all 1s ease-in-out;
text-transform:none;
opacity: 0;
visibility: hidden;
font-size: 12px;
}
nav ul li:hover>ul {
opacity: 1;
visibility: visible;
margin: 0;
width:auto;
}
nav ul li>ul {
position: absolute;
min-width: 100%;
}
nav ul li ul li ul {
min-width: 0px;
}
nav ul li ul li {
border:none;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
float:none;
margin:0;
}
nav ul li ul li:last-child {
box-shadow: none;
}
nav ul li ul li a {
padding:10px 8px;
border:none
}
nav ul li ul li ul {
left: 90%;
right: auto;
top: 10%;
margin: 0% 0 0 20%;
box-shadow: -1px 0 0 rgba(255,255,255,.3);
z-index:20;
}
nav ul li:last-child ul li ul {
left: auto;
right: 90%;
margin: 0 20% 0 0%;
}
HTML
<nav class ="topusermenu">
<ul class="first">
<li><a href=#>Home Veryyyyy LOOOOONNNNGGGGGGG Home Veryyyyy LOOOOONNNNGGGGGGG</a>
<ul>
<li><a href=#>Home 1Sub 1</a>
<ul>
<li><a href=#>Home 2Sub 1</a></li>
<li><a href=#>Home 2Sub 2</a></li>
<li><a href=#>Home 2Sub 3</a></li>
</ul>
</li>
<li><a href=#>Home 1Sub 2</a></li>
<li><a href=#>Home 1Sub 3</a>
<ul>
<li><a href=#>Home 2Sub 1</a></li>
</ul>
</li>
</ul>
</li>
<li><a href=#>News Very LONG</a>
<ul>
<li><a href=#>News 1Sub 1 Very very bvery Long</a></li>
<li><a href=#>News 1Sub 2</a>
<ul>
<li><a href=#>News 2Sub 1</a></li>
<li><a href=#>News 2Sub 2 long</a>
<ul>
<li><a href=#>1</a></li>
<li><a href=#>2</a>
<ul>
<li><a href=#>1</a></li>
<li><a href=#>22</a>
<ul>
<li><a href=#>1333</a></li>
<li><a href=#>2333</a></li>
<li><a href=#>3333</a></li>
</ul>
</li>
<li><a href=#>333</a></li>
</ul>
</li>
<li><a href=#>3</a></li>
</ul>
</li>
<li><a href=#>News 2Sub 3</a></li>
</ul>
</li>
<li><a href=#>News 1Sub 3</a></li>
</ul>
</li>
<li><a href=#>Contact</a>
<ul>
<li><a href=#>Contact1</a></li>
<li><a href=#>Contact2 long</a></li>
<li><a href=#>Contact3</a></li>
</ul>
</li>
<li><a href=#>About Lonoooooo o o o o</a>
<ul>
<li><a href=#>About1 Very Long</a></li>
<li><a href=#>About2 Long</a>
<ul>
<li><a href=#>subAbout2</a></li>
<li><a href=#>subAbout2</a>
<ul>
<li><a href=#>subAbout2</a></li>
<li><a href=#>subAbout2</a>
<ul>
<li><a href=#>subAbout2</a></li>
<li><a href=#>subAbout2</a>
<ul>
<li><a href=#>22</a></li>
<li><a href=#>22</a>
</li>
<li><a href=#>s22</a></li>
</ul>
</li>
<li><a href=#>subAbout2</a></li>
</ul>
</li>
<li><a href=#>subAbout2</a></li>
</ul>
</li>
<li><a href=#>2</a></li>
</ul>
</li>
<li><a href=#>About3</a></li>
</ul>
</li>
</ul>
</nav>
We were following this tutorial (http://www.script-tutorials.com/click-action-multilevel-css3-dropdown-menu/). The goal was to create a multilevel dropdown click menu with css/html and no js. The code works fine in firefox and even works in the demo shown in the tutorial in chrome, but downloading the code and using it separately doesn't work in chrome. Anyone have any ideas why? The code for the menu is:
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<div class="example">
<ul id="nav">
<li>Home</li>
<li><a class="fly" href="#">Tutorials</a>
<ul class="dd">
<li>HTML / CSS</li>
<li><a class="fly" href="#">JS / jQuery</a>
<ul>
<li>jQuery</li>
<li>JS</li>
</ul>
</li>
<li>PHP</li>
<li>MySQL</li>
<li>XSLT</li>
<li>Ajax</li>
</ul>
</li>
<li><a class="fly" href="#">Resources</a>
<ul class="dd">
<li><a class="fly" href="#">By category</a>
<ul>
<li>PHP</li>
<li>MySQL</li>
<li><a class="fly" href="#">Menu1</a>
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li><a class="fly" href="#">Menu3</a>
<ul>
<li>Menu31</li>
<li>Menu32</li>
<li>Menu33</li>
<li>Menu34</li>
</ul>
</li>
<li>Menu4</li>
</ul>
</li>
<li>Ajax</li>
</ul>
</li>
<li><a class="fly" href="#">By tag name</a>
<ul>
<li>captcha</li>
<li>gallery</li>
<li>animation</li>
</ul>
</li>
</ul>
</li>
<li>About</li>
<li>Go Back To The Tutorial</li>
</ul>
</div>
/* demo page styles */
body {
background:#eee;
margin:0;
padding:0;
}
.example {
background:#fff url(../images/tech.jpg);
width:770px;
height:570px;
border:1px #000 solid;
margin:20px auto;
padding:15px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
/* main menu styles */
#nav,#nav ul {
background-image:url(../images/tr75.png);
list-style:none;
margin:0;
padding:0;
}
#nav {
height:41px;
padding-left:5px;
padding-top:5px;
position:relative;
z-index:2;
}
#nav ul {
left:-9999px;
position:absolute;
top:37px;
width:auto;
}
#nav ul ul {
left:-9999px;
position:absolute;
top:0;
width:auto;
}
#nav li {
float:left;
margin-right:5px;
position:relative;
}
#nav li a {
background:#c1c1bf;
color:#000;
display:block;
float:left;
font-size:16px;
padding:8px 10px;
text-decoration:none;
}
#nav > li > a {
-moz-border-radius:6px;
-webkit-border-radius:6px;
-o-border-radius:6px;
border-radius:6px;
overflow:hidden;
}
#nav li a.fly {
background:#c1c1bf url(../images/arrow.gif) no-repeat right center;
padding-right:15px;
}
#nav ul li {
margin:0;
}
#nav ul li a {
width:120px;
}
#nav ul li a.fly {
padding-right:10px;
}
/*hover styles*/
#nav li:hover > a {
background-color:#858180;
color:#fff;
}
/*focus styles*/
#nav li a:focus {
outline-width:0;
}
/*popups*/
#nav li a:active + ul.dd,#nav li a:focus + ul.dd,#nav li ul.dd:hover {
left:0;
}
#nav ul.dd li a:active + ul,#nav ul.dd li a:focus + ul,#nav ul.dd li ul:hover {
left:140px;
}
New css Worked for me in both crome and firefox!::::
body {
background:#eee;
margin:0;
padding:0;
}
.example {
background:#fff url(../images/tech.jpg);
width:770px;
height:570px;
border:1px #000 solid;
margin:20px auto;
padding:15px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
/* main menu styles */
#nav,#nav ul {
background-image:url(../images/tr75.png);
list-style:none;
margin:0;
padding:0;
}
#nav {
height:41px;
padding-left:5px;
padding-top:5px;
position:relative;
z-index:2;
}
#nav ul {
left:-9999px;
position:absolute;
top:37px;
width:auto;
}
#nav ul ul {
left:-9999px;
position:absolute;
top:0;
width:auto;
}
#nav li {
float:left;
margin-right:5px;
position:relative;
}
#nav li a {
background:#c1c1bf;
color:#000;
display:block;
float:left;
font-size:16px;
padding:8px 10px;
text-decoration:none;
}
#nav > li > a {
-moz-border-radius:6px;
-webkit-border-radius:6px;
-o-border-radius:6px;
border-radius:6px;
overflow:hidden;
}
#nav li a.fly {
background:#c1c1bf url(../images/arrow.gif) no-repeat right center;
padding-right:15px;
}
#nav ul li {
margin:0;
}
#nav ul li a {
width:120px;
}
#nav ul li a.fly {
padding-right:10px;
}
/*hover styles*/
#nav li:hover > a {
background-color:#858180;
color:#fff;
}
/*focus styles*/
#nav li a:focus {
outline-width:0;
}
/*popups*/
#nav li a:hover + ul.dd,#nav li a:focus + ul.dd,#nav li ul.dd:hover {
left:0;
}
#nav ul.dd li a:hover + ul,#nav ul.dd li a:focus + ul,#nav ul.dd li ul:hover {
left:140px;
}
In files for download is different html page. Difference is that live demo contain attribute tabindex="1" in some links. I downloaded source code from live example and it works in chrome now.
New code for your html page.
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<div class="example">
<ul id="nav">
<li>Home</li>
<li><a class="fly" href="#" tabindex="1">Tutorials</a>
<ul class="dd">
<li>HTML / CSS</li>
<li><a class="fly" href="#" tabindex="1">JS / jQuery</a>
<ul>
<li>jQuery</li>
<li>JS</li>
</ul>
</li>
<li>PHP</li>
<li>MySQL</li>
<li>XSLT</li>
<li>Ajax</li>
</ul>
</li>
<li><a class="fly" href="#" tabindex="1">Resources</a>
<ul class="dd">
<li><a class="fly" href="#" tabindex="1">By category</a>
<ul>
<li>PHP</li>
<li>MySQL</li>
<li><a class="fly" href="#" tabindex="1">Menu1</a>
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li><a class="fly" href="#" tabindex="1">Menu3</a>
<ul>
<li>Menu31</li>
<li>Menu32</li>
<li>Menu33</li>
<li>Menu34</li>
</ul>
</li>
<li>Menu4</li>
</ul>
</li>
<li>Ajax</li>
</ul>
</li>
<li><a class="fly" href="#" tabindex="1">By tag name</a>
<ul>
<li>captcha</li>
<li>gallery</li>
<li>animation</li>
</ul>
</li>
</ul>
</li>
<li>About</li>
<li>Go Back To The Tutorial</li>
</ul>
</div>
I'm trying to get the logo centered with display: inline-block and vertical-align: center but that does not work. Would you know why and how to fix this?
Many thanks
http://jsfiddle.net/eLSbq/
<div class="header">
<div class="logo">Logo</div>
<ul class="drop_menu">
<li><a href='#'>Link 1</a>
<ul>
<li><a href='#'>Sub Link 1</a></li>
<li><a href='#'>Sub Link 2</a></li>
</ul>
</li>
<li><a href='#'>Link 2</a>
<ul>
<li><a href='#'>Sub Link 1</a></li>
<li><a href='#'>Sub Link 2</a></li>
<li><a href='#'>Sub Link 3</a></li>
<li><a href='#'>Sub Link 4</a></li>
</ul>
</li>
<li><a href='#'>Link 3</a>
<ul>
<li><a href='#'>Sub Link 1</a></li>
<li><a href='#'>Sub Link 2</a></li>
<li><a href='#'>Sub Link 3</a></li>
<li><a href='#'>Sub Link 4</a></li>
</ul>
</li>
</ul>
</div>
.header {
width: 100%;
background: #fff;
color: #124191;
font-weight: 300;
font-size: 28px;
height: 120px;
display: table;
position: fixed;
z-index: 999999;
opacity: 0.7;
background: aqua;
}
.logo {
display: inline-block;
vertical-align: middle;
left:0;
color: #333;
font-size: 30px;
font-weight: 800;
letter-spacing: -1px;
margin-left: 60px;
background: red;
}
.drop_menu {
padding:0;
margin:0;
list-style-type:none;
right: 0;
display: table;
z-index: 3000;
display: table-cell;
vertical-align: middle;
right: 0;
}
.drop_menu li { display: table-cell;
vertical-align: middle; float: right;}
.drop_menu li a {
padding:9px 20px;
display:block;
color:#666;
text-decoration:none;
font-size: 15px;
font-weight: 400;
text-transform: uppercase;
}
/* Submenu */
.drop_menu ul {
position:absolute;
left:-9999px;
top:-9999px;
list-style-type:none;
}
.drop_menu li:hover { position:relative; background:#5FD367; }
.drop_menu li:hover ul {
left:0px;
top:30px;
background:#5FD367;
padding:0px;
}
.drop_menu li:hover ul li a {
padding:5px;
display:block;
width:168px;
text-indent:15px;
background-color:#5FD367;
}
.drop_menu li:hover ul li a:hover { background:#005555; }
LIVE DEMO HERE
Its working now. Take a look to my live demo
the problem is that you use at the same display:table and in the same class display:table-cell.
This is not correct.
The display:inline-block are correct for what you need, but i recommend you to use float:left instead because of the compatibility of the browser like IE 7, 8 etc..
The older browser don´t understand what display:inline-block mean and doesn´t apply the css properties.
i have change your css code add some position:relative and top values too..
Greg Your layout for the Page has some serious flaws in terms of structure and css.
I suggest you to do a quality check and remove all the redundant css.
Anyways, An vertical align for an element can be done if itself is inline and parent is td as shown http://jsfiddle.net/eLSbq/6/. Display
display: inline
for logo and parent as td cell