Drop Down menu out in Firefox

HTML & CSS
1

Hi all

I have a demo here to illustrate my problem

http://www.ttmt.org.uk/

It’s just a simple nav floated to the right and there is a drop down menu under ‘Two’.

The drop down menu contain large buttons and I want the menu to stretch the with of the red bar above.

I got it working by giving the ul of the drop down menu a set with a negative left margin to pull it across.


#nav #topNav ul#fontSubMenu{
	background:#e1e1e1;
	left:-999em;
	position:absolute;
	padding:25px 0px 10px 22px;
	margin:0 0 0 -784px;
	z-index:120;
  1width:100%;
  width:1028px;
}

In Safari,Chrome (Mac) this seems to work but in Firefox it’s a few pixels out.

Can anyone tell me why it’s out in Firefox and is this the best way to do this.


<!DOCTYPE html>
<html>
  <head>
  <title>Title of the document</title>
  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">

  <style type="text/css">
    body{
    	font:1em Helvetica, sans-serif;
    	color:#555;
    }

    #wrap{
      background:red;
    	margin:0 auto;
    	position:relative;
    	width:1050px;
    }
    #nav{
    	overflow:auto;
    }
    #nav #topNav{
    	float:right;
    }
    #nav #topNav li{
    	float:left;
    	margin:0 0 0 6px;
    }
    #nav #topNav li:hover,
    #nav #topNav li a:hover{
    	background:#e1e1e1;
    	color:#555;
    }
    #nav #topNav li:hover .subNav{
    	border-bottom:6px solid #e1e1e1;
    	z-index:21;
    }
    #nav #topNav li a{
    	border-top:6px solid red;
    	border-bottom:6px solid red;
    	display:block;
    	padding:13px 13px;
    	color:white;
    	font-size:.98em;
    	font-weight:bold;
    	text-decoration:none;
    }
    #nav #topNav ul#fontSubMenu{
    	background:#e1e1e1;
    	left:-999em;
    	position:absolute;
    	padding:25px 0px 10px 22px;
    	margin:0 0 0 -784px;
    	z-index:120;
      1width:100%;
      width:1028px;
    }
    #nav #topNav li:hover ul#fontSubMenu{
    	left:auto;
    }
    #nav #topNav li ul#fontSubMenu li{
    	margin:0 14px 14px 0;
    }
    #nav #topNav li ul#fontSubMenu li a{
    	border: 1px solid #f7f7f7;
    	display:block;
    	color:#555;
    	position:relative;
    	font-size:.98em;
    	line-height:1.3em;
    	font-weight:normal;
    	width:162px;
    	height:45px;
    }
    #nav #topNav li ul#fontSubMenu li a em{
    	position:absolute;
    	left:75px;
    	bottom:13px;
    	width:100px;
    	font-style:normal;
    }
    #nav #topNav li ul#fontSubMenu li a:hover{
      background:#aaa;
    }

  </style>

  </head>


<body>
    <div id="wrap">

        <div id="nav">
          <ul id="topNav">
            <li><a href="#">One</a></li>
            <li  ><a href="#" class="subNav">Two</a>
              <ul id="fontSubMenu">
                <li><a href="#"><em>Two One</em></a></li>
                <li><a href="#"><em>Two Two</em></a></li>
                <li><a href="#"><em>Two Three</em></a></li>
                <li><a href="#"><em>Two Four</em></a></li>
                <li><a href="#"><em>Two Five</em></a></li>
                <li><a href="#"><em>Two Six</em></a></li>
                <li><a href="#"><em>Two Seven</em></a></li>
                <li><a href="#"><em>Two Eight</em></a></li>
                <li><a href="#"><em>Two Nine</em></a></li>
                <li><a href="#"><em>Two Ten</em></a></li>
                <li><a href="#"><em>Two Eeleven</em></a></li>
              </ul>
            </li>
            <li  ><a href="#">Three</a></li>

            <li  ><a href="#">Four</a></li>

            <li  ><a href="#">Five</a></li>
          </ul>
        </div><!--nav-->

    </div><!--wrap-->

</body>
</html>