Question

我想在侧面菜单中添加侧边菜单，如PRODUCT 1，PRODUCT 2等，它们悬停在侧面时出现在侧面。我如何在以下代码上执行此操作？

这是我到目前为止的代码。

CSS ：

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 600, 300);
 @charset"UTF-8";

/* Base Styles */
 #cssmenu, #cssmenu ul, #cssmenu li, #cssmenu a {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    font-weight: normal;
    text-decoration: none;
    line-height: 1;
    font-family:'Open Sans', sans-serif;
    font-size: 14px;
    position: relative;
}
#cssmenu a {
    line-height: 1.3;
}
#cssmenu {
    width: 300px;
    margin-left: 90px;
    background: #A3FFFF;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 3px;
    padding: 3px;
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
}
#cssmenu > ul > li {
    margin: 0 0 3px 0;
}
#cssmenu > ul > li:last-child {
    margin: 0;
}
#cssmenu > ul > li > a {
    font-size: 15px;
    display: block;
    color: #ffffff;
    text-shadow: 0 1px 1px #000;
    background: #A3FFFF;
    background: -moz-linear-gradient(#565656 0%, #323232 100%);
    background: -webkit-gradient (linear, left top, left bottom, color-stop(0%, #565656), color-stop(100%, #323232));
    background: -webkit-linear-gradient(#565656 0%, #323232 100%);
    background: linear-gradient(#565656 0%, #323232 100%);
    border: 1px solid #000;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
#cssmenu > ul > li > a > span {
    display: block;
    border: 1px solid #666666;
    padding: 6px 10px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    font-weight: bold;
}
#cssmenu > ul > li > a:hover {
    text-decoration: none;
    font-weight: bold;
}
#cssmenu > ul > li.active {
    border-bottom: none;
}
#cssmenu > ul > li.active > a {
    background: #47A3FF;
    background: -moz-linear-gradient(#47A3FF 0%, #47A3FF 100%);
    background: -webkit-gradient (linear, left top, left bottom, color-stop(0%, #47A3FF), color-stop(100%, #47A3FF));
    background: -webkit-linear-gradient(#47A3FF 0%, #47A3FF 100%);
    background: linear-gradient(#47A3FF 0%, #47A3FF 100%);
    color: #fff;
    text-shadow: 0 1px 1px #fff;
    border: 1px solid #47A3FF;
}
#cssmenu > ul > li.active > a span {
    border: 1px solid #47A3FF;
}
#cssmenu > ul > li.has-sub > a span {
    background: url(images/icon_plus.png) 98% center no-repeat;
}
#cssmenu > ul > li.has -sub.active > a span {
    background: url(images/icon_minus.png) 98% center no-repeat;
}
/* Sub menu */
 #cssmenu ul ul {
    padding: 5px 12px;
    display: none;
}
#cssmenu ul ul li {
    padding: 3px 0;
}
#cssmenu ul ul a {
    display: block;
    color: #191975;
    font-size: 13px;
    font-weight: bold;
}
#cssmenu ul ul a:hover {
    color: cornflowerblue;
    font-weight:bold;
}

JS ：

(function ($) {
    $(document).ready(function () {
        $('#cssmenu > ul > li > a').click(function () {
            $('#cssmenu li').removeClass('active');
            $(this).closest('li').addClass('active');
            var checkElement = $(this).next();
            if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
                $(this).closest('li').removeClass('active');
                checkElement.slideUp('normal');
            }
            if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
                $('#cssmenu ul ul:visible').slideUp('normal');
                checkElement.slideDown('normal');
            }
            if ($(this).closest('li').find('ul').children().length == 0) {
                return true;
            } else {
                return false;
            }
        });
    });
})(jQuery);

HTML ：

<div id='cssmenu'>
    <ul>
        <li class='has-sub'>
            <a href='#'><span>CENTRAL COMPLIANCE</span></a>
            <ul>
                <li><a href='#'><span>PRODUCT 1</span></a></li>
                <hr>
                <li><a href='#'><span>PRODUCT 2</span></a></li>
                <hr>
                <li><a href='#'><span>PRODUCT 3</span></a></li>
                <hr>
                <li><a href='#'><span>PRODUCT 4</span></a></li>
                <hr>
                <li><a href='#'><span>GEPOC</span></a></li>
                <hr>
                <li><a href='#'><span>Global Registration</span></a></li>
                <hr>
                <li><a href='#'><span>MBL</span></a></li>
                <hr>
                <li><a href='#'><span>Account Affirmations</span></a></li>
                <hr>
                <li class='last'><a href='#'><span>Outside Affiliations</span></a></li>
            </ul>
        </li>
        <li class='has-sub'>
            <a href='#'><span>CONTROL ROOM</span></a>
            <ul>
                <li><a href='#'><span>CDS</span></a></li>
                <hr>
                <li><a href='#'><span>UK Registration</span></a></li>
                <hr>
                <li class='last'><a href='#'><span>Compliance Portal</span></a></li>
            </ul>
        </li>
        <li class='has-sub'>
            <a href='#'><span>LARGE HOLDINGS</span></a>
            <ul>
                <li class='last'><a href='#'><span>LHO</span></a></li>
            </ul>
        </li>
        <li class='has-sub'>
            <a href='#'><span>ORCHESTRIA</span></a>
            <ul>
                <li class='last'><a href='#'><span>Orchestria</span></a></li>
            </ul>
        </li>
    </ul>
</div>

请帮我编辑此代码。感谢。

Answer 1

css属性：悬停应该运行良好。从一个显示为none的div开始。然后在产品1悬停时，例如，切换到显示块。

.side-menu {
  display:none;
}
.product1:hover > .side-menu {
  display:block;
}

重要的是要注意，这仅适用于要隐藏和显示的菜单项是您正在悬停的项目的子项。这不应该成为你的问题。

编辑澄清：在您的HTML中添加将保存侧边菜单的ul。将类分配给ul。这是您创建嵌套列表的方式。还要为li产品1添加一个类，以便我们可以选择它。

<li><a href="#" class="product1">Product1</a></li>
  <ul class="side-menu">
    <li>first sub menu item</ul>
  </ul>
</li>

现在你的css。它与我上面写的相同，因为我使用了相同的类名。当页面加载时会发生什么，因为显示设置为none，所以侧面菜单将被隐藏。当你：将鼠标悬停在html元素上，其中包含一个＆＃39; product1＆＃39;它将侧边菜单的display属性从none更改为block。

您仍需要适当地定位新菜单项。

如何在悬停时添加侧边菜单

1 个答案: