Dropdown menu 001# - CSS

.menu { /* maga a menüsáv */
font-family: Century Gothic, sans-serif;
background-color: transparent;
color: #000000;
padding: 16px;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
margin: 0 auto; /* középen helyezkedik el */
text-align: center;
border: 0px !important;
}

.menu a:link, .menu a:visited { /* menü linkjei */
font-family: Century Gothic, sans-serif;
background-color: transparent;
color: #000000;
padding: 16px;
font-size: 12px;
text-transform: uppercase;
}

.menu a:hover, .menu a:active { /* menü linkjei ha rávisszük az egeret */
font-family: Century Gothic, sans-serif;
background-color: transparent;
color: #f3a4aa;
padding: 16px;
font-size: 12px;
text-transform: uppercase;
cursor: pointer;
}

.leugrobutton { /* az a link amire rávisszük az egeret megjelennek az alárendelt linkek */
font-family: Century Gothic, sans-serif;
background-color: transparent;
color: #e5b3b3;
padding: 16px;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
margin: 0 auto;
border: 0px !important;
}

.leugro {
position: relative;
display: inline-block;
margin: 0 auto;
}

.leugro-tartalom { /* a lenyíló doboz kinézete */
display: none;
position: absolute;
background-color: #f2f2f2;
min-width: 160px;
transition: 0.5s ease;
-o-transition: 0.5s ease;
-moz-transition: 0.5s ease;
-webkit-transition: 0.5s ease;
}

.leugro-tartalom a:link, .leugro-tartalom a:visited { /* a lenyíló doboz linkjeinek kinézete */
font-family: Century Gothic, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
padding: 12px 16px;
text-decoration: none;
display: block;
border-bottom: 2px solid #eeeeee;
text-transform: none !important;
text-align: left !important;
}

.leugro-tartalom a:hover, .leugro-tartalom a:active { /* a lenyíló doboz linkjeinek kinézete ha rávisszük az egeret */
font-family: Century Gothic, sans-serif;
font-size: 12px;
font-weight: bold;
color: #fbb4b6;
padding: 12px 16px;
text-decoration: none;
display: block;
border-bottom: 2px solid #eeeeee;
text-transform: none !important;
text-align: left !important;
background-color: #e2e2e2 !important;
}

.leugro:hover .leugro-tartalom {
display: block;
z-index: 100;
}

.leugro:hover .leugrobutton {
background-color: transparent;
}