菜单向上滑动而不是向下滑动

Question

您好，我正在使用此菜单下的功能检查此网站

http://www.dt-gaming.com

当你点击它的时候，我想让它上升，而不是下降。有人知道我该怎么做吗？

下面是菜单的代码

<div id="capabilities">CAPABILITIES</div>
            <div id="bleft">
            <ul class="menu1">
           <li class="item1"><a href="#">TECH </a>
           <ul>
                <li class="subitem"><a href="#">Web hosting</a></li>
                <li class="subitem"><a href="#">Internet Security and Penetration testing </a></li>
                <li class="subitem"><a href="#">PCI/DSS compliance</a></li>
                <li class="subitem"><a href="#">Development</a></li>
                <li class="subitem"><a href="#">Custom web sites for portfolios</a></li>
                <li class="subitem"><a href="#">Mobile apps </a></li>
            </ul>
           </li>
           <li class="item2"><a href="#">GRAPHIC </a>
            <ul>
                <li class="subitem"><a href="#">Brands & Identity design </a></li>
                <li class="subitem"><a href="#">Creative web design </a></li>
                <li class="subitem"><a href="#">Graphic design </a></li>


            </ul>
        </li>
        <li class="item3"><a href="#">MARKETING </a>
        <ul>
                <li class="subitem"><a href="#">Marketing strategy </a></li>
                <li class="subitem"><a href="#">Email marketing </a></li>
                <li class="subitem"><a href="#">Email template coding </a></li>
                <li class="subitem"><a href="#">Telemarketing </a></li>
                <li class="subitem"><a href="#">Graphic design  </a></li>
                <li class="subitem"><a href="#">White-hat SEO</a></li>
                <li class="subitem"><a href="#">Google adwords optimization </a></li>
            </ul>
        </li>
    </ul>
    </div>

    <script type="text/javascript">
    $(function() {

        var menu_ul = $('.menu1 > li > ul'),
               menu_a  = $('.menu1 > li > a');

        menu_ul.hide();

        menu_a.click(function(e) {
            e.preventDefault();
            if(!$(this).hasClass('active')) {
                menu_a.removeClass('active');
                menu_ul.filter(':visible').slideUp('normal');
                $(this).addClass('active').next().stop(true,true).slideDown('normal');
            } else {
                $(this).removeClass('active');
                $(this).next().stop(true,true).slideUp('normal');
            }
        });

    });
</script>

CSS

#capabilities
    {
        color:#fff;
        font-family:myFirstFont;
        font-size:24px;
        float:right;
        margin-top:10px;
        margin-right:20px;
    }
    .menu1 {
        float:right;
        margin-top:275px;
        text-decoration:none;
        list-style:none;
        font-size:24px;
        margin-right:-95px;;
        text-align:right;
        width: 240px;
        height: auto;
    }

    .menu1 > li > a {

        display: block;
        position: relative;
        font-family: "myFirstFont";
        color: #fff;
        text-decoration:none;


    }
    .menu1 ul li a {


        position: relative;
        font-family: "myFirstFont";
        font-size:18px;
        margin-left: -190px;
        color: #FC0;
        text-decoration:none;

    }
    .menu1 ul li:last-child a {
        list-style:none;
        color: #FC0;
    }
    .menu1 > li > a:hover, .menu > li > a.active {
        list-style:none;
        color: #fff;

    }
    .menu1 > li > a.active {
        list-style:none;
        color: #fff;
    }
    .menu1 > li > a:before {
        content: '◀';
        font-size: 14px;
        color: #fff;
        height: 1em;
        width: 1em;
        position: absolute;
        left: 0;
        top: 50%;
        margin: -.8em 0 0 17.8em;


    }

Answer 1

菜单向下打开，因为元素“停靠”在顶部(默认情况下)。如果你特别将元素“停靠”在它的底部，那么元素将向上而不是向下增长。您可以通过在ul.menu1元素上设置bottom : 0; position: absolute;来完成此操作。

Answer 2

添加：

#bleft {
    position: relative;
    height: 100%;
}
.menu1 {
    position: absolute;
    bottom: 0;
    right: 20px;
}

删除：

.menu1 {
    float: right;
    margin-right: 95px;
    margin-top: 275px;
}