Problema c/ bt HOME e menu principal

[privaldes 0]

Boa tarde Srs,

É a primeira vez que posto neste forum, apesar de já acompanhá-lo há algum tempo.

 

Tenho um menu dropdown e gostaria de colocar uma imagem diferenciada para o menu Home. Não encontro o erro no CSS que está fazendo com que o HOME não fique centralizado junto com o menu existente. Como o site está sendo desenvolvido em Wordpress, a chamada do menu está assim:

<nav role="navigation" class="navwrap">
	<ul class="dropdown-home">
		<li class="home"><a href="<?php echo get_option('home'); ?>">HOME</a></li>
	</ul>
		<?php wp_nav_menu(array (
				'menu' => 'Menu Principal',
				'theme_location' => 'menu-principal',
				'container' => '',
				'items_wrap' => '<ul id="%1$s" class="dropdown">%3$s</ul>'
				)
			    ); ?>
	</nav>

 

 

E o CSS relacionado ao menu está assim:

nav {	
float: left;
width: 100%;
font-size: 14px;
font-weight: bold;
background: #a90329; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: -moz-linear-gradient(top,  #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
background: linear-gradient(to bottom,  #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-8 */
}

.navwrap {
text-align: center;
}

nav ul.dropdown {
list-style: none;
float: left; 
width: 80%;
padding: 5px 10px 6px 0;
}

nav ul.dropdown li {
display: inline;
position: relative;
z-index: 500;	
text-align: left;
font-size: 14px;
}

nav ul.dropdown a {
padding:12px;
color: #eee;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}


/* Estilo do link ao passar o mouse */

nav ul.dropdown li:hover a {
background: #444;	
}

/* Exibir links em blocos */

nav ul.dropdown li ul a {
display: block;
}

/* Submenus */

nav ul.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
width: 200px;
position: absolute;
z-index:500;
}

nav ul.dropdown li ul {
top: 27px;
}

nav ul.dropdown ul ul {
top: 0;
left: 100%;
}

nav ul.dropdown ul li {
float:none;
}

/* Dropdown */

/* Esconder submenus */	

nav ul.dropdown ul, nav ul.dropdown li:hover ul ul, nav ul.dropdown ul li:hover ul ul { 
display: none; 
}

/* Exibir submenus ao passar o mouse */	

nav ul.dropdown li:hover ul, nav ul.dropdown ul li:hover ul, nav ul.dropdown ul li ul li:hover ul { 
display: block;
left: 0;
top: 23px;
}

/* Mudar a cor do link do submenu ao passar o mouse */
nav ul.dropdown li * a:hover {
background: #666;
background: -moz-linear-gradient( top, #200, #400); /* CSS 3 */
border-bottom:1px solid #900;
border-top:1px solid #222;
}

/* Menu home */
nav ul.dropdown-home {
float: left;
width: 10%;
}

nav ul.dropdown-home li.home {
}

nav ul.dropdown-home li.home a {
background: url(images/nav-home.png) no-repeat scroll center top transparent;
color: #882424;
height: 43px;
width: 86px;
padding: 5px 18px 20px 20px;
}

 

Alguém sabe me dizer onde estou errando?

(paciência comigo por favor, sou iniciante...rs)

 

Pessoal, se o link facilitar que alguém me ajude.... segue:

http://www.shaolinchan.org.br/site2012

 

Alguém???

[Edson Carli 0]

Opa amigo, aparentemente você resolveu (vi pelo link). Como você fez? :mellow: