Position an icon under navigation bar link

Hi all,

I a CSS newbie and I am currently can’t a good solution for my coding problem.

I am trying to position and icon under the selected link in the navigation bar. The icon needs to be pushed out of the link box, so it covers the drop-shadow of the navigation bar. Here is the mockup:

Thanks in advance for your help.

The HTML is as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


<body id="leggi">
<div id="wrapper">
	<div id="header">
		<div id="main_nav">
		<div id="main_nav_content"
		<li><a id="leggi_link"class="link_primario" href="#">Leggi</a></li>
		<li><a id="pubblica_link" class="link_primario padding_maggiore" href="#">Pubblica</a></li>

The CSS is

#main_nav {
	border: 0;
	margin: 4px 2px;
	padding: 0 0;
		/*Rounded corners per Chrome,Safari, Mozilla e IE9*/
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	/*Sfondo gradiente per Chrome, Safari, Mozilla e IE9*/
	background-image: -moz-linear-gradient(bottom,  #e2e2e2,  #f6f6f6); /*Gradiente per Mozilla*/
	background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#e2e2e2)); /*Gradiente per Chrome e Chrome*/
	-webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,.47); /*Ombre per Chrome e Chrome*/
	-moz-box-shadow: 0 2px 4px 0 rgba(0,0,0,.47);/*Ombre per Mozilla*/
	box-shadow: 0 2px 4px 0 rgba(0,0,0,.47);
	height: 58px;

#main_nav #leggi_link, #main_nav #pubblica_link {
	display: block;
	font-size: 1.59375em; /* 25.5px/16px */
	padding:0 0;
	margin-left: 50px;	
	text-align: center;
	line-height: 58px;

#pubblica_link:hover { color: #cf1d3c; text-decoration: none; }
#leggi_link:hover { 
	color: #cf1d3c; 
	text-decoration: none; 


#leggi #leggi_link  { color: #cf1d3c;


#main_nav #pubblica_link.padding_maggiore{
	margin-left: 56px;}

Hi elektray. Welcome to SitePoint. :slight_smile:

Given the complexity of that layout, I’d say use images—one for the normal state and one for the current state—that includes the shadow and all.


thanks for the quick response. I wanted really to refrain for using images as my layout is liquid. Is there really no other alternative?

Thank you.

The best alternative is to stop trying to be so fancy on the web, but most people don’t want to hear that. :smiley:

you could prob do a css triangle there. But not with the shadow too. At least not look perfect. Your best using images. A sprite menu.


If you are using an image for the small arrow then you could do it like ths:

#main_nav_content li{float:left}
#main_nav_content li a{position:relative;}
main_nav_content li a:hover{visibility:visible}
#main_nav_content li a:hover span{
background:red;/* add your image icon here */

<li><a id="leggi_link"class="link_primario" href="#">Leggi[B]<span></span>[/B]</a></li>