如何在响应式网站中重新定位子ul

Question

我正在开发一个快速响应的网站，我对菜单有一点问题。我将展示下面的图片，以便更容易理解正在发生的事情......

桌面上的菜单如下所示：

在移动设备中，它应显示如下：

目前我的代码呈现如下：

我希望子菜单在移动设备上呈现时加载到菜单下，有任何建议吗？

这是我的HTML代码：

<ul id="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Portfolio</a></li>
    <li>
        <ul id="sub-menu">
            <li><a href="#">Todas as categorias</a></li>
            <li><a href="#">Logo</a></li>
            <li><a href="#">Campanha</a></li>
            <li><a href="#">Print</a></li>
            <li><a href="#">Digital</a></li>
            <li><a href="#">Indoor</a></li>
            <li><a href="#">Projetos Especiais</a></li>
        </ul>
    </li>
    <li><a href="#">Trabalhe Conosco</a></li>
    <li><a href="#">Quem Somos</a></li>
    <li><a href="#">Prêmios</a></li>
    <li><a class="select" href="#">Contato</a></li>
</ul>

桌面的Css代码：

#menu{
    position: relative;
    width: 200px;
    margin: 0px 10px 0 0;
    float: right;
    background: rgba(255,255,255,0);
    text-align: left;
    text-transform:uppercase;
}
#menu li{
    list-style: none;
}
#menu li a{
    list-style: none;
    font-family: 'swiss921_btregular';
    text-decoration: none;
    font-size: 22px;
    line-height: 32px;
    color: #231f20;
}
#menu li a:hover{
    color: #ed1d24;
}
#menu li #sub-menu li a{
    margin: 0 0 0 20px;
    list-style: none;
    font-size: 17px;
    line-height: 34px;
    font-family: 'swiss921_btregular';
}
#menu li a.select{
    color: #ed1d24;
}

移动设备的实际Css代码：

@media screen and (min-width: 0px) and (max-width: 768px){
    #menu{
        width: 100%;
        margin: 50px auto;
        float: none;
        text-align: center;
    }
    #menu li{
        display: inline-block;
        width: auto;
        margin: 0 13px;
    }
    #menu li #sub-menu li a{
        margin: 0;
    }
}

我搞砸了它：http://jsfiddle.net/r3zeB/

基本上就是这样，希望有人可以帮助我，抱歉我的英语不好。谢谢。

Answer 1

您可以随时将子菜单的另一个副本放在移动设备上。然后使用display:none;仅在您需要时显示它并隐藏另一个。

这可能不是正确的方法，但肯定会有效