jquery - 带有子菜单项的CSS水平菜单并排垂直显示

Question

我无法在下拉列表中并排显示我的导航栏。

请参阅此处 http://fiddle.jshell.net/Dnamixup/ML57B/1/

另外我想我的 position:relative 放错地方了，这可能是问题所在？

谢谢大家

<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

给你。

WORKING DEMO

CSS 变化:

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

要让它并排放置，开始吧。

WORKING DEMO - 2

CSS 变化:

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

希望这对您有所帮助。