margin:0; padding:0; } /*---------------------------- html{ background:url('../images/fuqaha_bg.png'); } body{ background:url('../images/bg_head1.jpg') repeat-x top center, url('../img/bg_vert1.jpg') repeat-x; min-height:500px; font:14px/1.3 'Segoe UI',Arial, sans-serif; color:#FFF; padding:5px; } CSS3 Animated Navigation -----------------------------*/ .fancyNav{ /* Affects the UL element */ overflow: hidden; display: inline-block; } .fancyNav li{ /* Specifying a fallback color and we define CSS3 gradients for the major browsers: */ background-color: #f0f0f0; background-image: -webkit-gradient(linear,left top, left bottom,from(#fefefe), color-stop(0.5,#f0f0f0), color-stop(0.51, #e6e6e6)); background-image: -moz-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%); background-image: -o-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%); background-image: -ms-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%); background-image: linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%); border-right: 1px solid rgba(9, 9, 9, 0.125); /* Adding a 1px inset highlight for a more polished efect: */ box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset; -moz-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset; -webkit-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset; position:relative; float: left; list-style: none; } .fancyNav li:after{ /* This creates a pseudo element inslide each LI */ content:'.'; text-indent:-9999px; overflow:hidden; position:absolute; width:100%; height:100%; top:0; left:0; z-index:1; opacity:0; /* Gradients! */ background-image:-webkit-gradient(linear, left top, right top, from(rgba(168,168,168,0.5)),color-stop(0.5,rgba(168,168,168,0)), to(rgba(168,168,168,0.5))); background-image:-moz-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5)); background-image:-o-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5)); background-image:-ms-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5)); background-image:linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5)); /* Creating borders with box-shadow. Useful, as they don't affect the size of the element. */ box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff; -moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff; -webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff; /* This will create a smooth transition for the opacity property */ -moz-transition:0.25s all; -webkit-transition:0.25s all; -o-transition:0.25s all; transition:0.25s all; } /* Treating the first LI and li:after elements separately */ .fancyNav li:first-child{ border-radius: 4px 0 0 4px; } .fancyNav li:first-child:after, .fancyNav li.selected:first-child:after{ box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff; -moz-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff; -webkit-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff; border-radius:4px 0 0 4px; } .fancyNav li:last-child{ border-radius: 0 4px 4px 0; } /* Treating the last LI and li:after elements separately */ .fancyNav li:last-child:after, .fancyNav li.selected:last-child:after{ box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff; -moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff; -webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff; border-radius:0 4px 4px 0; } .fancyNav li:hover:after, .fancyNav li.selected:after, .fancyNav li:target:after{ /* This property triggers the CSS3 transition */ opacity:1; } .fancyNav:hover li.selected:after, .fancyNav:hover li:target:after{ /* Hides the targeted li when we are hovering on the UL */ opacity:0; } .fancyNav li.selected:hover:after, .fancyNav li:target:hover:after{ opacity:1 !important; } /* Styling the anchor elements */ .fancyNav li a{ color: #5d5d5d; display: inline-block; font: 20px/1 AR JULIAN,Arial,sans-serif; padding: 10px 20px 12px; position: relative; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6); z-index:2; text-decoration:none !important; white-space:nowrap; } .fancyNav a.homeIcon{ background:url('../images/home.png') no-repeat center center; display: block; overflow: hidden; padding-left: 18px; padding-right: 18px; text-indent: -9999px; width: 20px; } /*------------------------- Demo Page Styles --------------------------*/ header{ display:block; margin-top:20px; position:relative; } nav{ display: block; margin: 80px auto 0; text-align: center; width: 100%; } footer{ background:url('../images/bg_footer1.jpg') repeat-x top center, url('../images/bg_vert1.jpg') repeat-x; font-size: 15px; line-height: 1.6; padding: 10px 10px 0; text-align: center; color:black; } footer b{ color: #888888; display: block; font-size: 10px; font-weight: normal; } a, a:visited { text-decoration: none; outline: none; color: #006633; } a:hover{ text-decoration: underline; color: #FF9900; } /* Webfont link */ @import url(http://fonts.googleapis.com/css?family=Unica+One); /* Plugin base styles */ .slider { position: relative; width: 100%; overflow: hidden; } .slides { position: relative; padding: 0; list-style: none; letter-spacing: 0; word-spacing: 0; font-size: 0; -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0,0,0); } .slides li { display: inline-block; -webkit-backface-visibility: hidden; } .slides li img { width: 100%; height: auto; } /* Non-plugin styles */ * { margin: 0; padding: 0; } body { position: relative; width: 90%; max-width: 1000px; margin: 0 auto; } .slide-nav { position: absolute; bottom: 20px; right: 20px; z-index: 1; } .slide-nav ul { letter-spacing: 0; word-spacing: 0; font-size: 0; } .slide-nav li { display: inline-block; } .slide-nav li a { display: block; color: #444; background: #FFF; text-decoration: none; border-radius: 50%; width: 26px; height: 26px; line-height: 26px; font-size: 12px; text-align: center; margin: 0 0 0 6px; } .slide-nav li a.active { color: #DEBB1E; } ul ul li{ float:none !important; } ul ul{ overflow: hidden; padding:0; display:none; position:absolute; /* updated */ z-index:2; /* updated */ } ul li:hover ul{ display:block; }