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

我在下拉菜单中并排显示导航列时遇到问题。

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

开始吧。

工作演示

CSS更改：

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

为了让它并排坐着，给你。

工作演示-2

CSS更改：

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

希望这能有所帮助。

.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演示

这里有一个更新的fiddle，因此您可以在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;
}

相关内容

最新更新

热门标签：