带有子菜单项的CSS水平菜单并排显示

时间:2013-12-06 12:42:02

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

我无法在水滴中并排显示导航列。

请参阅此处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;
}

3 个答案:

答案 0 :(得分:0)

你走了。

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

希望这有帮助。

答案 1 :(得分:0)

.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

答案 2 :(得分:0)

这是一个更新的小提琴,因此您可以在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;
}