<div id="responsive-menu" class="column large-10 medium-12 small-12 ">
<div class="top-bar-right">
<ul class="chooose_nav menu dropdown" data-responsive-menu="drilldown medium-dropdown" role="menubar" data-dropdown-menu="shfhll-dropdown-menu">
<li id="menu-item-4" class="home menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-4" role="menuitem"><a href="http://localhost:8888/mindtek/" tabindex="0">Home</a></li>
<li id="menu-item-7" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-7" role="menuitem">
<a href="http://#">Servizi</a>
</li>
<li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-8" role="menuitem"><a href="http://#">Tecnologie</a></li>
<li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9" role="menuitem"><a href="http://#">About</a></li>
<li id="menu-item-10" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10" role="menuitem"><a href="http://#">Contatti</a></li>
</ul>
</div>
</div>
body {
background-color: #a3d5d3;
}
.menu>li {
display: table-cell;
vertical-align: middle;
}
#responsive-menu li a {
position: relative;
display: inline-block;
margin: 15px 25px;
outline: none;
color: #fff;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 400;
text-shadow: 0 0 1px rgba(255,255,255,0.3);
font-size: 1.35em;
padding: 0 0 4px;
}
.top-bar{
background-color:#ccc;
}
.top-bar ul{
background-color:#ccc;
}
.top-bar il a{
color:#fff;
font-size:1.4em;
}
#responsive-menu li{
padding-left: .5em;
padding-right: .5em;
}
#responsive-menu li a {
position: relative;
display: inline-block;
margin: 15px 25px;
outline: none;
color: #fff;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 400;
text-shadow: 0 0 1px rgba(255,255,255,0.3);
font-size: 1.35em;
padding: 0 0 4px;
}
#responsive-menu li a::after {
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 1px;
background: #fff;
content: '';
opacity: 0;
-webkit-transition: height 0.3s, opacity 0.3s,-webkit-transform 0.3s;
-moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s;
transition: height 0.3s, opacity 0.3s, transform 0.3s;
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
transform: translateY(-10px);
}
#responsive-menu li a:hover::after, #responsive-menu li a:focus::after, #responsive-menu li.current-menu-item a::after {
height: 2px;
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
transform: translateY(0px);
}
document.getElementsByTagName("h1")[0].style.fontSize = "80px";
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.