/*
CSS Menu Style (dark background)
© System
http://qdl.scs-inc.us/?top=18557
*/
/* http://www.script-tutorials.com/demos/87/index.html */
/* main menu styles */
#qdlMenu {
display: inline-block;
width: 100%;
margin: 0px 0px 0px -10px;
padding: 0;
padding-right: 5px;
background: #335599 url("../../1stParty/Imgs/Miscellany/MenuBackGround.png") repeat-x 0 -110px;
z-index: 2;
position: fixed;
top: 0px;
font-size: 80%;
border-bottom: 1px white solid;
}
#qdlMenu li {
float: left;
position: relative;
list-style: none;
}
#qdlMenu a {
font-weight: bold;
color: #e7e5e5;
text-decoration: none;
display: block;
padding: 6px 9px;
border-radius: 10px; /*some css3*/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
text-shadow: 0 2px 2px rgba(0,0,0, .7);
}
/* selected menu element */
#qdlMenu li:hover > a {
background: #7788aa url("../../1stParty/Imgs/Miscellany/MenuBackGround.png") repeat-x 0 -20px;
color: #fff;
box-shadow: 0 2px 2px rgba(0,0,0, .7); /*some css3*/
-moz-box-shadow: 0 2px 2px rgba(0,0,0, .7);
-webkit-box-shadow: 0 2px 2px rgba(0,0,0, .7);
text-shadow: 0 2px 2px rgba(255,255,255, 0.7);
}
/* sublevels */
#qdlMenu ul li:hover a, #qdlMenu li:hover li a {
background: none;
border: none;
color: #fff;
}
#qdlMenu ul li a:hover {
background: #335599 url("../../1stParty/Imgs/Miscellany/MenuBackGround.png") repeat-x 0 -100px;
color: #1C4967;
border-radius: 10px; /*some css3*/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
text-shadow: 0 2px 2px rgba(0,0,0, 0.7);
}
#qdlMenu ul li: first-child > a {
-moz-border-radius-topleft: 10px; /*some css3*/
-moz-border-radius-topright: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
}
#qdlMenu ul li: last-child > a {
-moz-border-radius-bottomleft: 10px; /*some css3*/
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
}
/* drop down */
#qdlMenu li:hover > ul {
opacity: 1;
visibility: visible;
}
#qdlMenu ul {
visibility: hidden;
padding: 0;
width: 22ch;
position: absolute;
z-index: 2;
background: #1C4967;
border: 1px solid #7788aa;
border-radius: 10px; /*some css3*/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0 2px 2px rgba(0,0,0, .5);
-moz-box-shadow: 0 2px 2px rgba(0,0,0, .5);
-webkit-box-shadow: 0 2px 2px rgba(0,0,0, .5);
-moz-transition: opacity .25s linear, visibility .1s linear .1s;
-webkit-transition: opacity .25s linear, visibility .1s linear .1s;
-o-transition: opacity .25s linear, visibility .1s linear .1s;
transition: opacity .25s linear, visibility .1s linear .1s;
}
#qdlMenu ul li {
float: none;
margin: 0;
}
#qdlMenu ul a {
font-weight: normal;
text-shadow: 0 2px 2px rgba(255,255,255, 0.7);
}
#qdlMenu ul ul {
left: 20ch;
top: 0px;
}
#qdlMenu ul ul a {
padding: 6 15;
}
.grayMenuItem {
color: gray;
}
|