Problema para sobrepor div

[Kher 2]

Tenho a seguinte estrutura:

 

 

 

<nav id="site-navigation" class="main-navigation" role="navigation">
<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav><!-- #site-navigation -->
<!-- #icons -->
<div id="icons">
<a href="#" title="Facebook"><span class="icon-facebook"><h4 class="icons">Facebook</h4></span></a>
<a href="#" title="Twitter"><span class="icon-twitter"><h4 class="icons">Facebook</h4></span></a>
<a href="/contato/" title="Contato"><span class="icon-envelop"><h4 class="icons">Facebook</h4></span></a>
<a href="/links/" title="Links"><span class="icon-link"><h4 class="icons">Facebook</h4></span></a>
<a href="/mapa-do-site/" title="Mapa do Site"><span class="icon-earth"><h4 class="icons">Facebook</h4></span></a>
</div>
<!-- end #icons -->

 

Eu quero sobrepor a div#icons mas mesmo que eu de z-index 999 para ela e um menor para a div#site-navigation .main-navigation ela até sobrepõe, mas os links deixam de funcionar. Há alguma coisa de errado com o CSS abaixo?

 

#icons {float:right; letter-spacing:5px; margin-right:5px; z-index:999; margin-top:-30px;}

 

 

[Gerciley 14]

O float é right mesmo? porque tem alguns textos no lado esquerdo, podia postar o css todo...

[Kher 2]

Segue abaixo o css completo do menu. É o CSS do TwentyTwelve. Eu quero que essa div#icons fique no menu do lado direito, por isso dei float right, é em um espaço que sobra do menu. Eu até consigo posicioanr a div da maneira que quero, mas por algum motivo os links não funcionam.

 

 

	.main-navigation ul.nav-menu,
	.main-navigation div.nav-menu > ul {
		border-bottom: 1px solid #ededed;
		border-top: 1px solid #ededed;
		display: inline-block !important;
		text-align: left;
		width: 100%;
	}
	.main-navigation ul {
		margin: 0;
		text-indent: 0;
	}
	.main-navigation li a,
	.main-navigation li {
		display: inline-block;
		text-decoration: none;
	}
	.main-navigation li a {
		border-bottom: 0;
		color: #6a6a6a;
		line-height: 3.692307692;
		text-transform: uppercase;
		white-space: nowrap;
	}
	.main-navigation li a:hover {
		color: #000;
	}
	.main-navigation li {
		margin: 0 40px 0 0;
		margin: 0 2.857142857rem 0 0;
		position: relative;
	}
	.main-navigation li ul {
		display: none;
		margin: 0;
		padding: 0;
		position: absolute;
		top: 100%;
		z-index: 1;
	}
	.main-navigation li ul ul {
		top: 0;
		left: 100%;
	}
	.main-navigation ul li:hover > ul {
		border-left: 0;
		display: block;
	}
	.main-navigation li ul li a {
		background: #efefef;
		border-bottom: 1px solid #ededed;
		display: block;
		font-size: 11px;
		font-size: 0.785714286rem;
		line-height: 2.181818182;
		padding: 8px 10px;
		padding: 0.571428571rem 0.714285714rem;
		width: 180px;
		width: 12.85714286rem;
		white-space: normal;
	}
	.main-navigation li ul li a:hover {
		background: #e3e3e3;
		color: #444;
	}