开发者

Novel CSS dropdown/Megamenu

Hi I want to create a new type of nav dropdown (new as in I haven't seen it before).

Basically when I hover over a nav item, a dropdown box should appear below the nav. The difference to a normal dropdown is that I want this dropdown to contain all of the navs sub items(not just the items belonging to the hovered item). So in my code example, if one was to hover over Nav 1 then all items a-i would appear.

<ul>
            <li><a href="#">Nav 1</a>
                <ul>
                    <li><a href="#">item a</a></li>
          开发者_运维知识库          <li><a href="#">item b</a></li>
                    <li><a href="#">item c</a></li>
                </ul>
            </li>
            <li><a href="#">Nav 2</a>
                <ul>
                    <li><a href="#">item d</a></li>
                    <li><a href="#">item e</a></li>
                    <li><a href="#">item f</a></li>
                </ul>
            </li>
            <li><a href="#">Nav 3</a>
                <ul>
                    <li><a href="#">item g</a></li>
                    <li><a href="#">item h</a></li>
                    <li><a href="#">item i</a></li>
                </ul>                   
            </li>
        </ul>

Note: The dropdown should be the same width as the nav and each nav item's links should appear below it. I've attached a sketch!

I had thought about putting a div containing the dropdown within the UL and have it appear on ul.hover but then that won't validate and you wouldn't be able to target which li was being hovered.

It might not be possible to achieve this using just css, if someone could let me know that would be great.

Sorry if this seems like rambling... hopefully someone will understand what I'm after!


So hovering over any part of the navigation shows all the sub-levels?

Here's a jsfiddle of the basic functionality; you then need to style it using CSS.

eg

http://www.alistapart.com/articles/hybrid/

http://htmldog.com/articles/suckerfish/dropdowns/

(there's hundreds of examples on Google)

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜