Nav with div inside (two different menus)

问题

I made an image of what I would like to do, sort of, but I cant seem to work it out.

What I would like:

I currently have the nav but it is all in a div, what I want to do, is to divide it, have two different divs and each with different content.

Here's my actual code.

UPDATED:

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>

Any help will be greatly appreciated.

Thanks, Enrique Bravo.

回答1:

Set your divs(1 and 2) to be 50% of their parent, in this case the nav element then float the divs and clear them.

BASIC example, going off of your image:

JsFiddle Example

来源：https://stackoverflow.com/questions/23900602/nav-with-div-inside-two-different-menus