Question

我有一个手风琴样式菜单浮动到页面右侧。它占用了大量空间，我想找到一种隐藏它的方法。

如何将橙色框放在原位，每当悬停时，菜单就会出现。

示例：

enter image description here

HTML：

<ul class="menu">
        <li class="item1"><a href="#">ABOUT US</a>
            <ul>
                <li class="subitem1"><a href="#">About Us</a></li>
                <li class="subitem2"><a href="#">Strange “Stuff”</a></li>
                <li class="subitem3"><a href="#">Automatic Fails</a></li>
                <li class="subitem1"><a href="#">Cute Kittens</a></li>
                <li class="subitem2"><a href="#">Strange “Stuff”</a></li>
                <li class="subitem3"><a href="#">Automatic Fails</a></li>
            </ul>
        </li>
        <li class="item2"><a href="#">ACADEMICS</a>
            <ul>
                <li class="subitem1"><a href="#">Cute Kittens</a></li>
                <li class="subitem2"><a href="#">Strange “Stuff”</a></li>
                <li class="subitem3"><a href="#">Automatic Fails</a></li>
            </ul>
        </li>
        <li class="item3"><a href="#">RESOURCES</a>
            <ul>
                <li class="subitem1"><a href="#">Cute Kittens</a></li>
                <li class="subitem2"><a href="#">Strange “Stuff”</a></li>
                <li class="subitem3"><a href="#">Automatic Fails</a></li>
            </ul>
        </li>
        <li class="item4"><a href="#">DEPARTMENTS</a>
            <ul>
                <li class="subitem1"><a href="#">Cute Kittens</a></li>
                <li class="subitem2"><a href="#">Strange “Stuff”</a></li>
                <li class="subitem3"><a href="#">Automatic Fails</a></li>
            </ul>
        </li>
        <li class="item5"><a href="#">FAQs</a>
            <ul>
                <li class="subitem1"><a href="#">Cute Kittens</a></li>
                <li class="subitem2"><a href="#">Strange “Stuff”</a></li>
                <li class="subitem3"><a href="#">Automatic Fails</a></li>
            </ul>
        </li>
    </ul>

CSS：

body {
    font-size: 100%;
    background:#cccccc;
}
a {
    text-decoration: none;
}
ul, ul ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.menu {
    float: right;
    width: 300px;
    height: auto;
}
.menu > li > a {
    background-color: #f36f21;
    border-bottom: 1px solid #444;
    width: 100%;
    height: 2.75em;
    line-height: 2.75em;
    text-indent: 2.75em;
    display: block;
    position: relative;
    color: #fff;
}
.menu ul li a {
    background: #fff;
    border-bottom: 1px solid #efeff0;
    width: 100%;
    height: 2em;
    line-height: 2em;
    text-indent: 2em;
    display: block;
    position: relative;
    color: #444;
}
.menu ul li:last-child a {
    border-bottom: 1px solid #444;
}
.menu > li > a:hover, .menu > li > a.active {
    background-color: #444;
    border-bottom: 1px solid #f36f21;
}
.menu > li > a.active {
    border-bottom: 1px solid #f36f21;
}
.menu > li > a:before {
    font-size: 36px;
    height: 1em;
    width: 1em;
    position: absolute;
    left: 0;
    top: 50%;
    margin: -.5em 0 0 0;
}

.menu > li > ul li a:before{
    content: '▶';
    font-size: 8px;
    color: #bcbcbf;
    position: absolute;
    width: 1em;
    height: 1em;
    top: 0;
    left: -2.7em;
}

.menu > li > ul li:hover a,
.menu > li > ul li:hover a span,
.menu > li > ul li:hover a:before {
    color: #444;
}

Answer 1

    $('.menu').hide();
    $('#hm').hover(function(){
        $('.menu').show();
    },function(){
        $('.menu').hide();
    });

FIDDLE

Answer 2

将通用隐藏类（display：none;）应用于带有Div的菜单UL。在这个Div内部放置一个Span，它将作为菜单的访问点。

然后，您可以添加以下代码：

$('.menuAccess').hover(function () {
    $('.menu').removeClass('hide');
}, function () {
    $('.menu').addClass('hide');
});

http://jsfiddle.net/danieljordan13/Ha58r/2/

隐藏菜单，直到盒子悬停

2 个答案: