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

【问题标题】：CSS Horizontal menu with sub-menu items display vertical side by sideCSS 带有子菜单项的水平菜单并排显示垂直
【发布时间】：2013-12-06 12:42:02
【问题描述】：

我无法在下拉菜单中并排显示导航列。

请看这里http://fiddle.jshell.net/Dnamixup/ML57B/1/

另外我认为我的立场是：亲戚在错误的地方，这可能是问题吗？

谢谢大家

<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;
}

【问题讨论】：

标签： jquery html css drop-down-menu navigation

【解决方案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;}

希望这会有所帮助。

【讨论】：

感谢您的快速响应，但是三个导航列需要并排放置，因此例如 12 个链接在三列中向下？
在答案中更新。检查上面。 fiddle.jshell.net/ML57B/11 - @Dnamixup
这就是你想要的多列。 - fiddle.jshell.net/ML57B/15 - @Dnamixup
完美，谢谢！这就是我要找的！所以我只需要为包含下拉 div 设置一个宽度？
不客气 :) - @Dnamixup 是的。您需要根据每列所需的项目设置宽度。

【解决方案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

【讨论】：

【解决方案3】：

这是一个更新的小提琴，因此您可以在 2 列、3 列等中显示下拉列表

上面的答案和这个都有帮助，所以谢谢大家！

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;
}

【讨论】：