html - 内部带有 div 的导航(两个不同的菜单)

Question

我对我想做的事情做了一个想象，有点，但我似乎无法解决。

我想要什么:

我目前有导航，但它都在一个 div 中，我想做的是将它分开，有两个不同的 div，每个都有不同的内容。

这是我的实际代码。

更新:

CSS

#nav
{
    position:fixed;
    top: 0;
    left: 0;
    width: 100%;
    height:7%;
    text-align: center;
    padding: .5em 0 1em 0;
    z-index: 1;
    overflow: hidden;
    background-image: -webkit-gradient(
    linear,
    right top,
    left bottom,
    color-stop(0, #E1A141),
    color-stop(0.43, #DF7266)
        );
    background-image: -o-linear-gradient(left bottom, #E1A141 0%, #DF7266 43%);
    background-image: -moz-linear-gradient(left bottom, #E1A141 0%, #DF7266 43%);
    background-image: -webkit-linear-gradient(left bottom, #E1A141 0%, #DF7266 43%);
    background-image: -ms-linear-gradient(left bottom, #E1A141 0%, #DF7266 43%);
    background-image: linear-gradient(to left bottom, #E1A141 0%, #DF7266 43%);
    }

    div#a
    {
    float: left !important;
    width: 50%;
    display:inline !important;
    }

    div#b
    {
    float: left !important;
    width: 50%;
    }

    #nav > ul
    {
        width:40%;
        line-height: 0px;
        display: inline-block;
    }

        #nav > ul:before,
        #nav > ul:after
        {
            content: 'sentido';
            width: 300%;
            position: absolute;
            top: 50%;
            margin-top: -2px;

            height: 5px;
            border-top: solid 1px rgba(192,192,192,0.35);
            border-bottom: solid 1px rgba(192,192,192,0.35);
        }

        #nav > ul:before
        {
            left: 100%;
            margin-left: 1px;
        }

        #nav > ul:after
        {
            right: 100%;
            margin-right: 1px;
        }

        #nav > ul > li
        {
            display: inline-block;
            margin: -9px 0.5em 0 0.5em;
            border-radius: 0.5em;
            padding: 0.85em;
            border: solid 1px transparent;
            -moz-transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out;
            -webkit-transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out;
            -o-transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out;
            -ms-transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out;
            transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out;
        }

            #nav > ul > li.active
            {
                border-color: rgba(192,192,192,0.35);
            }

            #nav > ul > li > a,
            #nav > ul > li > span
            {
                display: block;
                color: inherit;
                text-decoration: none;
                border: 0;
                outline: 0;
            }

            #nav > ul > li > ul
            {
                display: none;
            }

html

                <nav id="nav" style="z-index: 9999;" id="navigation">
                    <div id="a">
                    <ul>
                        <li><a href="index.html">Inicio</a></li>
                        <li><a href="#banner" class="scrolly">Encuentra</a></li>
                        <li><a href="right-sidebar.html">Aventura al Azar</a></li>
                        <li><a href="#footer" class="scrolly">Contacto</a></li>
                    </ul>
                    </div>
                    <div id="b"> holibebe </div>
                </nav>

任何帮助将不胜感激。

谢谢， 恩里克·布拉沃。

Answer 1

将您的 div(1 和 2)设置为其父级的 50%，在这种情况下，nav 元素然后 float div 并清除它们。

基本示例，脱离您的图像:

JsFiddle Example