NOTE: I couldn't judge the suitable category to post this topic on. So I just posted here and apologies for that though.
Hello everyone, I've just established following CSS menu design but it only works in Mozilla Firefox in fact I've added webkit thingy. I vaguely know webkit and moz thingy in it; would be appreciated if someone will provide the amendment with explanation.
ul#menunav,ul#menunav ul{
margin:2;list-style:none;padding:0;background-color:#000;background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0.0),rgba(255,255,255,0.38)); background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.3),rgba(255,255,255,0.0)); background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.38)),to(rgba(255,255,255,0.20))); background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(255,255,255,0.20));background-repeat:repeat;border-width:1px;border-style:solid;border-color:#fff;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:100px;}
ul#menunav ul{
display:none;position:absolute;left:0;top:100%;-moz-box-shadow:1.4px 1.4px 2px #B1B1B1;-webkit-box-shadow:1.4px 1.4px 2px #B1B1B1;box-shadow:1.4px 1.4px 2px #B1B1B1;background-color:#202020;background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0.16),rgba(255,255,255,0)); background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.16),rgba(255,255,255,0)); background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.16)),to(rgba(255,255,255,0))); background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0.16),rgba(255,255,255,0));border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;border-color:#333;padding:0;}
ul#menunav li:hover>*{
display:block;}
ul#menunav li{
position:relative;display:block;white-space:nowrap;font-size:2;float:left;}
ul#menunav li:hover{
z-index:1;}
ul#menunav{
font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;padding:6px 6px 6px 0;
*display:inline;}
* html ul#menunav li a{
display:inline-block;}
ul#menunav>li{
margin:0 0 0 6px;}
ul#menunav ul>li{
margin:6px 0 0;}
ul#menunav a:active, ul#menunav a:focus{
outline-style:none;}
ul#menunav a{
display:block;vertical-align:middle;text-align:center;text-decoration:none;font:bold 13px "arial",cursive;color:#ccc;cursor:pointer;padding:15px 20px;background-color:;background-repeat:repeat;border-width:0px;border-style:solid;border-color:transparent;}
ul#menunav ul li{
float:none;margin:0;}
ul#menunav ul a{
text-align:center;}
ul#menunav li:hover>a,ul#menunav li a.pressed{
background-color:#2E64FE;border-color:;border-style:solid;color:#000;text-decoration:none;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=#60FFFFFF,endColorstr=#B355AA00)}
ul#menunav li.navbar>a{
background-color:;border-width:2px 0 0 0;border-style:solid;border-color:;border-radius:260px;-moz-border-radius:16px;-webkit-border-radius:16px;font:bolder 15px "arial",arial;color:#ffffff;text-decoration:none;text-shadow:0 3px 5px #000;}
ul#menunav li.navbar:hover>a,ul#menunav li.navbar a.pressed{
background-color:#2E64FE;background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0.77),rgba(85,170,0,0.7)); background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.16),rgba(85,170,0,0.0)); background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.77)),to(rgba(85,170,0,0.0))); background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0.77),rgba(85,170,0,0.7));border-style:none;border-color:#F7D358;color:#fff;text-decoration:none;text-shadow:0 1px 0 #424242;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=#C6FFFFFF,endColorstr=#fff;)}
ul#menunav li.navbarsub>a{
border-radius:0px 0px 0 0;-moz-border-radius:9px 9px 0 0;-webkit-border-radius:9px;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;}
ul#menunav li.sublast>a{
border-radius:0 0 0px 0px;-moz-border-radius:9 0 9px 9px;-webkit-border-radius:0;-webkit-border-bottom-right-radius:9px;-webkit-border-bottom-left-radius:9px;}
* {
margin:0
}
I've executed those code to the online web domain but can't say it in public in order of obeying and abiding the rules. I've heard there is an online codes hosting for showing someone their work, I am also wondering if someone provides me URL of it so that I can show how does it actually look like.
Thanks for reading and hoping someone fix this issue.
- Tayab.
