Pozdrav, evo dio koda je ovdje, ako netko vidi u čemi je problem , unaprijed zahvaljujem
HTML
<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Full administration services</a></li>
<li><a href="#">Inventory Management</a></li>
<li><a href="#">Corporate Finance</a></li>
<li><a href="#">Accounting & Bookkeeping</a></li>
</ul>
</li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
CSS
html, body, div, span, applet, object, iframe,
h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ‘’;
content: none;
clear:both;
content:’.’;
line-height:0px;
height:0px;
display:block;
visibility:hidden;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/**** ELEMENTS ****/
#navigation {
width: 960px;
height: 40px;
margin: 10px auto;
border: #a5a5a5 solid 1px;
background: #efefef;
background: -webkit-linear-gradient(top, #efefef 0%,#dedede 50%,#d8d8d8 50%,#d3d3d3 70%,#dcdcdc 100%);
background: -moz-linear-gradient(top, #efefef 0%,#dedede 50%,#d8d8d8 50%,#d3d3d3 70%,#dcdcdc 100%);
background: -ms-linear-gradient(top, #efefef 0%,#dedede 50%,#d8d8d8 50%,#d3d3d3 70%,#dcdcdc 100%);
background: -o-linear-gradient(top, #efefef 0%,#dedede 50%,#d8d8d8 50%,#d3d3d3 70%,#dcdcdc 100%);
background: linear-gradient(to bottom, #efefef 0%,#dedede 50%,#d8d8d8 50%,#d3d3d3 70%,#dcdcdc 100%);
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: inset #9e9e9e 0px -2px 0px, inset #FFF 0px 0px 1px, rgba(0,0,0,0.15) 0px 1px 2px;
-khtml-box-shadow: inset #9e9e9e 0px -2px 0px, inset #FFF 0px 0px 1px, rgba(0,0,0,0.15) 0px 1px 2px;
-moz-box-shadow: inset #9e9e9e 0px -2px 0px, inset #FFF 0px 0px 1px, rgba(0,0,0,0.15) 0px 1px 2px;
-o-box-shadow: inset #9e9e9e 0px -2px 0px, inset #FFF 0px 0px 1px, rgba(0,0,0,0.15) 0px 1px 2px;
box-shadow: inset #9e9e9e 0px -2px 0px, inset #FFF 0px 0px 1px, rgba(0,0,0,0.15) 0px 1px 2px;
}
#navigation ul {
width: 700px;
height: 40px;
}
#navigation ul li {
float: left;
width: 100px;
height: 40px;
position: relative;
}
#navigation ul li a {
display: block;
width: 99px;
height: 12px;
padding: 14px 0px;
border-left: rgba(0,0,0,0.2) 1px solid;
-webkit-box-shadow: inset rgba(255,255,255,0.8) 0px 0px 1px;
-khtml-box-shadow: inset rgba(255,255,255,0.8) 0px 0px 1px;
-moz-box-shadow: inset rgba(255,255,255,0.8) 0px 0px 1px;
-o-box-shadow: inset rgba(255,255,255,0.8) 0px 0px 1px;
box-shadow: inset rgba(255,255,255,0.8) 0px 0px 1px;
font-family:“calibri”;
text-align: center;
font-size: 12px;
line-height: 12px;
text-decoration: none;
color: #333;
text-shadow: #FFF 0px 1px 1px;
}
#navigation ul li ul {
margin-top: 40px;
top: 35px;
width: 201px;
height: auto;
padding: 20px 0px;
position: absolute;
left: -9999px;
opacity: 0;
z-index:999;
-webkit-transition: all .2s ease;
background-color: rgba(0,0,0,0.5);
background-color: -moz-linear-gradient(top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.6) 100%);
background-color: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.5)), color-stop(100%,rgba(0,0,0,0.6)));
background-color: -webkit-linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.6) 100%);
background-color: -o-linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.6) 100%);
background-color: linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.6) 100%);
background-color: -webkit-linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.6) 100%);
-webkit-border-radius: 0px 0px 20px 20px;
-khtml-border-radius: 0px 0px 20px 20px;
-moz-border-radius: 0px 0px 20px 20px;
-o-border-radius: 0px 0px 20px 20px;
border-radius: 0px 0px 20px 20px;
-webkit-box-shadow: rgba(0,0,0,0.4) 0px 1px 2px, inset rgba(0,0,0,0.5) 0px 1px 0px, inset rgba(255,255,255,0.5) 0px 0px 3px, inset rgba(0,0,0,0.4) 0px -3px 0px, inset rgba(0,0,0,0.6) -1px 0px 0px, inset rgba(0,0,0,0.6) 1px 0px 0px;
-khtml-box-shadow: rgba(0,0,0,0.4) 0px 1px 2px, inset rgba(0,0,0,0.5) 0px 1px 0px, inset rgba(255,255,255,0.5) 0px 0px 3px, inset rgba(0,0,0,0.4) 0px -3px 0px, inset rgba(0,0,0,0.6) -1px 0px 0px, inset rgba(0,0,0,0.6) 1px 0px 0px;
-moz-box-shadow: rgba(0,0,0,0.4) 0px 1px 2px, inset rgba(0,0,0,0.5) 0px 1px 0px, inset rgba(255,255,255,0.5) 0px 0px 3px, inset rgba(0,0,0,0.4) 0px -3px 0px, inset rgba(0,0,0,0.6) -1px 0px 0px, inset rgba(0,0,0,0.6) 1px 0px 0px;
-o-box-shadow: rgba(0,0,0,0.4) 0px 1px 2px, inset rgba(0,0,0,0.5) 0px 1px 0px, inset rgba(255,255,255,0.5) 0px 0px 3px, inset rgba(0,0,0,0.4) 0px -3px 0px, inset rgba(0,0,0,0.6) -1px 0px 0px, inset rgba(0,0,0,0.6) 1px 0px 0px;
box-shadow: rgba(0,0,0,0.4) 0px 1px 2px, inset rgba(0,0,0,0.5) 0px 1px 0px, inset rgba(255,255,255,0.5) 0px 0px 3px, inset rgba(0,0,0,0.4) 0px -3px 0px, inset rgba(0,0,0,0.6) -1px 0px 0px, inset rgba(0,0,0,0.6) 1px 0px 0px;
}
#navigation ul li:hover ul {
-webkit-animation: anim .2s forwards linear;
-moz-animation: anim .2s forwards linear;
-ms-animation: anim .2s forwards linear;
-o-animation: anim .2s forwards linear;
animation: anim .2s forwards linear;
}
#navigation ul li ul li {
float: none;
height: auto;
width: 201px;
height: 20px;
}
#navigation ul li ul li a {
width: 161px;
height: 12px;
padding: 4px 20px;
font-family:“calibri”;
border-left: 0px;
background-color: transparent;
-webkit-box-shadow: none;
-khtml-box-shadow: none;
-moz-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
text-align: left;
color: #fff;
text-shadow: rgba(0,0,0,0.6) 0px -1px 1px;
}
/**** PSUEDO ELEMENTS ****/
#navigation ul li:nth-child(1) a {
border-left: 0px;
width: 100px;
-webkit-border-radius: 20px 0px 0px 20px;
-khtml-border-radius: 20px 0px 0px 20px;
-moz-border-radius: 20px 0px 0px 20px;
-o-border-radius: 20px 0px 0px 20px;
border-radius: 20px 0px 0px 20px;
}
#navigation ul li:nth-child(7) a {
-webkit-border-radius: 0px 20px 20px 0px;
-khtml-border-radius: 0px 20px 20px 0px;
-moz-border-radius: 0px 20px 20px 0px;
-o-border-radius: 0px 20px 20px 0px;
border-radius: 0px 20px 20px 0px;
}
#navigation ul li ul li:nth-child(1) a {
width: 161px;
-webkit-border-radius: 0px;
-khtml-border-radius: 0px;
-moz-border-radius: 0px;
-o-border-radius: 0px;
border-radius: 0px;
}
#navigation ul li ul li:nth-child(7) a {
-webkit-border-radius: 0px 20px 20px 0px;
-khtml-border-radius: 0px 20px 20px 0px;
-moz-border-radius: 0px 20px 20px 0px;
-o-border-radius: 0px 20px 20px 0px;
border-radius: 0px 20px 20px 0px;
}
#navigation ul li:nth-child(7):hover {
}
/**** HOVER STATES ****/
#navigation ul li:hover {
}
#navigation ul li:hover a {
background: -webkit-linear-gradient(top, rgba(220,220,220,1) 0%,rgba(196,196,196,1) 50%,rgba(186,186,186,1) 50%,rgba(189,189,189,1) 100%);
-webkit-box-shadow: inset #9e9e9e 0px -2px 0px, inset #EEE 0px 0px 1px;
-khtml-box-shadow: inset #9e9e9e 0px -2px 0px, inset #EEE 0px 0px 1px;
-moz-box-shadow: inset #9e9e9e 0px -2px 0px, inset #EEE 0px 0px 1px;
-o-box-shadow: inset #9e9e9e 0px -2px 0px, inset #EEE 0px 0px 1px;
box-shadow: inset #9e9e9e 0px -2px 0px, inset #EEE 0px 0px 1px;
}
#navigation ul li ul li:hover {
}
#navigation ul li ul li:hover a {
text-decoration: underline;
}
#navigation ul li:hover ul {
display:;
}
#navigation ul li:hover ul li a {
background-color: transparent;
-webkit-box-shadow: none;
-khtml-box-shadow: none;
-moz-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
text-shadow: rgba(0,0,0,0.6) 0px -1px 1px;
}
/**** ACTIVE STATES ****/
#navigation ul li:active {
}
#navigation ul li:active a {
background-color: rgb(92,92,92);
background-color: -moz-linear-gradient(top, rgba(92,92,92,1) 0%, rgba(117,117,117,1) 100%);
background-color: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(92,92,92,1)), color-stop(100%,rgba(117,117,117,1)));
background-color: -webkit-linear-gradient(top, rgba(92,92,92,1) 0%,rgba(117,117,117,1) 100%);
background-color: -o-linear-gradient(top, rgba(92,92,92,1) 0%,rgba(117,117,117,1) 100%);
background-color: linear-gradient(top, rgba(92,92,92,1) 0%,rgba(117,117,117,1) 100%);
-webkit-box-shadow: inset rgba(0,0,0,0.75) 0px 0px 5px;
-khtml-box-shadow: inset rgba(0,0,0,0.75) 0px 0px 5px;
-moz-box-shadow: inset rgba(0,0,0,0.75) 0px 0px 5px;
-o-box-shadow: inset rgba(0,0,0,0.75) 0px 0px 5px;
box-shadow: inset rgba(0,0,0,0.75) 0px 0px 5px;
color: #fff;
text-shadow: rgba(0,0,0,0.6) 0px 1px 2px;
}
#navigation ul li ul li:active {
}
#navigation ul li ul li:active a {
}
@-webkit-keyframes anim {
0% { left:0; opacity: 0}
100% {left: 0; top: 0; opacity: 1}
}
@-moz-keyframes anim {
0% { left:0; opacity: 0}
100% {left: 0; top: 0; opacity: 1}
}
@-ms-keyframes anim {
0% { left:0; opacity: 0}
100% {left: 0; top: 0; opacity: 1}
}
@-o-keyframes anim {
0% { left:0; opacity: 0}
100% {left: 0; top: 0; opacity: 1}
}
@keyframes anim {
0% { left:0; opacity: 0}
100% {left: 0; top: 0; opacity: 1}
}