Drop Down Menu Black Pada Blog Dengan JQuery

CSS

#top-wrapper {
    height:44px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwHIetKN9BWvsDS2nAvadAgHmMKx1WPiPrd0ZPKxJa_0Kmu6DYoNr8VGCNKaD-t9dmucJg7d-e0ctmjgwQlWK_rgoocp6sF2Cb6YYQiiAlc3mHdWxHLl5ql0QzGB-wb_j6vZU0y2e0mGQ/s1600/navbar-bg.png) repeat-x;
    width: 960px;
    margin: 0 auto;
    padding: 0 auto;
    border-bottom: 1px solid #f89c21;
}

#topbar {
    width: 960px;
    height: 27px;
    margin: 0 auto;
}

#top {
    width: 100%;
}

#top,#top ul {
    list-style: none;
    font-family: Arial, serif;
    margin: 0;
    padding: 0;
}

#top a {
    display: block;
    text-decoration: none;
    font: normal 11px Arial;
    text-transform: none;
    color: #CECECF;
    border-right: 1px solid #484747;
    border-left: 1px solid #191919;
    padding: 7px 10px 7px;
}

#top a.arrow {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhICd5if59llKdAoIP7FLbgYJtkm3ftVPK6Mqc-ocr_IbIv7bhmNkvu1yPMFafuWIGvFXt7czG8F81mie4WkLHffNKLyC24C38NBxCMr8pLDCmm7FWezeoqw1m2jaXICS-RTa4_f3seTFk/s1600/arrow_white.gif);
    background-repeat: no-repeat;
    background-position: right center;
    padding: 7px 24px 7px 10px;
}

#top li {
    float: left;
    position: static;
    width: auto;
}

#top li ul,#top ul li {
    width: 170px;
}

#top ul li a {
    text-align: left;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    text-transform: none;
    font-family: Arial;
    border: none;
    padding: 5px 10px;
}

#top li ul {
    z-index: 100;
    position: absolute;
    display: none;
    background: #222;
    padding-bottom: 0px;
    -moz-box-shadow: 0 2px 2px rgba(0,0,0,0.6);
    -webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.6);
}

#top li:hover a,#top a:active,#top a:focus,#top li.hvr a {
    background-color: #222;
    color: #fff;
}

#top li:hover ul,#top li.hvr ul {
    display: block;
}

#top li:hover ul a,#top li.hvr ul a {
    color: #edfdfd;
    background-color: transparent;
    text-decoration: none;
}

#top li ul li.hr {
    border-bottom: 1px solid #444;
    border-top: 1px solid #000;
    display: block;
    font-size: 1px;
    height: 0;
    line-height: 0;
    margin: 0px 0;
}

#top ul a:hover {
    background-color: #555!important;
    color: #fff!important;
    text-decoration: none;
}

#top a span,#top a.arrow span {
    font: bold 12px Arial;
    color: #888;
    display: block;
    line-height: 16px;
    text-transform: uppercase;
    text-shadow: 1px 2px 2px #000;
}

#top li:hover a span,#top li:hover a.arrow span {
    color: #f8a932;
}

HTML

<div id='top-wrapper'>
    <div id='topbar'>
        <ul id='top'>
            <li><a href='/'><span>Welcome</span>Homepage</a>
            </li>
            <li><a href='#'><span>This is</span>About Us</a>
            </li>
            <li><a class='arrow' href='#'><span>Support</span>Contact Us</a>

                <ul>
                    <li><a href='#'>Sub Menu 1</a>
                    </li>
                    <li class='hr'></li>
                    <li><a href='#'>Sub Menu 2</a>
                    </li>
                    <li class='hr'></li>
                    <li><a href='#'>Sub Menu 3</a>
                    </li>
                    <li class='hr'></li>
                    <li><a href='#'>Sub Menu 4</a>
                    </li>
                    <li class='hr'></li>
                    <li><a href='#'>Sub Menu 5</a>
                    </li>
                    <li class='hr'></li>
                    <li><a href='#'>Sub Menu 6</a>
                    </li>
                    <li class='hr'></li>
                    <li><a href='#'>Sub Menu 7</a>
                    </li>
                    <li class='hr'></li>
                    <li><a href='#'>Sub Menu 8</a>
                    </li>
                    <li class='hr'></li>
                    <li><a href='#'>Sub Menu 9</a>
                    </li>
                </ul>
            </li>
            <li><a href='#'><span>Action</span>Big surprise</a>
            </li>
            <li><a href='#'><span>Culture</span>Documentary</a>
            </li>
            <li><a class='arrow' href='#'><span>Box Office</span>The best movie</a>

                <ul>
                    <li><a href='#'>Sub Menu 1</a>
                    </li>
                    <li class='hr'></li>
                    <li><a href='#'>Sub Menu 2</a>
                    </li>
                    <li class='hr'></li>
                    <li><a href='#'>Sub Menu 3</a>
                    </li>
                    <li class='hr'></li>
                    <li><a href='#'>Sub Menu 4</a>
                    </li>
                    <li class='hr'></li>
                    <li><a href='#'>Sub Menu 5</a>
                    </li>
                    <li class='hr'></li>
                    <li><a href='#'>Sub Menu 6</a>
                    </li>
                    <li class='hr'></li>
                    <li><a href='#'>Sub Menu 7</a>
                    </li>
                    <li class='hr'></li>
                    <li><a href='#'>Sub Menu 8</a>
                    </li>
                    <li class='hr'></li>
                    <li><a href='#'>Sub Menu 9</a>
                </ul>
            </li>
            <li><a href='#'><span>Horror</span>Watch your back</a>
            </li>
            <li><a href='#'><span>Best Seller</span>People likes</a>
            </li>
            <li><a class='arrow' href='#'><span>Cartoon</span>Animated movie</a>

                <ul>
                    <li><a href='#'>Sub Menu 1</a>
                    </li>
                    <li class='hr'></li>
                    <li><a href='#'>Sub Menu 2</a>
                    </li>
                    <li class='hr'></li>
                    <li><a href='#'>Sub Menu 3</a>
                    </li>
                    <li class='hr'></li>
                    <li><a href='#'>Sub Menu 4</a>
                    </li>
                    <li class='hr'></li>
                    <li><a href='#'>Sub Menu 5</a>
                    </li>
                    <li class='hr'></li>
                    <li><a href='#'>Sub Menu 6</a>
                    </li>
                    <li class='hr'></li>
                    <li><a href='#'>Sub Menu 7</a>
                    </li>
                    <li class='hr'></li>
                    <li><a href='#'>Sub Menu 8</a>
                    </li>
                    <li class='hr'></li>
                    <li><a href='#'>Sub Menu 9</a>
                </ul>
            </li>
        </ul>
    </div>
</div>

JavaScript

<script type='text/javascript'>
    $(function () {
        $('#top li').hover(function () {
            $('ul', this).filter(':not(:animated)').slideDown(600, "easeOutBounce");
        }, function () {
            $('ul', this).slideUp(600, "easeInExpo");
        });
    });
</script>

❖ Drop Down Menu Black Pada Blog Dengan JQuery

CSS

HTML

JavaScript

Posting Komentar