Clearing a float not working, firefox 9.

I haven't tested other browsers yet but at the moment I have a dropdown menu which clears the rest of the site fine, however the login dropdown does not, it messes up the whole site, any ideas on how to get it to clear? Click login on the site to see what i mean.

CSS:

.signin_menu {
	position:relative;
	float:right;
	overflow:hidden;
   	display:none;
    	width:190px;
    	margin-top:0px;
    	margin-right:28px;
   	list-style-type: none;
   	z-index:5;
   	color:#FFFFFF;
}
.signin_menu li {
   	background-color: #000000;
   	padding:8px; 
}
.signin_menu ul {
	margin:0; 
	padding:0; 
	list-style:none;
}
.signin_menu li a {
   	color:#FFFFFF;
   	text-decoration:none;
   	padding:0px;
}
 
.signin_menu li a:hover {
    	padding:0px;
   	font-weight:bold;
   	color: #b0b0b0;
}

Code (markup):

The menu:

<ul class="signin_menu">
  	<li>
  	
    <form id="form1" action="login.php" method="post">
      <?php echo _('Username'); ?>
      <input type="text" name="username" id="username" />
      
        <?php echo _('Password'); ?>
        <input type="password" name="password" id="password" />
      
       <div id="nomember"><?php echo _('Not a member?'); ?> - <a href="register.php"><?php echo _('Register'); ?></a> <?php echo _('now!'); ?></div>
       <input type="submit" id="login" name="login" value="<?php echo _('Sign in'); ?>" />
      
            <center><div id="message"></div></center>
	</form>
	<?php echo _('Or log in with Facebook'); ?>:
	<a href="<?php echo $loginUrl; ?>"><img src="images/loginfb.png" border="0"></a>
	
	</li>
  </ul>

Code (markup):

Thanks for your help

 

Ok, now it seems to work in firefox on both mac and windows, however it is not clearing correctly in chrome, safari and IE. Any ideas on what I can do?

New css:

.signin_menu {
	position:relative;
 	content: "."; 
	float:left;
	overflow:hidden;
	margin-left: -230px;
    	margin-top: 34px;
   	display:none;
    	width:190px;
   	list-style-type: none;
   	z-index: 5;
   	color:#FFFFFF;
}
.signin_menu li {
   	background-color: #000000;
   	padding:8px; 
}
.signin_menu ul {
	margin:0; 
	padding:0; 
	list-style:none;
}
.signin_menu li a {
   	color:#FFFFFF;
   	text-decoration:none;
   	padding:10px;
}
 
.signin_menu li a:hover {
    	padding:10px;
   	font-weight:bold;
   	color: #b0b0b0;
}
.signin_menu:after { /* FF, IE8, O, S, etc. */
	display:none; 
 	visibility:hidden; 
 	clear:both; 
 	height:0; 
 	content: "."; 
 }

Code (markup):

Then the html/php

<ul class="signin_menu">
  	
  	<li>
    <form id="form1" action="login.php" method="post">
      <?php echo _('Username'); ?>
      <input type="text" name="username" id="username" />
      
        <?php echo _('Password'); ?>
        <input type="password" name="password" id="password" />
      
       <?php echo _('Not a member?'); ?> - <a href="register.php"><?php echo _('Register'); ?></a> <?php echo _('now!'); ?>
       <input type="submit" id="login" name="login" value="<?php echo _('Sign in'); ?>" />
      
            <center><div id="message"></div></center>
	</form>
	<?php echo _('Or log in with Facebook'); ?>:
	<a href="<?php echo $loginUrl; ?>"><img src="images/loginfb.png" border="0"></a>
	</li>
	
  </ul>

Code (markup):

 

Fixed it with absolute positioning instead of relative