border na div menu

[Gabriel Belgamo 0]

É o seguinte, estou desenvolvendo um menu, e quero que ao passar o mouse, a borda desça sobre o link e quando tirar o mouse, desapareça. Eu meio que consegui usando border-top-width mas em vez de descer, a borda subiu. Me ajudem!

HTML

	<div id="menu">
		<ul>
			<li><a href="">Home</a></li>
			<li><a href="">Sobre</a></li>
			<li><a href="">Artigos</a></li>
			<li><a href="">Estudos</a></li>
			<li><a href="">Diretório</a></li>
			<li><a href="">CURSO</a></li>
			<li><a href="">Links</a></li>
			<li><a href="">Contato</a></li>
		</ul>
	</div>

CSS
#menu ul {
	padding:0px;
	margin:0px;
	float: center;
	margin-top: 5%;
	word-spacing: 20px;
	width: 100%
	background-color:#EDEDED;
	list-style:none;
}

#menu ul li { display: inline; }

#menu ul li a {
text-decoration: none;
color: white;
transition-duration: 0.5s;
}

#menu ul li a:hover {
padding-right: 10px;
transition-duration: 0.5s;
border-top: outset 2px #F60;
border-top-width: 40px;
}

[Denis.Santos 7]

Se você quer a borda na parte inferior não é border-top, pois dessa forma ela aparecerá na parte superior, para parte inferior é:

border-bottom:

[reebr 94]

Cara... nem imagino como fazer uma coisas dessas, mas creio que se conseguir o resultado não será o esperado. Se você descer a borda (como está querendo), provavelmente o layout vai quebrar.

 

A primeira coisa que veio na minha cabeça foi usar 'transform' em um pseudo elemento ::after Seria tipo isto?

http://jsfiddle.net/rnxn/h8546/3/embedded/result/

[Gabriel Belgamo 0]

É mais ou menos isto, porque eu vi um site com este mesmo efeito que quero mas não sei como fazer;

[reebr 94]

Ajudaria se postasse o site...