1. Home
  2. Forums Index
  3. Browser Side / CSS 6:27 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Menus appear next to each other in IE but fall below each in FireFox

         

s_malavika

9:48 am on Nov 23, 2009 (gmt 0)

10+ Year Member



here is css code
a.exc:link {color:black; text-decoration:none; font-size:small;font-family:arial;}
a.exc:hover {color:red; text-decoration:none; font-size:small;font-family:arial;}
body{
padding:0;
margin:0;
}
#main{
width:934px;
margin:0 auto;
}
#menuh-container
{
Z-INDEX: 0;
POSITION: relative;
float:left;
TOP: 0px;
LEFT: 65px
}
#menuh
{
BORDER-BOTTOM: lime;
BORDER-LEFT: lime;
MARGIN: 0em 2em 2em;
WIDTH: 100%;
FONT-FAMILY: arial, helvetica, sans-serif;
FLOAT: left;
FONT-SIZE: small;
BORDER-TOP: white;
BORDER-RIGHT: lime
}
#menuh A
{
BORDER-BOTTOM: white 0px solid;
TEXT-ALIGN: center;
BORDER-LEFT: #555 1px solid;
PADDING-BOTTOM: 0.6em;
MARGIN: 0px;
PADDING-LEFT: 0.3em;
PADDING-RIGHT: 0.3em;
DISPLAY: block;
WHITE-SPACE: nowrap;
BORDER-TOP: #555 1px solid;
BORDER-RIGHT: #555 1px solid;
PADDING-TOP: 0.6em
}
#menuh A:link
{

BORDER-BOTTOM: white 0px solid;
BORDER-LEFT: navyblue 0px solid;
BACKGROUND-COLOR: #fffff0;
COLOR: navyblue;
BORDER-TOP: white 1px solid;
BORDER-RIGHT: navyblue 1px solid;
TEXT-DECORATION: none
}
#menuh A.top_child:link
{
BORDER-BOTTOM: white 0px solid;
BORDER-LEFT: navyblue 0px solid;
BACKGROUND-COLOR: #fffff0;
COLOR: navyblue;
BORDER-TOP: gray 1px solid;
BORDER-RIGHT: navyblue 1px solid;
TEXT-DECORATION: none
}
#menuh A.bottom_child:link
{
BORDER-BOTTOM: gray 1px solid;
BORDER-LEFT: navyblue 0px solid;
BACKGROUND-COLOR: #fffff0;
COLOR: navyblue;
BORDER-TOP: white 1px solid;
BORDER-RIGHT: navyblue 1px solid;
TEXT-DECORATION: none
}
#menuh A:visited
{
BORDER-BOTTOM: gray thin solid;
BORDER-LEFT: gray thin solid;
BACKGROUND-COLOR: #7ba5b5;
COLOR: purple;
BORDER-TOP: gray thin solid;
BORDER-RIGHT: gray thin solid;
TEXT-DECORATION: none
}
#menuh A:active
{
BORDER-BOTTOM: silver 4px solid;
BORDER-LEFT: silver 4px solid;
BACKGROUND-COLOR: #7ba5b5;
COLOR: white;
BORDER-TOP: silver 4px solid;
BORDER-RIGHT: silver 4px solid;
TEXT-DECORATION: none
}
#menuh A:hover
{
BORDER-BOTTOM: silver thin solid;
BORDER-LEFT: silver thin solid;
COLOR: red;
BORDER-TOP: silver thin solid;
BORDER-RIGHT: silver thin solid;
TEXT-DECORATION: none
}
#menuh A.top_parent
{
BACKGROUND-IMAGE: url(images/services.gif);
BACKGROUND-REPEAT: no-repeat;
background-color:lightgray;
color:black;
BORDER-BOTTOM: silver thin solid;
font-weight:bold;
BACKGROUND-POSITION: right center
}
#menuh A.top_parent:hover
{
BACKGROUND-IMAGE: url(navdown_white.gif);
BACKGROUND-REPEAT: no-repeat;
background-color: #D90020;
color:white;
BACKGROUND-POSITION: right center
}
#menuh A.top_parent:active
{
BACKGROUND-REPEAT: no-repeat;
background-color: #D90020;
color:white;
BACKGROUND-POSITION: right center
}
#menuh A.parent
{
BACKGROUND-IMAGE: url(nav_white.gif);
BACKGROUND-REPEAT: no-repeat;
BACKGROUND-POSITION: right center
}
#menuh A.parent:hover
{
BACKGROUND-IMAGE: url(nav_white.gif);
BACKGROUND-REPEAT: no-repeat;
BACKGROUND-POSITION: right center
}
#menuh UL
{
PADDING-BOTTOM: 0px;
LIST-STYLE-TYPE: none;
MARGIN: 0px;
PADDING-LEFT: 0px;
WIDTH: 9em;
PADDING-RIGHT: 0px;
FLOAT: left;
PADDING-TOP: 0px
}
#menuh LI
{
POSITION: relative;
MIN-HEIGHT: 1px;
VERTICAL-ALIGN: bottom
}
#menuh UL UL
{
Z-INDEX: 500;
POSITION: absolute;
PADDING-BOTTOM: 1em;
MARGIN: -1em 0px 0px -1em;
PADDING-LEFT: 1em;
PADDING-RIGHT: 1em;
DISPLAY: none;
TOP: auto;
PADDING-TOP: 1em
}
#menuh UL UL UL
{
TOP: 0px;
LEFT: 100%
}
DIV#menuh LI:hover
{
Z-INDEX: 100;
CURSOR: pointer
}
DIV#menuh LI:hover UL UL
{
DISPLAY: none
}
DIV#menuh LI LI:hover UL UL
{
DISPLAY: none
}
DIV#menuh LI LI LI:hover UL UL
{
DISPLAY: none
}
DIV#menuh LI LI LI LI:hover UL UL
{
DISPLAY: none
}
DIV#menuh LI:hover UL
{
DISPLAY: block
}
DIV#menuh LI LI:hover UL
{
DISPLAY: block
}
DIV#menuh LI LI LI:hover UL
{
DISPLAY: block
}
DIV#menuh LI LI LI LI:hover UL
{
DISPLAY: block
}

here is index.html code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<LINK href="menuh.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="abstract" content="specifics">

<meta name="description" content="specifics.">

<meta name="Keywords" content="specifics">

<meta name="revisit-after" content="1 days">

<TITLE>specifics.</TITLE>

<meta name="robots" content="index, follow" />

<link href="/index.php?format=feed&amp;type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
<link href="/index.php?format=feed&amp;type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />

<!--[if lt IE 7]>
<style type="text/css" media="screen">
#menuh{float:none;}
body{behavior:url(csshover.htc); font-size:100%;}
#menuh ul li{float:left; width: 100%;}
#menuh a{height:1%;font:bold 0.7em/1.4em arial, sans-serif;}

</style>
<![endif]-->

</head>

<body id="bd" bgcolor="white" leftMargin=0 topMargin=0 bottomMargin=0
marginwidth=0 marginheight=0>
<div id="main">
<TABLE cellSpacing=0 cellPadding=0 width="100%" align=left border=1 bordercolor="#FFFFFF" height="604">

<tr bgColor=white>
<td height=35 colspan=2 valign=top>
<img border="0" src="images/specifics.gif" width="150" height="35">
<img src=images/logo.gif>
</td>
<td align=right><a class="exc" href="#">Log-in</a> &nbsp;&nbsp; <a href="#" class=exc>Contact Us</a>

<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type=text style="height:10px"><img ALIGN=TEXTTOP border=1 height=13 src="images/gosearch.gif">

</td>
</tr>
<tr><TD bgColor=#ff0000 colSpan=3 height=1><img border="0" src="images/header-images/red-bar.gif" height="1"></TD></TR>

<TR align=left valign="top">
<TD width=934 bgColor=white height=0 align=left valign="top" colspan=3>
<div id="menuh-container" align=left>
<div id="menuh">

<ul>
<li><a href="#" class="top_parent">Services &nbsp;&nbsp;
<img border=0 height=12px src ="images/arrow.gif"></a>
<ul>

<li><a href="#" class="parent">specifics</a>
<ul>
<li><a href="#" class=bottom_child>specifics</a></li>
</ul>
</li>

<li><a href="#" class="parent">specifics</a>
<ul>
<li><a href="#" class=bottom_child>specifics</a>
<ul>
<li><a href="#" class=top_child>specifics</a></li>
<li><a href="#" class=bottom_child>specifics</a></li>
</ul>
</li>
</ul>
</li>

<li><a href="#" class="parent">specifics</a>
<ul>
<li><a href="#" class=top_child>specifics<br> specifics</a></li>
<li><a href="#">specifics<br>specifics</a></li>
<li><a href="#" class=bottom_child>specifics <br>specifics</a>
</li>
</ul>
</li>

<li><a href="#" class="parent">specifics</a>
<ul>
<li><a href="#" class=top_child>specifics<br> specifics</a></li>
<li><a href="#" class=bottom_child>specifics</a>
</li>
</ul>
</li>

<li><a href="#" class="bottom_child">specifics</a></li>

</li>
</ul>

<ul>
<li><a href="#" class="top_parent">specifics &nbsp;&nbsp;
<img border=0 height=12px src ="images/arrow.gif"></a>
<ul>

<li><a href="#" class="parent">specifics</a>
</li>
<li><a href="#" class=bottom_child>specifics <br>specifics</a>
<ul>
<li><a href="#" class=bottom_child>specifics</a>
<ul>
<li><a href="#" class=top_child>specifics.<br></a></li>

</ul>
</ul>
</li> </li>
</ul>
<ul>
<li><a href="#" class="top_parent">About Us &nbsp;&nbsp;
<img border=0 height=12px src ="images/arrow.gif"></a>
<ul>
<li><a href="#" class=bottom_child>Location map -<br>Google</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="#" class="top_parent">Careers</a>
</li>
</ul>
<ul>
<li><a href="#" class="top_parent">News </a>
</li>

</ul>
<ul>
<li><a href="#" class="top_parent">Press release</a>
</li>
</ul>

</div> <!-- end the menuh-container div -->
</div><!-- end the menuh div -->

</td>

</tr>
</table>

</div>

</body>
</html>

[edited by: swa66 at 12:44 pm (utc) on Nov. 23, 2009]
[edit reason] No specifics please [/edit]

s_malavika

9:51 am on Nov 23, 2009 (gmt 0)

10+ Year Member



I need it to work in Firefox also as a Horizontal menu. Thanks
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 6:27 pm May 1, 2026