123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
body, nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav {
display: inline-block;
position: fixed;
width: 100%;
text-align: center;
background-color: #111;
vertical-align: top;
top: -1px;
opacity: 1;
transition: 0.6s;
}
nav:hover {
opacity: 1;
transition: 0.01s;
background-color: #111;
transition: 0.3s;
}
.nav a {
display: block;
background: #111;
color: #fff;
text-decoration: none;
padding: 0.7em 1.7em;
text-transform: uppercase;
font-size: 85%;
letter-spacing: 3px;
position: relative;
}
.nav{
vertical-align: top;
display: inline-block;
}
.nav li {
position: relative;
}
.nav > li {
float: left;
margin-right: 1px;
}
.nav li:hover > a {
transition: 0.3s;
background-color:#302f2f;
color: #40d23b;
}
.nav ul {
position: absolute;
white-space: nowrap;
z-index: 1;
left: -99999em;
background-color: #000;
border: 2px solid #81D4FA;
border-top: none;
}
.nav > li:hover > ul {
left: auto;
min-width: 100%;
}
.nav > li li:hover > ul {
left: 100%;
top:-1px;
}
.nav > li:hover > a:first-child:nth-last-child(2):before {
border: 5px solid transparent;
}
.nav li li:hover > a:first-child:nth-last-child(2):before {
border: 5px solid transparent;
right: 10px;
}
.prve{
max-width:125px;
min-width: 90px;
border: 2px solid #81D4FA;
border-bottom: none;
border-top: none;
}
.druhe {
max-width: 14px;
min-width: 110px;
border-right: 2px solid #81D4FA;
}