.activeTo{ /* border:1px solid #fff;*/ border-radius: 5px; /* box-shadow: 0 0 5px #33ffff, 0 0 10px #66ffff;*/ box-shadow: 0 0 5px #c2d033, 0 0 10px #f5d033;} .toggle, [id^=drop] { display: none; } /* Giving a background-color to the nav container. */ nav { margin: 0; padding-top: 5px; /*	background-color: #333; border: 1px solid red;*/ position: relative; float: right; min-height: 60px; } #logo { display: block; margin: 0; Padding:0.7em 0em; /*	padding: 0 30px;*/ float: left; font-size:20px; line-height: 60px; /*	border:1px solid red; */ } /* animazione logo ingrandimento e transizione*/ .logo__animated{transition: transform 1s ease;} .logo__animated:hover { transform: translate(80px, 80px) scale(5.5) ;} .imago_logo {display: block;padding: 5px;} @media (max-width: 768px) { .logo__animated:hover { transform: scale(1.50) ;} } /* Since we'll have the "ul li" "float:left" * we need to add a clear after the container. */ nav:after { content:""; display:table; clear:both; } /* Removing padding, margin and "list-style" from the "ul", * and adding "position:reltive" */ nav ul { float: right; /*padding: 5px;*/ padding: 0.8em; margin:0; list-style: none; position: relative; } /* Positioning the navigation items inline */ nav ul li { margin: 0; padding: 2px; display:inline-block; float: left; /*	background-color: #254441;*/ } /* Styling the links */ nav a { display:block; /*	padding:14px 20px; font-size:17px;*/ padding: 0.5em 0.5em; font-size: 0.95em; color:#FFF; font-weight: 500; border: 1px solid #fff; opacity: 0.9; text-decoration:none; border-radius: 5px; background: #333; text-shadow: -1px 0 #f5d033, 0 1px #000, 1px 0 #000, 0 -1px #000; } nav ul li ul li:hover { /* background: #000000;*/ background: #111; opacity: 0.9; border-radius: 5px; } /* Background color change on Hover */ nav a:hover { /*	background-color: #000000;*/ background-color: #111; opacity: 0.9; ; color: gold; border-radius: 5px; /* box-shadow: 0 0 5px #33ffff, 0 0 10px #66ffff;*/ box-shadow: 0 0 5px #c2d033, 0 0 10px #f5d033; } /* Hide Dropdowns by Default * and giving it a position of absolute */ nav ul ul { display: none; position: absolute; /* has to be the same number as the "line-height" of "nav a" */ /* top nel menu dropdowns spostamento dall'alto e z-index primo piano*/ top: 57px; z-index: 10; } /* Display Dropdowns on Hover */ nav ul li:hover > ul { display:inherit; } /* First Tier Dropdown */ nav ul ul li { width:190px; float:none; display:list-item; position: relative; } /* Second, Third and more Tiers * We move the 2nd and 3rd etc tier dropdowns to the left * by the amount of the width of the first tier. */ nav ul ul ul li { position: relative; top:-60px; /* has to be the same number as the "width" of "nav ul ul li" */ left: 183px; } /* Change ' +' in order to change the Dropdown symbol */ li > a:after { content: ' +'; color:#f5d033;} li > a:only-child:after { content: ''; } /* Media Queries --------------------------------------------- */ @media all and (max-width : 768px) { #logo { display: block; padding-left: 10px; width: 20%; text-align: none; float: right; z-index: 1; } nav { margin: 0; float:left; background: /*linear-gradient(90deg, rgba(224,224,148,1) 30%, rgba(108,112,89,1) 100%);*/ transition: all 1s cubic-bezier(.215, .61, .355, 1); z-index: 0; } /* Hide the navigation menu by default */ /* Also hide the */ .toggle + a, .menu { display: none; } /* Stylinf the toggle lable Deve presentare gli stessi attributi della sezione nav a altrimenti i selettori dei sottolivelli risultano diversi*/ .toggle { display:block; padding:14px 20px; font-size:17px; color:#FFF; font-weight: 500; border: 1px solid #fff; opacity: 0.9; text-decoration:none; border-radius: 5px; background: #333; text-shadow: -1px 0 #f5d033, 0 1px #000, 1px 0 #000, 0 -1px #000; min-height: 25px; /* riportare colori e corners usati nella versione desk*/ } .toggle:hover { /* background-color: #000000;*/ background-color: #111; opacity: 0.9; ; color: gold; border-radius: 5px; /* box-shadow: 0 0 5px #33ffff, 0 0 10px #66ffff;*/ box-shadow: 0 0 5px #c2d033, 0 0 10px #f5d033; } /* Display Dropdown when clicked on Parent Lable */ [id^=drop]:checked + ul { display: block; } /* Change menu item's width to 100% */ nav { display: block; width: 80%; padding: 5px; } nav ul li { display: block; width: 100%; } nav ul ul .toggle, nav ul ul a { padding: 0 40px; } nav ul ul ul a { padding: 0 80px; } nav a:hover, nav ul ul ul a { /*	background-color: #000000;*/ background-color: #333; opacity: 0.9; ; color: gold; border-radius: 5px; /* box-shadow: 0 0 5px #33ffff, 0 0 10px #66ffff;*/ box-shadow: 0 0 5px #c2d033, 0 0 10px #f5d033; } nav ul li ul li .toggle, nav ul ul a, nav ul ul ul a{ padding:14px 20px; color:#FFF; font-size:17px; } /*setta colore dei menu aperti*/ nav ul li ul li .toggle, nav ul ul a { background-color: #212121; } /* Hide Dropdowns by Default */ nav ul ul { float: none; position:static; color: #ffffff; /* has to be the same number as the "line-height" of "nav a" */ } /* Hide menus on hover */ nav ul ul li:hover > ul, nav ul li:hover > ul { display: none; } /* Fisrt Tier Dropdown */ nav ul ul li { display: block; width: 100%; } nav ul ul ul li { position: static; /* has to be the same number as the "width" of "nav ul ul li" */ } } @media all and (max-width : 367px) { nav ul li { display:block; width: 90%; /* background-color: trasparent;*/ } }