<!-- Menù Multilivello Inizio -->
<style>
/* Minor style rules for presentational purposes */
a:link{
text-decoration: none;
}
/* Actual navmenu CSS */
#nav{
font: 75% Arial, Helvetica, sans-serif;
background-color: #444;
width: 884px;
margin: 1em auto 0px;
background: #111 repeat-x top left;
height: 37px;
}
#nav a:link{
text-decoration: none;
}
#nav, #nav li{
display: block;
list-style: none;
position: relative;
z-index: 82;
}
#nav > li{
float: left;
z-index: 82;
}
#nav > li:hover{
background: #222 repeat-x top left;
}
#nav a{
display: block;
line-height: 37px;
padding: 0 0.5em;
z-index: 82;
position: relative;
color: #ccc;
}
#nav a:hover{
color: #fff;
}
/* Subnav Menu */
#nav .submenu{
display: none;
position: absolute;
z-index: 80;
background: repeat-x left top #353535;
left: 0px;
top: 37px;
min-width: 100%;
-o-box-shadow: 2px 2px 3px #000;
-icab-box-shadow: 2px 2px 3px #000;
-khtml-box-shadow: 2px 2px 3px #000;
-moz-box-shadow: 2px 2px 3px #000;
-webkit-box-shadow: 2px 2px 3px #000;
box-shadow: 2px 2px 3px #000;
}
#nav .submenu li{
display: block;
line-height: 27px !important;
}
#nav .submenu li:hover{
background: #444 repeat-x top left;
}
#nav .submenu a{
display: block;
line-height: 27px !important;
white-space: nowrap;
}
#nav > li:hover .submenu{
display: block;
}
/* Hide next level of subnavigation */
#nav > li:hover > .submenu .submenu{
display: none;
}
#nav .padding{
display: block;
position: absolute;
z-index: 78;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background: none !important;
}
/* Padding amount for first-level dropdown */
#nav > li > .submenu > .padding{
width: 160%;
left: -30%;
height: 140%;
}
#nav .buffer{
display: block;
position: absolute;
bottom: 0px;
right: 100%;
width: 100%;
height: 100%;
background: none !important;
}
#nav .shadow{
display: none !important;
}
/* Third-level Subnavigation */
#nav .submenu .submenu{
position: absolute;
left: 100%;
top: -1px;
}
#nav .submenu .submenu .padding{
width: 150%;
top: -35%;
height: 170%;
}
/* Show subnavigation */
#nav > li:hover .submenu li:hover > .submenu{
display: block;
z-index: 70 !important;
}
/* CSS3 Transition Handling */
#nav.use-trans li > .submenu{
opacity: 0;
display: block !important;
left: -9999px !important;
-moz-transition: 0.2s opacity ease-in, 0s left linear 0.22s;
-webkit-transition: 0.2s opacity ease-in, 0s left linear 0.22s;
-khtml-transition: 0.2s opacity ease-in, 0s left linear 0.22s;
-icab-transition: 0.2s opacity ease-in, 0s left linear 0.22s;
-ms-transition: 0.2s opacity ease-in, 0s left linear 0.22s;
-o-transition: 0.2s opacity ease-in, 0s left linear 0.22s;
transition: 0.2s opacity ease-in, 0s left linear 0.22s;
}
/* Hide next level of subnavigation */
#nav.use-trans > li:hover > .submenu .submenu{
display: block !important;
left: -9999px !important;
}
/* Hover */
#nav.use-trans > li:hover > .submenu,
#nav.use-trans > li > .submenu li:hover > .submenu{
opacity: 1 !important;
-moz-transition-delay: 0s;
-webkit-transition-delay: 0s;
-khtml-transition-delay: 0s;
-icab-transition-delay: 0s;
-ms-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
#nav.use-trans > li:hover > .submenu { left: 0px !important; }
#nav.use-trans > li > .submenu li:hover > .submenu { left: 100% !important; }
#nav ul a{
position: relative;
}
#nav ul a span{
background-color: #5a5a5a;
position: absolute;
bottom: 0px;
left: 0px;
height: 1px;
width: 100%;
}
/* Outlining Rules for Debugging */
.padding { outline-color: red; }
.buffer { outline-color: blue; }
.showbounds .padding,
.showbounds .buffer{
outline-style: solid;
outline-width: 1px;
}
/* Theming can go here */
#nav{
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #404040), color-stop(100%, #282828));
background: -webkit-linear-gradient(#404040, #282828);
background: -moz-linear-gradient(#404040, #282828);
background: -o-linear-gradient(#404040, #282828);
background: linear-gradient(#404040, #282828);
}
#nav > li{
}
#nav > li:first-child{
}
#nav > li:hover{
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #1a1a1a), color-stop(100%, #282828));
background: -webkit-linear-gradient(#141414, #282828);
background: -moz-linear-gradient(#141414, #282828);
background: -o-linear-gradient(#141414, #282828);
background: linear-gradient(#141414, #282828);
}
#nav .submenu li{
background-image: -webkit-linear-gradient(#292929, #242424);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$.support.cssProperty = (function() {
function cssProperty(p, rp) {
var b = document.body || document.documentElement,
s = b.style;
// No css support detected
if(typeof s == 'undefined') { return false; }
// Tests for standard prop
if(typeof s[p] == 'string') { return rp ? p : true; }
// Tests for vendor specific prop
v = ['Moz', 'Webkit', 'Khtml', 'O', 'Ms'],
p = p.charAt(0).toUpperCase() + p.substr(1);
for(var i=0; i<v.length; i++) {
if(typeof s[v[i] + p] == 'string') { return rp ? (v[i] + p) : true; }
}
}
return cssProperty;
})();
jQuery(document).ready(function(){
// Check for CSS3 Transition support. If running an older browser, add the menu transitions manually.
if(!$.support.cssProperty("transition")){
$("#nav").removeClass("use-trans");
$("#nav li").each(function(){
var obj = $(this);
var submenu = obj.children(".submenu");
if(submenu.length > 0) obj
.mouseenter(function(){ $(this).children(".submenu").fadeIn(200); })
.mouseleave(function(){ $(this).children(".submenu").fadeOut(200); })
submenu.hide();
});
}
// Following is simply a listener that allows the user to toggle the outlined regions for easier visualisation of what's happening in the CSS
var toggle = $("#toggle-class");
if(toggle.hasClass("hidden")) return;
showBounds(toggle[0].checked);
function showBounds(value){
return ((typeof(value) == "boolean") ? value : value[0].checked) ?
$("body").addClass("showbounds") :
$("body").removeClass("showbounds");
}
toggle.change(function(e){showBounds(this.checked);});
$(window).keydown(function(e){
if(e.keyCode == 83){ // "S"
toggle[0].checked = !(toggle[0].checked);
showBounds(toggle);
}
});
});
</script>
<ul id="nav" class="use-trans">
<li>
<a href="#">Primo Elemento</a>
<div class="submenu">
<ul>
<li><a href="#">Quo voluptas nulla pariatur?<span></span></a></li>
<li><a href="#">Dignissimos Ducimus<span></span></a></li>
<li><a href="#">Qui blanditiis<span></span></a></li>
</ul>
<div class="padding"></div>
<div class="shadow"></div>
</div>
</li>
<li>
<a href="#">Secondo Elemento</a>
<div class="submenu">
<ul>
<li><a href="#">Qui Dolorem<span></span></a></li>
<li><a href="#">Ipsum Quia<span></span></a></li>
<li><a href="#">Dolor Sit<span></span></a></li>
<li><a href="#">Tempore<span></span></a></li>
<li><a href="#">Qui Ratione<span></span></a></li>
<li>
<a href="#">Amet, nam libero! >> <span></span></a>
<div class="submenu">
<ul>
<li><a href="#">Qui Dolorem<span></span></a></li>
<li><a href="#">Ipsum Quia<span></span></a></li>
<li><a href="#">Dolor Sit<span></span></a></li>
<li><a href="#">Qui Dolorem<span></span></a></li>
<li><a href="#">Ipsum Quia<span></span></a></li>
<li><a href="#">Dolor Sit<span></span></a></li>
<li><a href="#">Qui Dolorem<span></span></a></li>
<li><a href="#">Ipsum Quia<span></span></a></li>
<li><a href="#">Dolor Sit<span></span></a></li>
<li>
<a href="#">Amet, nam libero! Libero, libero, LIBERO!! >> <span></span></a>
<div class="submenu">
<ul>
<li><a href="#">Dude, what the fuck is "Libero"?<span></span></a></li>
<li><a href="#">Ipsum Quia<span></span></a></li>
<li><a href="#">Dolor Sit<span></span></a></li>
<li><a href="#">Qui Dolorem<span></span></a></li>
<li><a href="#">Ipsum Quia<span></span></a></li>
<li><a href="#">Dolor Sit<span></span></a></li>
</ul>
<div class="padding"></div>
<div class="shadow"></div>
<div class="buffer"></div>
</div>
</li>
<li><a href="#">Tempore<span></span></a></li>
<li><a href="#">Qui Ratione<span></span></a></li>
</ul>
<div class="padding"></div>
<div class="shadow"></div>
<div class="buffer"></div>
</div>
</li>
</ul>
<div class="padding"></div>
<div class="shadow"></div>
</div>
</li>
<li>
<a href="#">Terzo elemento<span></span></a>
<div class="submenu">
<ul>
<li><a href="#">Voluptatem sequi nesciunt<span></span></a></li>
<li><a href="#">Dicta sunt explicabo.<span></span></a></li>
<li><a href="#">Sed Quia Non<span></span></a></li>
<li><a href="#">Numquam Eius<span></span></a></li>
<li><a href="#">Modi cum soluta<span></span></a></li>
<li><a href="#">Nobis est<span></span></a></li>
</ul>
<div class="padding"></div>
<div class="shadow"></div>
</div>
</li>
<li>
<a href="#">Quarto elemento</a>
<div class="submenu">
<ul>
<li><a href="#">Eligendi Optio<span></span></a></li>
<li><a href="#">Atque Corrupti<span></span></a></li>
<li><a href="#">Quos Dolores<span></span></a></li>
<li><a href="#">Quas Molestias.<span></span></a></li>
<li><a href="#">Libero Tempore<span></span></a></li>
<li><a href="#">Dignissimos Ducimus<span></span></a></li>
</ul>
<div class="padding"></div>
<div class="shadow"></div>
</div>
</li>
</ul>
<!-- Menù Multilivello Fine -->