Horizontal Submenus not working cross browser

So I’m trying to set up a horizontal menu located over top of the banner on the bottom right. Then when certain buttons are hovered over another bar is brought into view above the original bar. Oddly enough this is working perfectly in IE8, but not in FF or Chrome all on win7. In chrome and FF the hover isn’t working properly and is creating a flickering effect between both sub-menus. Also in FF the second nav bar isn’t aligning horizontally.

Any help would be greatly appreciated, the necessary code is below and can be found here.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- <link href="http://dev.rdennispallas.com/includes/style.css" rel="stylesheet" type="text/css" media="all" /> -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<title>R D Pallas Developmental Site</title>
<style>
#body {
 width: 900px;
 margin-left: auto;
 margin-right: auto;
 margin-top: 0px;
 margin-bottom: 0px;
 height: auto;
 background-color: #EEE;
}
#header {
 border: solid #777 2px;
 background-color: #edf9ca;
 text-align: center;
 width: 875px;
 margin-left: auto;
 margin-right: auto;
 height: 150px;
 color: #777;
 position: relative;
}
#header ul {
 text-align: center;
 list-style-type: none;
 bottom: 5px;
 right: 15px;
 position: absolute;
}
#header li {
 float: left;
}
#header li ul {
 position: absolute;
 left: -999em;
}
#header a {
 background-color: #e7eff5;
 border: solid #777 2px;
 color: #777;
 padding: 1px 15px 1px 15px;
 text-decoration: none;
}
#header a:hover, #header li:hover {
 background-color: #a9b9de;
}
#header li:hover ul {
 left: auto;
 right: 0px;
 margin-bottom: 1.1em;
}
#header li.popout {
 float: left;
}
</style>
</head>
<body bgcolor='#EEEEEE'>
 <div id='body'>
  
  <div id='header'>
   <img src='http://dev.rdennispallas.com/images/banner01.jpg' alt='Banner - R Dennis Pallas' width='875' height='150' />
   <ul id='top_nav'>
    <li><a href='#'>Home</a></li>
    <li><a href='#'>Pictures</a>
     <ul>
      <li class='popout'><a href='#'>Bamboo</a></li>
      <li class='popout'><a href='#'>Photos</a></li>
      <li class='popout'><a href='#'>Photoshop</a></li>
     </ul>
    </li>
    <li><a href='#'>About</a>
     <ul>
      <li class='popout'><a href='#'>Bio</a></li>
      <li class='popout'><a href='#'>Resume</a></li>
     </ul>
    </li>
    <li><a href='#'>Contact</a></li>
   </ul>
  </div>
 </div>
</body>
</html>

Hi derokorian, Welcome to SitePoint!

Reading your posted code I think the lacking top position is causing the issue (unable to test ftm, sorry).

I also suggest the use of margin instead of position to be up to date. Margin is more stable crossbrowser.


#header li ul {
	position: absolute;
	top: 100%; /* added, this would be the fix of the matter (negate both the top values if sub-list should be above) */
	right: 0; /* moved from li:hover ul */
	margin-top: 6px; /* added */
	margin-right: 999em; /* changed from left:-999em */
}
#header li:hover ul {
	margin-right: 0; /* changed from left:auto */
}

By the way, the header image as it is used could rather be used as a background to the header. :slight_smile:

Thank you so much! works perfectly got rid of the top and adding padding-bottom to get the look I was going for but all is well now! Thanks so much. The final code / result can still be seen here.

Thanks for the feedback. :slight_smile:

I think you should set the vertical position on the sub-list to be safe (e.g. test in different font sizes and see if it is).

Also, margins on a positioned object only works on the same side as the position coordinate is set on.