Question

在我的博客（http://www.khyberacademy.blogspot.com）中，下拉菜单无效。请指导我。 HTML＆amp; CSS代码如下。

悬停时它不会下拉，我也试图将显示更改为block＆amp; inline，但它并没有解决我的问题。

HTML：

<!-- begin #topMenu -->
<div class='clearfix' id='navigation-wrapper'>
    <select id='responsive-main-nav-menu' onchange='javascript:window.location.replace(this.value);'><option selected='selected'>Menu</option></select>
    <nav class='main-menu' id='main-navigation'>
        <ul class='sf-menu' id='menu-top-menu'>
            <li>
                <a href='#' style='padding-right: 23px;'>Engineering<span class='downarrowclass'/></a>
                <ul class='sub-menu' style='top: 127px; visibility: visible; left: 0px; width: 175px; display: none;'>
                    <li><a href='http://khyberacademy.blogspot.com/search/label/Bridge%20Engineering'>Bridge Engineering</a></li>
                    <li><a href='http://khyberacademy.blogspot.com/search/label/Pre-stressed%20Concrete'>Pre-stressed Concrete</a></li>
                    <li><a href='http://khyberacademy.blogspot.com/search/label/CAD%2FCAM'>CAD/CAM</a></li>
                </ul>
            </li>
            <li>
                <a href='#' style='padding-right: 23px;'>COMMERCE<span class='downarrowclass'/></a>
                <ul class='sub-menu' style='top: 127px; visibility: visible; display: none;'>
                    <li><a href='http://khyberacademy.blogspot.com/search/label/AUDITING'>AUDITING</a></li>
                    <li><a href='http://khyberacademy.blogspot.com/search/label/Business%20Communication'>BUSINESS COMMUNICATION</a></li>
                    <li><a href='http://khyberacademy.blogspot.com/search/label/ECONOMICS'>ECONOMICS</a></li>
                    <li><a href='http://khyberacademy.blogspot.com/search/label/STATISTICS'>STATISTIC</a></li>
                </ul>
            </li>
            <li>
                <a href='#' style='padding-right: 23px;'>COMPUTER<span class='downarrowclass'/></a>
                <ul class='sub-menu' style='top: 127px; visibility: visible; display: none;'>
                    <li><a href='http://khyberacademy.blogspot.com/search/label/Joomla%21'>JOOMLA</a></li>
                    <li><a href='http://khyberacademy.blogspot.com/search/label/Windows%20Tricks'>WINDOWS TRICKS</a></li>
                    <li><a href='#'>WORDPRESS</a></li>
                    <li><a href='#'>BLOGGING</a></li>
                </ul>
            </li>
            <li>
                <a href='#' style='padding-right: 23px;'>GRAPHICS<span class='downarrowclass'/></a>
                <ul class='sub-menu' style='top: 127px; visibility: visible; display: none;'>
                    <li><a href='http://khyberacademy.blogspot.com/search/label/CAD%2FCAM'>CAD/CAM</a></li>
                </ul>
            </li>
            <li>
                <a href='http://khyberacademy.blogspot.com/p/contact-us.html'>Contact</a>
            </li>
        </ul>
    </nav>
</div>
<!-- end #topMenu -->

CSS：

/* -------------------------------------------------- */
/*  MAVIGATION
/* -------------------------------------------------- */
.downarrowclass {
    position: absolute;
    top: 53px;
    right: 5px;
}
.rightarrowclass {
    position: absolute;
    top: 10px;
    right: 10px;
}
#main-navigation select { display: none }
#main-navigation { float: right }
#main-navigation > ul { margin: -30px 0 0 0px }
#main-navigation ul li {
    list-style: none;
    float: left;
    position: relative;
}
#main-navigation li a {
    color: #898989;
    font-family: 'Dosis', 'Verdana', sans-serif;
    font-size: 16px;
    font-weight: normal;
    padding: 47px 12px 50px 12px;
    margin: 0px 0px 10px 0;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    float: left;
    overflow: hidden;
    line-height: 20px;
}
#main-navigation ul li a:hover,
#main-navigation ul li.current-menu-ancestor > a,
#main-navigation ul li.current-menu-item > a {
    color: #9dcedf;
    background: #f8f8f8;
    border-bottom: 1pt solid #9dcedf;
}
#main-navigation ul ul li a {
    display: block;
    float: none;
}
#main-navigation ul ul {
    background: url("http://1.bp.blogspot.com/-iIDMdP-Ub9I/UkEjY7k9a5I/AAAAAAAAJ-0/ZWPPe0dkcoA/s1600/menu-drop-bg.png") 20% 0% no-repeat;
    padding-top: 8px;
    display: none;
    left: 0;
    margin-top: -18px;
    position: absolute;
    width: 175px;
    z-index: 99;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
}
#main-navigation ul ul ul {
    background: url("http://1.bp.blogspot.com/-3LBiTw7Ht0U/UkEjYHu05eI/AAAAAAAAJ-k/pCHPYKrpKak/s1600/menu-drop-bg-2.png") 0% 50% no-repeat;
    padding-left: 8px;
    display: none;
    left: 0;
    position: absolute;
    width: 175px;
    z-index: 99;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
}
#main-navigation ul ul ul  ul {
    background: url("http://1.bp.blogspot.com/-3LBiTw7Ht0U/UkEjYHu05eI/AAAAAAAAJ-k/pCHPYKrpKak/s1600/menu-drop-bg-2.png") 0% 50% no-repeat;
    padding-left: 8px;
    display: none;
    margin-left: 10px;
    left: 0;
    position: absolute;
    width: 175px;
    z-index: 99;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
}
#main-navigation ul ul  li,
#main-navigation ul ul  li a {
    padding: 0px 0 0 0px;
    margin: 0px;
    color: #FFF;
    background: #615951;
    font-family: "Arial", "Verdana";
}
#main-navigation ul ul  li { }
#main-navigation ul ul li { float: none }
#main-navigation ul li {
    padding: 0;
    margin: 0 0 0 20px;
}
#main-navigation ul ul a {
    border: 0;
    color: #fff;
    display: block;
    font-size: 11px;
    font-weight: 400;
    padding: 5px 10px !important;
    text-align: left;
    margin: 0;
    text-transform: none;
}
#main-navigation ul ul a:hover,
#main-navigation ul ul .hover > a,
#main-navigation ul ul .current-menu-item > a,
#main-navigation ul ul .current-menu-item > a:hover {
    background: #9dcedf ;
    color: #fff !important;
    border: 0 !important;
}
#main-navigation ul li ul {
    position: absolute;
    left: 0px;
    display: block;
    visibility: hidden;
    margin-left: 0px;
    top: 0;
}
.downarrowclass,
.rightarrowclass {
    width:8px;
    height:8px;
    background:url(http://2.bp.blogspot.com/-bkf-TLVpTn4/UkEjaEMyKaI/AAAAAAAAJ_E/dyM2NDVqNNo/s1600/plus.png) top left no-repeat;
    display:inline-block;
    position: absolute;
    right: 5px;
    top: 53px
}
.rightarrowclass {
    background-image:url(http://3.bp.blogspot.com/-ivF1y3GR6rw/UkEjZ8YMXlI/AAAAAAAAJ-8/xCB_X7XVIbw/s1600/plus-white.png);
}

Answer 1

只需添加此类，它就能正常运行。希望这能解决您的问题。

#main-navigation ul li:hover ul{display:block!important;}

Answer 2

删除每个“ul”中的display:none 并设置visiblity:none。然后添加以下Javascript代码。

$("ul").hover(function(){
    $(this).css("visibility", "visibile");
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

下拉菜单在我的博客中不起作用

2 个答案: