Ajustar último elemento do menu

[allex_carvalho 124]

Boa tarde,

 

Estou com este menu aqui. No último link está com um intervalo sem preencher com o efeito hover. Como corrigir isto?

 

Obrigado pela atenção.

[Teteu Six 4]

#menu_principal {
width: auto;
height: 50px;
line-height: 50px;
float: left;
background: #F7D031;
}

ou

#menu_principal {
height: 50px;
line-height: 50px;
float: left;
background: #F7D031;
}

Sugestão de melhoria, mas ai vai de você.

<ul id="menu_principal">
	<li><a href="" title="HOME">HOME</a></li>
	<li class="itens_menu"><a>INSTITUCIONAL</a>
		<ul class="sub_menu">
			<li><a href="" title="Nossa História">Nossa História</a></li>
			<li><a href="" title="Visão">Visão</a></li>
			<li><a href="" title="Missão">Missão</a></li>
			<li><a href="" title="O Grupo">O Grupo</a></li>
		</ul><!-- sub_menu -->
	</li>
	<li class="itens_menu"><a>NEWS</a>
		<ul class="sub_menu">
			<li><a href="" title="Notícias">Notícias</a></li>
			<li><a href="" title="Galerias">Galerias</a></li>
		</ul><!-- sub_menu -->
	</li>
	<li class="itens_menu"><a>PLANOS</a>
		<ul class="sub_menu">
			<li><a href="" title="Planos Familiares">Planos Familiares</a></li>
			<li><a href="" title="Planos Corporativos">Planos Corporativos</a></li>
			<li><a href="" title="Home Care">Home Care</a></li>
		</ul><!-- sub_menu -->
	</li>
	<li class="itens_menu"><a>PRODUTOS</a>
		<ul class="sub_menu">
			<li><a href="" title="Programa Amparar">Programa Amparar</a></li>
			<li><a href="" title="Ass. Jurídica">Ass. Jurídica</a></li>
			<li><a href="" title="Programa Vantagens">Programa Vantagens</a></li>
			<li><a href="" title="Transporte Social">Transporte Social</a></li>
			<li><a href="" title="Atendimento Personalizado">Atendimento Personalizado</a></li>
			<li><a href="" title="Complexo Homenagens">Complexo Homenagens</a></li>
			<li><a href="" title="Clínica de Tanatopraxia">Clínica de Tanatopraxia</a></li>
		</ul><!-- sub_menu -->
	</li>
	<li class="itens_menu"><a>SERVIÇOS ONLINE</a>
		<ul class="sub_menu">
			<li><a href="" title="Notícias">Vídeo Homenagem</a></li>
			<li><a href="" title="Velório Online">Velório Online</a></li>
			<li><a href="" title="Obtuário">Obtuário</a></li>
		</ul><!-- sub_menu -->
	</li>
	<li class="itens_menu"><a>AUTOATENDIMENTO</a>
		<ul class="sub_menu">
			<li><a href="" title="Fale Conosco">Fale Conosco</a></li>
			<li><a href="" title="Atendimento Via Chat">Atendimento Via Chat</a></li>
			<li><a href="" title="Perguntas Frequentes">Perguntas Frequentes</a></li>
			<li><a href="" title="2ª Via de Boleto">2ª Via de Boleto</a></li>
		</ul><!-- sub_menu -->
	</li>
	<li class="itens_menu"><a>FRANQUIAS</a>
		<ul class="sub_menu">
			<li><a href="" title="Encontre uma Franquia">Encontre uma Franquia</a></li>
			<li><a href="" title="Site Franquias">Site Franquias</a></li>
			<li><a href="" title="Seja um Franqueado">Seja um Franqueado</a></li>
		</ul><!-- sub_menu -->
	</li>
</ul>

@font-face {
		font-family: 'futura_bk_btbook';
		src: url('tt0140m_-webfont.eot');
		src: url('tt0140m_-webfont.eot?#iefix') format('embedded-opentype'),
				 url('tt0140m_-webfont.woff') format('woff'),
				 url('tt0140m_-webfont.ttf') format('truetype'),
				 url('tt0140m_-webfont.svg#futura_bk_btbook') format('svg');
		font-weight: normal;
		font-style: normal;
}
html, body {
		margin: 0;
		padding: 0;
}
ul, ol {
		list-style-type:none;
}
body {
		font-family: 'futura_bk_btbook';
		background: #F3F3F4;
}
#menu_principal {
		width: 975px; height: 50px;
		line-height: 50px;
		float: left;
		background: #F7D031;
}
#menu_principal li {
		float: left;
		position: relative;
		cursor: pointer;
}
#menu_principal li .sub_menu {
		width: 225px;
		position: absolute;
		top: 50px;
		display: none;
		background: #fff;
		z-index: 15;
		padding: 0 !important;
}
#menu_principal .itens_menu .sub_menu {
		left: 0;
}
#menu_principal .ultimo_item_menu .sub_menu {
		text-align: right;
		right: 0;
}
#menu_principal li:hover .sub_menu {
		display: block;
}
#menu_principal li .sub_menu li {
		width: 225px; height: 25px;
		line-height: 25px;
}
#menu_principal li a {
		color: #704F3F;
		text-decoration: none;
		padding: 0 16px 0 15px;
		display: block;
}
#menu_principal .ultimo_item_menu a {
		padding: 0 17px 0 17px;
}
#menu_principal li a:hover, #ativado {
		background: #02938C;
		color: #fff !important;
}

[allex_carvalho 124]

Deu certinho. Obrigado

= D