Position an icon under navigation bar link

HTML & CSS
1

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">
<html>
<head>

</head>

<body id="leggi">
<div id="wrapper">
	<div id="header">
		<div id="main_nav">
		<div id="main_nav_content"
		<ul>
		<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>
		</ul>
		</div>
		</div>
	</div>

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;}
2

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.

3

Hi,

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.
Daniela

4

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

5

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.

6

Hi,

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{
position:absolute;
background:red;/* add your image icon here */
width:16px;
height:16px;
bottom:-10px;
left:50%;
margin-left:-8px;	
}




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