Thursday, 11 July 2013

Dropdown Menu Colors





Code:

apply this hack manually by adding below CSS code just above/before ]]></b:skin> tag in your template,

#css-menu {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #FF7E00;
    background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6EssyTyPDfmRN9-xzDs3GAbhdDvxHreYX9Gm6Y0iFsleY6tGbHenVYpPbfgcUAy3c3XkuWIso-7b-VU0wY6DsSkg6_DRZgsmG7zjB8e8CAV_2htj4ZwXd-aKc33XHtYSOa-wLLAAosW4/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/AVvXsEgYCL9xO4cQLlKmWXSDz4moGhx5aqaKtXYy-b1EazdQFKvN3g7dUZj9-RdRr2HFkwzsyTZD38FPDwmuh-hDcIX1nP67X4p6I2DUmx3Ydy-ZKji9kf02BipgiHeejgntoJpMZ9uh4GLAhOI/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/AVvXsEi3wig6oiNNNLOiIz1fDodtTI0vA8YESm9ovMsqfJAFN9dBfMYAd2rlGa6djjlnUEvyAkHsnlfcJoL0-_9cq6otJKIOVYogSufYegtGQS3Gz1feLy6YqJrFtYQ24ENOyErMuTclsUvrPGQ/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/AVvXsEhDTA4IJ_XxB9uJ3_ZU6jnKGHOaK2lxeRzCXM4XYJYLCd_GaMb5nkQcRKrAQHDz3eWYXQbf7i4oUVVxuOBrZl0_KdnV8RxRAXUKLhJJgJ_FPMCbnHwwWaofWdo6B-RQ3nPFxEs93r1EUDo/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;
}
HTML 
 <div id='css-menu'>
<ul class='nav'>
<li class='current-cat iconhome'><a href='/'><span>Home</span></a></li>
<li class='news1'><a href='#'><span>Css menu 1</span></a>
<ul class='children'>
<li class='first'><a href='#'>Submenu 1.1</a></li>
<li><a href='#'>Submenu 1.2</a></li>
<li><a href='#'>Submenu 1.3</a></li>
<li><a href='#'>Submenu 1.4</a></li>
<li><a href='#'>Submenu 1.5</a></li>
<li class='last'><a href='#'>Submenu 1.6</a></li>
</ul>
</li>
<li class='news2'><a href='#'><span>Css menu 2</span></a>
<ul class='children'>
<li class='first'><a href='#'>Submenu 2.1</a></li>
<li><a href='#'>Submenu 2.2</a></li>
<li><a href='#'>Submenu 2.3</a></li>
<li><a href='#'>Submenu 2.4</a></li>
<li><a href='#'>Submenu 2.5</a></li>
<li class='last'><a href='#'>Submenu 2.6</a></li>
</ul>
</li>
<li class='news3'><a href='#'><span>Css menu 3</span></a>
<ul class='children'>
<li class='first'><a href='#'>Submenu 3.1</a></li>
<li><a href='#'>Submenu 3.2</a></li>
<li><a href='#'>Submenu 3.3</a></li>
<li><a href='#'>Submenu 3.4</a></li>
<li><a href='#'>Submenu 3.5</a></li>
<li class='last'><a href='#'>Submenu 3.6</a></li>
</ul>
</li>
<li class='news4'><a href='#'><span>Css menu 4</span></a>
<ul class='children'>
<li class='first'><a href='#'>Submenu 4.1</a></li>
<li><a href='#'>Submenu 4.2</a></li>
<li><a href='#'>Submenu 4.3</a></li>
<li><a href='#'>Submenu 4.4</a></li>
<li><a href='#'>Submenu 4.5</a></li>
<li class='last'><a href='#'>Submenu 4.6</a></li>
</ul>
</li>
<li class='news5'><a href='#'><span>Tên menu 5 </span></a>
<ul class='children'>
<li class='first'><a href='#'>Submenu 5.1</a></li>
<li><a href='#'>Submenu 5.2</a></li>
<li><a href='#'>Submenu 5.3</a></li>
<li><a href='#'>Submenu 5.4</a></li>
<li><a href='#'>Submenu 5.5</a></li>
<li class='last'><a href='#'>Submenu 5.6</a></li>
</ul>
</li>
<li class='news6'><a href='#'><span>Css menu 6</span></a>
<ul class='children'>
<li class='first'><a href='#'>Submenu 6.1</a></li>
<li><a href='#'>Submenu 6.2</a></li>
<li><a href='#'>Submenu 6.3</a></li>
<li><a href='#'>Submenu 6.4</a></li>
<li><a href='#'>Submenu 6.5</a></li>
<li class='last'><a href='#'>Submenu 6.6</a></li>
</ul>
</li>
<li class='news7'><a href='#'><span>Css menu 7</span></a>
<ul class='children'>
<li class='first'><a href='#'>Submenu 7.1</a></li>
<li><a href='#'>Submenu 7.2</a></li>
<li><a href='#'>Submenu 7.3</a></li>
<li><a href='#'>Submenu 7.4</a></li>
<li><a href='#'>Submenu 7.5</a></li>
<li class='last'><a href='#'>Submenu 7.6</a></li>
</ul>
</li>
<li class='news8'><a href='#'><span>Css menu 8</span></a>
<ul class='children'>
<li class='first'><a href='#'>Submenu 8.1</a></li>
<li><a href='#'>Submenu 8.2</a></li>
<li><a href='#'>Submenu 8.3</a></li>
<li><a href='#'>Submenu 8.4</a></li>
<li><a href='#'>Submenu 8.5</a></li>
<li class='last'><a href='#'>Submenu 8.6</a></li>
</ul>
</li>
</ul>
<div class='clear'/>
</div>





Dropdown Menu Colors,FBgadgets


Related Post for Dropdown Menu Colors

  • MULTI COLOR LABEL CLOUD WIDGET ---------------------------------------------------------------------------------------------------- Read More: http://fbgadgets.blogspot.co.uk/2014/06/label-widget-rainbowmu…
  • RELATED POST WIDGET LIST WITHOUT THUMBNAIL ------------------------------------------------------------------------------------------------------- FIND HEAD  </head> TAG AND PASTE BELOW CODE WHEN W…
  • IMAGE UPLOAD WITH JAVA WITHOUT PHP CODE ------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE IN NOTE PAD AND SAVE IN HTML FILE -----------…
  • BUTTON CHANGE INTO DROPDOWN MENU ----------------------------------------------------------------------------------------------------------------- DIV TAG DROPDOWN MENU https://www.youtube.com/watc…
  • MULTI COLOR -------------------------------------------------------------------------------------------------------------- Colors in alphabetical order A-F https://en.wikipedia.org/wiki/Li…
  • IMAGE UPLOAD WITH JAVA WITH PHP CODE ------------------------------------------------------------------------------------------------------ CREATE FOLDER AND CREATE AND SAVE FILES ONE BY ONE IN THIS FOLDER &nb…
  • DROP DOWN MENU EXAMPLES --------------------------------------------------------------------------------------- USE THIS CODE short code css menu Different Color for Menu Tabs ----------------------…
  • Bread Crumb Navigation Menu Guardian Style --------------------------------------------------------------------------------- CODE BELOW ---------------------------------------------------------------------------------…
  • SCREEN TO GIF ------------------------------------------------------------------------------------------------------------------ Read More:  3:30 PDF HTML IMAGE CONVERTER HD…
  • CSS SYNTAX HIGHLIGHT CHANGE IN NOTEPAD++ SYNTAX HIGHLIGHTER ------------------------------------------------------------------------------------------------------------------- SYNTAX HIGHLIGHTER LINKS -----------------------------------…
  • NOTEPAD++ REMOVE UNWANTED LINES ------------------------------------------------------------------------------------------------------------------------------------------------------------ STEP NO : 1 1- CT…
  • BOOTSNIPP LOGIN SIGNUP FORM ----------------------------------------------------------------------------------------------------------- READ MORE: http://bootsnipp.com/tags/login http://bootsnipp.com/s…
  • JAVA FILE MAKE & SAVE IN NOTE PAD CLICK AND OPEN NOTE PAD IN WNDOW MENU BAR -------------------------------------------------------------------------------------------------------- COPY…
  • NOTE PAD ++ SYNTAX HIGHLIGHTER FOR BLOGGER POST --------------------------------------------------------------------------------------------------------------------- NOTE PAD ++ SYNTAX HIGHLIGHTER FOR BLOGGER POST https://…
  • DRAG AND DROP WITH IMAGE ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogsp…
Posted by on Thursday, 11 July 2013 at 03:10
Labels: , ,

0 comments:

Post a Comment

:) :)) ;(( :-) =)) ;( ;-( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ $-) (b) (f) x-) (k) (h) (c) cheer
Click to see the code!
To insert emoticon you must added at least one space before the code.

Subscribe to: Post Comments (Atom)
FB Gadgets | Template Designed by Fatakat PhotosCoolBThemes.com
Code by : paid web directory

https://www.google.co.uk/search?q=site%3Ablogspot.com+fbgadgets