A CSS powered Drop Down Menu for Blogger.
#css-menu {
background-attachment: scroll;
background-clip: border-box;
background-color: #FF7E00;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit0onU2dXbo63ZHU2XkBcXz_VEOhmbditk5cR4BhEAyb7CcBCbLwsUXBVc7_HWqsiR8Gui7I0DOjUfFV6l0F9lsrWxpBi89pnQu3xZ9LPriMVzq58K0yi6M5d_fGaj4hVFXqa7Z_kp9Fk/s26/bg-nav-foot.jpg");
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
height: 46px;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
}
.nav {
float: left;
height: 26px;
line-height: 1;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
z-index: 99;
}
.nav a {
-moz-text-blink: none;
-moz-text-decoration-color: -moz-use-text-color;
-moz-text-decoration-line: none;
-moz-text-decoration-style: solid;
color: #111111;
display: block;
position: relative;
z-index: 100;
}
.nav li {
float: left;
margin-bottom: 0;
margin-left: 0;
margin-right: 5px;
margin-top: 0;
}
.nav li a {
-moz-font-feature-settings: normal;
-moz-font-language-override: normal;
-moz-text-blink: none;
-moz-text-decoration-color: -moz-use-text-color;
-moz-text-decoration-line: none;
-moz-text-decoration-style: solid;
-x-system-font: none;
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL7_pht_NsCzQW5bpWDI03jXLzq2DcjkdIZTK3mtQC9y_2pK0SIb2tREM-qRLRA8JAvuWcbEj79f6kxFpH6F1V3t2EzujIqYN1BmeFnyQoqT6dfNPBfVaKYrJOT-YS7Ff_AklNjHuGGMw/s48/li-right.jpg");
background-origin: padding-box;
background-position: right top;
background-repeat: no-repeat;
background-size: auto auto;
font-family: Arial,serif;
font-size: 12px;
font-size-adjust: none;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: bold;
line-height: 15px;
padding-bottom: 6px;
padding-left: 10px;
padding-right: 0;
padding-top: 6px;
}
.nav li a span {
color: #FFFFFF;
font-weight: bold;
padding-bottom: 4px;
padding-left: 0;
padding-right: 12px;
padding-top: 5px;
}
.nav li.current-cat a, .nav li.current-cat a, .nav li:hover a, .nav li a:hover {
-moz-font-feature-settings: normal;
-moz-font-language-override: normal;
-moz-text-blink: none;
-moz-text-decoration-color: -moz-use-text-color;
-moz-text-decoration-line: none;
-moz-text-decoration-style: solid;
-x-system-font: none;
color: #FFFFFF;
font-family: Arial,serif;
font-size: 12px;
font-size-adjust: none;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 15px;
margin-bottom: 0;
}
.nav li:hover span, .nav li a:hover span {
font-weight: bold;
}
.nav li.current-cat a {
background-attachment: scroll;
background-clip: border-box;
background-color: #111111;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjRs9jWJhcoAuKghYYRiSf6eBbTQdDt8TwfYFEebe1heGNaohKdi8dXpGupGyGZcyRZSHj_PiCBB8Y4rF4eBvcV3KmoEm22tMFsmLF2vAeyp-o_z8SbryPtnzw0W7fODCDaToQ0rUF2GA/s101/hnjn.gif");
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat-x;
background-size: auto auto;
color: #EEEEEE;
height: 16px;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: -1px;
padding-left: 10px;
padding-top: 7px;
width: 100px;
}
.nav li.current-cat a span {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglYxrY4LHGHUgixLgBCkPvKxQICZErBT7uIWbeDPV2127jZ7cbXQ6pHJTB1KWsFIpFUOutaX5JhUqWWtfoTPuK53laJ_wBPTYldsPjf-z7r8P9cf5m2Juuo2n9jZf5MzOlpLZOvystoHo/s18/hbhjs.png");
background-origin: padding-box;
background-position: 0 center;
background-repeat: no-repeat;
background-size: auto auto;
padding-left: 20px;
}
.nav li.news:hover, .nav li.news:hover ul {
background-color: black;
}
.nav li.news1:hover, .nav li.news1:hover ul {
background-color: #017CB5;
}
.nav li.news1:hover ul li {
border-bottom-color: #014F73;
border-bottom-style: solid;
border-bottom-width: 1px;
border-top-color: #038BCA;
border-top-style: solid;
border-top-width: 1px;
}
.nav li.news2:hover, .nav li.news2:hover ul {
background-color: #A92267;
}
.nav li.news2:hover ul li {
border-bottom-color: #701544;
border-bottom-style: solid;
border-bottom-width: 1px;
border-top-color: #C72B7B;
border-top-style: solid;
border-top-width: 1px;
}
.nav li.news3:hover, .nav li.news3:hover ul {
background-color: #0F5594;
}
.nav li.news3:hover ul li {
border-bottom-color: #0A3963;
border-bottom-style: solid;
border-bottom-width: 1px;
border-top-color: #166BB7;
border-top-style: solid;
border-top-width: 1px;
}
.nav li.news4:hover, .nav li.news4:hover ul {
background-color: #693770;
}
.nav li.news4:hover ul li {
border-bottom-color: #45254A;
border-bottom-style: solid;
border-bottom-width: 1px;
border-top-color: #9A52A4;
border-top-style: solid;
border-top-width: 1px;
}
.nav li.news5:hover, .nav li.news5:hover ul {
background-color: #3B6A06;
}
.nav li.news5:hover ul li {
border-bottom-color: #264404;
border-bottom-style: solid;
border-bottom-width: 1px;
border-top-color: #4D8909;
border-top-style: solid;
border-top-width: 1px;
}
.nav li.news6:hover, .nav li.news6:hover ul {
background-color: #46505C;
}
.nav li.news6:hover ul li {
border-bottom-color: #252A30;
border-bottom-style: solid;
border-bottom-width: 1px;
border-top-color: #5C6978;
border-top-style: solid;
border-top-width: 1px;
}
.nav li.news7:hover, .nav li.news7:hover ul {
background-color: #1B227D;
}
.nav li.news7:hover ul li {
border-bottom-color: #10154B;
border-bottom-style: solid;
border-bottom-width: 1px;
border-top-color: #212994;
border-top-style: solid;
border-top-width: 1px;
}
.nav li.news8:hover, .nav li.news8:hover ul {
background-color: #9A1313;
}
.nav li.news8:hover ul li {
border-bottom-color: #650D0D;
border-bottom-style: solid;
border-bottom-width: 1px;
border-top-color: #B81919;
border-top-style: solid;
border-top-width: 1px;
}
.nav li.news9:hover, .nav li.news9:hover ul {
background-color: #A92267;
}
.nav li.news9:hover ul li {
border-bottom-color: #741847;
border-bottom-style: solid;
border-bottom-width: 1px;
border-top-color: #C52C7A;
border-top-style: solid;
border-top-width: 1px;
}
.nav li.news1:hover ul li.first, .nav li.news2:hover ul li.first, .nav li.news3:hover ul li.first, .nav li.news4:hover ul li.first, .nav li.news5:hover ul li.first, .nav li.news6:hover ul li.first, .nav li.news7:hover ul li.first, .nav li.news8:hover ul li.first, .nav li.news9:hover ul li.first {
border-top-color: -moz-use-text-color;
border-top-style: none;
border-top-width: 0;
}
.nav li.news1:hover ul li.last, .nav li.news2:hover ul li.last, .nav li.news3:hover ul li.last, .nav li.news4:hover ul li.last, .nav li.news5:hover ul li.last, .nav li.news6:hover ul li.last, .nav li.news7:hover ul li.last, .nav li.news8:hover ul li.last, .nav li.news9:hover ul li.last {
border-bottom-color: -moz-use-text-color;
border-bottom-style: none;
border-bottom-width: medium;
}
.nav li a:hover, .nav li a:active {
color: #B80000;
}
.nav li ul {
background-attachment: scroll;
background-clip: border-box;
background-color: #FFFFFF;
background-image: none;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
left: -999em;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin-bottom: 0;
margin-left: 0;
margin-right: 1px;
margin-top: 0;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 0;
padding-top: 5px;
position: absolute;
width: 168px;
z-index: 999999;
}
.nav .last ul {
background-attachment: scroll;
background-clip: border-box;
background-color: #FFFFFF;
background-image: none;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
margin-bottom: 0;
margin-left: 1px;
margin-right: 1px;
margin-top: 0;
position: absolute;
width: 168px;
z-index: 999;
}
.nav li ul li {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: none;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
border-bottom-color: -moz-use-text-color;
border-bottom-style: none;
border-bottom-width: medium;
border-image-outset: 0 0 0 0;
border-image-repeat: stretch stretch;
border-image-slice: 100% 100% 100% 100%;
border-image-source: none;
border-image-width: 1 1 1 1;
border-left-color-ltr-source: physical;
border-left-color-rtl-source: physical;
border-left-color-value: -moz-use-text-color;
border-left-style-ltr-source: physical;
border-left-style-rtl-source: physical;
border-left-style-value: none;
border-left-width-ltr-source: physical;
border-left-width-rtl-source: physical;
border-left-width-value: medium;
border-right-color-ltr-source: physical;
border-right-color-rtl-source: physical;
border-right-color-value: -moz-use-text-color;
border-right-style-ltr-source: physical;
border-right-style-rtl-source: physical;
border-right-style-value: none;
border-right-width-ltr-source: physical;
border-right-width-rtl-source: physical;
border-right-width-value: medium;
border-top-color: -moz-use-text-color;
border-top-style: none;
border-top-width: medium;
clear: both;
margin-left: 0;
padding-bottom: 5px;
padding-left: 0;
padding-right: 0;
padding-top: 5px;
width: 160px;
}
.nav li ul li a {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: none;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
color: #FFFFFF !important;
font-size: 12px;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
text-transform: none;
}
.nav li:hover ul li a {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: none;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
font-weight: bold;
}
.nav li:hover, .nav li.hover {
position: static;
}
.nav li:hover ul ul, .nav li:hover ul ul ul, .nav li:hover ul ul ul ul {
}
.nav li:hover ul, .nav li li:hover ul, .nav li li li:hover ul, .nav li li li li:hover ul {
left: auto;
}
A CSS powered Drop Down Menu for Blogger.
