Css_code

CSS code for dropdown menu in Blogger.com

.menuH { /* You will get totally diffrent menu alignment and layout by
    setting following margin, width, and float with different values. For
    detailed instruction please visit
    www.menucool.com/horizontal/change-menu-alignment */ margin: 0; width: 100%;
    float:none; /*following "behavior" works for IE6, IE7, and IE8. Other
    browsers will ignore it.*/ /*Note: Unlike image file, htc file path is
    relative to the page, not this CSS file.*/ behavior:
    url("/horizontal/menuh/cssmenu.htc"); height: 36px; background: #D4D4D4
    url(bg.gif) repeat-x 0 0; border: 1px solid #BBB; position:relative;
    /*! for IE htc
    */ z-index:4;
    /*H2*/ font-family: Arial, Helvetica, sans-serif; list-style: none; padding:
    0; } .
    .menuH li { padding: 0; /*margin: 0; display: block; TODO: I am testing them
    if they can be removed. If can, remove them.*/ float: left; height: 36px;
    position: relative;/*move it into .menuH if you want submenu to be
    positioned relative to the whole menu instead of this li element*/ }
    .menuH li:hover, .menuH li.onhover { background: white url(bg.gif) repeat-x
    0 -48px; } ul.menuH a { padding: 0 30px; line-height: 36px; /*Note: keep
    this value the same as the height of .menuH and .menuH li */ font-size:
    12px; font-weight: bold; color: black; display: block; outline: 0;
    text-decoration: none; }
    .menuH a:hover { color: red; }
    .menuH a.arrow { background: url(arrow.gif) no-repeat right center;
    } .menuH ul a.arrow { background: url(right.gif) no-repeat 97% center; }
    /*Used to align a top-level item to the right*/ .
    menuH .menuRight { float: right; margin-right: 0px; } /*for the top-level
    separators*/
    .menuH li.separator { font-size:0; overflow:hidden; border-left:1px solid
    #F7F7F7; border-right:1px solid #BBBBBB; } /*######sub level###########*/
    ul.menuH ul { width:200px; position: absolute; left: -9999px; border: 1px
    solid #DDD; border-top: 0; background: #FFF; text-align: left; list-style:
    none; margin: 0; /*Following 1px(padding-right) will determine how much it
    is overlapped by the sub-sub-menu */ padding: 0 1px 10px 0;
    box-sizing:content-box; } .menuH li li { float: none; white-space:nowrap;
    height: 26px; } .
    menuH li li:hover, .menuH li li.onhover { background:#f7f7f7; }
    .menuH ul a { padding: 0 20px; line-height: 26px; font-size: 0.9em;
    font-weight: normal; color: #0066CC; text-align: left; } .menuH ul a:hover {
    color: red; } .menuH li:hover ul, .menuH li.onhover ul { left: -1px;/*Use
    this property to change offset of the dropdown*/ top: auto; } .menuH
    li:hover .dropToLeft, .menuH li.onhover .dropToLeft { left: auto; right:
    -1px; top: auto; } .menuH ul ul { border-top: 1px solid #DDD; } .menuH
    li:hover ul ul, .menuH li:hover ul ul ul, .menuH li:hover ul ul ul ul,
    .menuH li.onhover ul ul, .menuH li.onhover ul ul ul, .menuH li.onhover ul ul
    ul ul { left: -9999px; top:0; } .menuH li li:hover ul, .menuH li li li:hover
    ul, .menuH li li li li:hover ul,
    .menuH li li.onhover ul, .menuH li li li.onhover ul, .menuH li li li
    li.onhover ul { left: 200px; } /*####### special effects ##########*/
    .decor1 { -moz-border-radius: 3px; /* Firefox */ -webkit-border-radius: 3px;
    /* Safari and Chrome */ border-radius: 3px; /* Opera 10.5+, future browsers,
    and now also our behavior htc file */ -moz-box-shadow: 0px 1px 4px #eee; /*
    Firefox */ -webkit-box-shadow: 0px 1px 4px #eee; /* Safari and Chrome */
    box-shadow: 0px 1px 4px #eee; /* Opera 10.5+, future browsers and IE6+ using
    our behavior htc file */ } .menuH ul { -moz-border-radius: 0px 0px 4px 4px;
    -webkit-border-radius: 0px 0px 4px 4px; border-radius: 0px 0px 4px 4px;
    -moz-box-shadow: 0px 6px 6px #CCC; -webkit-box-shadow: 0px 6px 6px #CCC;
    box-shadow: 0px 6px 6px #CCC; /*for older IE browsers, the htc file fix will
    disable this feature when box-shadow was also applied.*/
    filter:alpha(opacity=90); opacity: 0.90; /* Gradient background */
    background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE); background:
    -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#EEEEEE)); }