Le Pingouin des @lpes

<script type="text/javascript">
    	$(function() {
        $('.popmenu_title').mouseover(function() {
        $('.popmenu').fadeIn("fast", "linear");
        });
        $('.popmenu').mouseleave(function() {
        $('.popmenu').fadeOut("fast", "linear");
        });
    	});
</script>

<a class="popmenu_title" href="#">nom du menu</a>
	<div class="popmenu" style="margin-left:450px; margin-top:-255px;">
		<a class="more" href="url 1">Titre 1</a><br />
		<a class="more" href="url 2">Titre 2</a><br />
		<a class="more" href="url 3">Titre 3</a><br />
		<a class="more" href="url 4">Titre 4</a><br />
		<a class="more" href="url 5">Titre 5</a><br />
	</div>

/** Menu surgissant 1 **/
.popmenu_title {color: #8A4354;	text-decoration: none;}	
.popmenu{
    margin-top:5px;
	padding: 5px 10px;
	font-size: 0.9em;
	display:none;
	background:#DADACB;
	border: 2px solid #958573;
	position:absolute;
	border-radius:20px;
	-moz-border-radius:20px;
	-webkit-border-radius:20px;	
	z-index:3; }
.popmenu a {color: #8A4354;}
.popmenu  a:hover {color: #999; }
.more {color: #555; text-decoration: none;}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc id dui lacus. Pellentesque nibh ligula, fringilla quis luctus eget, vestibulum aliquam eros. Nulla facilisis ultrices ante, quis blandit ligula suscipit eu. Pellentesque tempor eleifend turpis non imperdiet. Vivamus ut orci nunc, ut tristique neque. Ut lobortis sem id magna pretium sit amet aliquam quam commodo. Etiam feugiat, erat eu imperdiet ultrices, risus ante rutrum orci, tempor molestie quam elit et sem. Sed at faucibus justo. Phasellus ligula tortor, bibendum vitae imperdiet eget, ullamcorper at sapien. Vivamus suscipit tincidunt turpis nec consequat. Praesent turpis lectus, rhoncus ac molestie ac, malesuada ut enim. Nulla facilisi.

Nullam a nunc enim. Donec posuere dignissim commodo. Fusce nec felis turpis, id lacinia nisi. Suspendisse rutrum lacus sit amet odio tristique fermentum tempus urna rutrum. Morbi elit nunc, mollis eget vulputate non, interdum vel orci. Integer vel diam a mauris scelerisque sodales ut non mi. Aenean quis ante in elit porta convallis at quis enim. Nam vitae mollis ante. Aliquam a tristique erat. Aenean condimentum quam vitae nisl adipiscing quis tincidunt leo vehicula. Sed commodo metus sapien, sit amet interdum eros. Nam eu dapibus nisl. Nulla facilisi. Aliquam ipsum odio, accumsan eget cursus consequat, aliquet a nunc. Suspendisse molestie arcu lectus, sit amet sagittis tellus.

Quisque commodo ullamcorper ante non rutrum. Praesent consequat egestas enim, eu condimentum leo imperdiet nec. Aenean tempor aliquet est, rhoncus porta erat pulvinar a. In egestas, eros laoreet malesuada imperdiet, purus eros laoreet mi, at dapibus est leo vitae dui. Aliquam erat volutpat. Nunc convallis odio quis turpis porta suscipit. Maecenas ac diam in nunc tincidunt vestibulum at at nisl. Donec vel neque vel nisi volutpat ullamcorper. Pellentesque vel justo metus. Vivamus eget nibh nec tortor iaculis auctor. Curabitur eu nunc tristique odio gravida ornare sed eu sapien.

<script src="script/jquery.tabs.pack.js" type="text/javascript"></script>
	
<script type="text/javascript">
	$(function() {
		$('.div-1').tabs({ fxFade: true, fxSpeed: 'slow' });
	});
</script>

<div class="div-1">
	<ul>
	<li><a href="#T-1"><span>Onglet 1</span></a></li>
	<li><a href="#T-2"><span>Onglet 2</span></a></li>
	<li><a href="#T-3"><span>Onglet 3</span></a></li>
	</ul>
	<div id="T-1">                  
		texte 1               
	</div>

	<div id="T-2">
		texte 2               
	</div>

	<div id="T-3">
		texte 3               
	</div>
</div>

/* Fondu avec les onglets */

/* ne pas afficher les tabs cachées */
@media projection, screen { 
    .tabs-hide {
        display: none;
    }
}

/* ne pas imprimer */
@media print {
    .tabs-nav {
        display: none;
    }
}

/* Le look */
.tabs-nav {
	position: relative;
    	list-style: none;
    	margin: 0;
    	padding: 0 0 0 4px;
	left:0px;	
}
.tabs-nav:after { 
    	display: block;
    	clear: both;
    	content: " ";
}
.tabs-nav li {
	background: url('img/grain_dark.gif');	
    	float: left;
    	margin: 0 0 0 2px;
    	min-width: 40px; 
}
.tabs-nav a, .tabs-nav a span {
    	display: block;
    	padding: 2px 8px;
}
.tabs-nav a {
    	position: relative;
    	top: 0px;
    	z-index: 2;
    	padding-left: 0;    	
    	font-size: 1em;
    	line-height: 1.2;
    	text-align: center;
    	text-decoration: none;
    	white-space: nowrap;    	
}
.tabs-nav a:hover {
	color: #999;
}
.tabs-nav .tabs-selected a {
	background: url('img/grain_light.gif');
    	color: #958573;
}
.tabs-nav a span {
    	width: 54px; 
    	min-width: 54px;
    	height: 18px; 
    	min-height: 18px;
    	padding-top: 6px;
    	padding-right: 0;		
}
*>.tabs-nav a span { 
    	width: auto;
    	height: auto;
}
.tabs-nav .tabs-selected a span {
    	padding-top: 7px;
}
.tabs-container {
	text-align: justify;
    	padding: 5px 5px;
	background: url('img/grain_dark.gif');
	margin-bottom: 5px;
}