CSS水平菜单和子菜单项并排垂直显示

Question

I'm having trouble displaying my nav-columns side by side in the drop.

See here http://fiddle.jshell.net/Dnamixup/ML57B/1/

Also I think I have my position:relative in the wrong place, that could be the problem?

Thank you guys

<div class="nav-wrap">
<ul class="nav">
    <li><a href="#">Canvas Prints</a>

        <div class="nav-column">
            <ul>
                <li><a href="#">Abstract Canvas</a>

                </li>
                <li><a href="#">Banksy Canvas</a>

                </li>
                <li><a href="#">City Canvas</a>

                </li>
            </ul>
        </div>
        <div class="nav-column">
            <ul>
                <li><a href="#">Abstract Canvas</a>

                </li>
                <li><a href="#">Banksy Canvas</a>

                </li>
                <li><a href="#">City Canvas</a>

                </li>
            </ul>
        </div>
        <div class="nav-column">
            <ul>
                <li><a href="#">Abstract Canvas</a>

                </li>
                <li><a href="#">Banksy Canvas</a>

                </li>
                <li><a href="#">City Canvas</a>

                </li>
            </ul>
        </div>
    </li>
    <li><a href="#">Wall Stickers</a>

        <div class="nav-column">
            <ul>
                <li><a href="#">Abstract Stickers</a>

                </li>
                <li><a href="#">Banksy Stickers</a>

                </li>
                <li><a href="#">City Stickers</a>

                </li>
            </ul>
        </div>
        <div class="nav-column">
            <ul>
                <li><a href="#">Abstract Stickers</a>

                </li>
                <li><a href="#">Banksy Stickers</a>

                </li>
                <li><a href="#">City Stickers</a>

                </li>
            </ul>
        </div>
                    <div class="nav-column">
            <ul>
                <li><a href="#">Abstract Stickers</a>
                </li>
                <li><a href="#">Banksy Stickers</a>
                </li>
                <li><a href="#">City Stickers</a>
                </li>
            </ul>
        </div>
    </li>
    <li><a href="#">Art Prints</a>

    </li>
    <li><a href="#">Wall Murals</a>

    </li>
    <li><a href="#">Personalised Photos</a>

    </li>
</ul>

/* NAV RESET */
 .nav {
    margin:0;
    padding:0;
    list-style:none;
}
.nav a {
    text-decoration:none;
}
.nav li ul {
    list-style:none;
}
/* NAV STYLE */
 .nav li {
    float:left;
    padding:10px;
    position:relative;
}
.nav li div {
    display:none;
    position:absolute;
}
.nav li:hover > div {
    display:block;
}
.nav .nav-column {
    float:left;
}

Answer 1

Here you go.

WORKING DEMO

The CSS Change:

.nav li div {display:none;position:absolute; left:-39px;}

To make it sit side by side, here you go.

WORKING DEMO - 2

The CSS Change:

.nav li div {display:none;position:absolute; left:-39px; width:470px;}

Hope this helps.

Answer 2

.nav-column {float:left;border:1px solid red;}
.nav-column ul{ list-style-type: none;padding:0;margin:0;}
.nav-column ul li{border:1px solid #999;}

JSFiddle Demo

Answer 3

Here is an updated fiddle so you can display the drop-down in 2 columns, 3 etc

The answer above and this are both helpful so thank you everyone!

http://jsfiddle.net/ML57B/15/

<div class="nav-wrap">
<ul class="nav">
    <li><a href="#">Canvas Prints</a>

        <div>
            <div class="nav-column">
                <ul>
                    <li><a href="#">Abstract Canvas</a>

                    </li>
                    <li><a href="#">Banksy Canvas</a>

                    </li>
                    <li><a href="#">City Canvas</a>

                    </li>
                </ul>
            </div>
            <div class="nav-column">
                <ul>
                    <li><a href="#">Abstract Canvas</a>

                    </li>
                    <li><a href="#">Banksy Canvas</a>

                    </li>
                    <li><a href="#">City Canvas</a>

                    </li>
                </ul>
            </div>
        </div>
    </li>
    <li><a href="#">Wall Stickers</a>

        <div>
            <div class="nav-column">
                <ul>
                    <li><a href="#">Abstract Stickers</a>

                    </li>
                    <li><a href="#">Banksy Stickers</a>

                    </li>
                    <li><a href="#">City Stickers</a></li>

                </ul>
            </div>
            <div class="nav-column">
                <ul>
                    <li><a href="#">Abstract Stickers</a>

                    </li>
                    <li><a href="#">Banksy Stickers</a>

                    </li>
                    <li><a href="#">City Stickers</a>

                    </li>
                </ul>
            </div>

        </div>
    </li>
    <li><a href="#">Art Prints</a>

    </li>
    <li><a href="#">Wall Murals</a>

    </li>
    <li><a href="#">Personalised Photos</a>

    </li>
</ul>

    /* NAV RESET */
 .nav {
    margin:0;
    padding:0;
    list-style:none;
}
.nav a {
    text-decoration:none;
}
.nav li ul {
    list-style:none;
}
/* NAV STYLE */
 .nav li {
    float:left;
    padding:10px;
    position:relative;
}
.nav > li > div {
    display:none;
    position:absolute;
    width:470px;
}
.nav li:hover > div {
    display:block;
}
.nav .nav-column {
    float:left;
    width:160px;
}