Question

我想使用纯CSS（即NO Javascript / JQuery）为我的导航菜单实现Mega下拉菜单。当用户悬停在导航项目上时，我想显示一个大型淹没菜单，如果用户在菜单范围内，该菜单将保持活动状态。如果用户离开或悬停在不同的菜单上，则应显示相关菜单。

下图描绘了我正在寻找的内容。 GAMES AND TOYS是悬停时应显示巨型下拉菜单（带有nav-item边框的叠加层）的第一个#ff1300。黄色框表示我想在容器div中显示的不同嵌套div。

**注意：我已经尝试将nav-item和下拉列表放在一个div中并使用

.nav-item:hover .dropdownpanel {
    display: block 
/*    This is set to display: none to be hidden and then shown on hover */
}

有没有办法实现我正在寻找的东西？

Answer 1

是的。

使用基于列表的巨型菜单的示例。

＆＃13;

/* Outline declarations are for visual demonstration purposes only */

html, body {padding:0;margin:0 auto;}
nav {width:100%;padding:0;margin:0; position:relative;}
nav ul {width:100%;list-style:none;padding:0;margin:0;display:table;}
nav ul li {display:table-cell; line-height:2em;padding:0 1em;outline:1px solid green;}
nav ul li div {outline:solid 1px yellow;}
nav ul li > ul {width:100%;position:absolute;left:0;right:0;display:none;outline:solid 1px red;}
nav ul ul > li {display:table-cell;float:none;}
nav > ul > li:hover {background:cyan;}
nav li:hover > ul {display:table;}

＆＃13;

<nav>
    <ul>
        <li>Has Mega Menu
            <ul>
                <li><div>Stuff <br />Stuff <br />Stuff <br />Stuff <br />Stuff <br />Stuff <br />Stuff <br />Stuff <br />Stuff <br /></div></li>
                <li><div>Stuff <br />Stuff <br /></div></li>
                <li><div>Stuff <br />Stuff <br />Stuff <br />Stuff <br />Stuff <br />Stuff <br /></div></li>
                <li><div>Stuff <br />Stuff <br />Stuff <br />Stuff <br /></div></li>
             </ul>
        </li>
        <li>Menu Item</li>
        <li>Also has Mega Menu
            <ul>
                <li><div>Other Stuff <br />Other Stuff <br />Other Stuff <br />Other Stuff <br />Other Stuff <br />Other Stuff <br />Other Stuff <br />Other Stuff <br />Other Stuff <br /></div></li>
                <li><div>Other Stuff <br />Other Stuff <br /></div></li>
                <li><div>Other Stuff <br />Other Stuff <br />Other Stuff <br />Other Stuff <br />Other Stuff <br />Other Stuff <br /></div></li>
                <li><div>Other Stuff <br />Other Stuff <br />Other Stuff <br />Other Stuff <br /></div></li>
             </ul>
        </li>
        <li>Menu Item</li>
    </ul>
</nav>

＆＃13;

编辑：使用基于Div的超级菜单添加了以下示例。

＆＃13;

/* Outline declarations are for visual demonstration purposes only */

html, body {padding:0;margin:0 auto;}
nav {width:100%;padding:0;margin:0; position:relative;}
nav ul {width:100%;list-style:none;padding:0;margin:0;display:table;}
nav ul li {display:table-cell; line-height:2em;padding:0 1em;outline:1px solid green;}
nav ul li div {outline:solid 1px yellow;}
nav ul li > div {width:100%;position:absolute;left:0;right:0;display:none;outline:solid 1px red;}
nav ul li > div > div {display:table-cell;padding:1em;}
nav > ul > li:hover {background:cyan;}
nav > ul > li:hover > div {display:table;}

＆＃13;

<nav>
    <ul>
        <li>Has Mega Menu
            <div>
                <div>Stuff <br />Stuff <br />Stuff <br />Stuff <br />Stuff <br />Stuff <br />Stuff <br />Stuff <br />Stuff <br /></div>
                <div>Stuff <br />Stuff <br /></div>
                <div>Stuff <br />Stuff <br />Stuff <br />Stuff <br />Stuff <br />Stuff <br /></div>
                <div>Stuff <br />Stuff <br />Stuff <br />Stuff <br /></div>
             </div>
        </li>
        <li>Menu Item</li>
        <li>Also has Mega Menu
            <div>
                <div>Other Stuff <br />Other Stuff <br />Other Stuff <br />Other Stuff <br />Other Stuff <br />Other Stuff <br />Other Stuff <br />Other Stuff <br />Other Stuff <br /></div>
                <div>Other Stuff <br />Other Stuff <br /></div>
                <div>Other Stuff <br />Other Stuff <br />Other Stuff <br />Other Stuff <br />Other Stuff <br />Other Stuff <br /></div>
                <div>Other Stuff <br />Other Stuff <br />Other Stuff <br />Other Stuff <br /></div>
             </div>
        </li>
        <li>Menu Item</li>
    </ul>
</nav>

＆＃13;

Answer 2

是的，这可以通过纯CSS来完成。我发现这个链接http://technodator.com/2015/07/20-cool-css-for-megamenu.html他们有20个css的超级菜单脚本，但大部分都是以几美元的价格出售。

是否可以使用纯CSS实现Mega下拉菜单？

2 个答案: