列表菜单，顶部和底部的圆角，隐藏的托盘，悬停的方形

Question

我有一个自适应列表菜单

<ul class="js-dropdown active" style="display: block;">

<!-- custom menu -->

                        <li class="mobile-only"><a href="/static/Bikemap_Job_Webdesign.pdf"><b>We are hiring!</b></a></li>
                        <li class="mobile-only"><a href="/pages/apps">Apps</a></li>
                        <li><a href="/en/events/">Events</a></li>
                        <li><a href="/en/traininglog/">Training log</a></li>
                        <li class="mobile-only"><a href="/de/pages/allgemeine-fragen/">General questions</a></li>
                        <li class="mobile-only"><a href="/de/pages/fragen-zur-technik/">Questions about technology</a></li>
                        <li class="mobile-only"><a href="/de/pages/werbung-auf-bikemap/">Advertise on Bikemap</a></li>
                        <li><a href="/shirts/"><b>NEW: T-Shirt Shop</b></a></li>

</ul>

    li {
        .mobile-only{
             display:none;
        }
        display: block;

        &:first-child:before {
            color: $dropdown-bg;
            content: "\f0d8";
            font-family: 'FontAwesome';
            position: absolute;
            right: 8px;
            top: -8px;
        }

        &:first-child a {
            border-radius: 5px 5px 0 0;
        }

        &:last-child a {
            border-radius: 0 0 5px 5px;
        }

    }

在桌面上，您只能看到普通的li元素，菜单的顶部和底部都有圆角。但是在悬停时它会失去圆角（或忘记它是第一个孩子）并且是一个方形区域 - ＆gt;第一个元素fE。

请帮助，

汤姆