-2

I've never had a problem so hard as this, I can't even get started so I don't have a very good fiddle to show you, only the source code and what I'm trying to achieve.

I need a three level UL. The top level being inline - for top level navigation. The sub UL's and LI's will be inline-block - more or less.

Here's an image of what I mean: http://www.smileycat.com/miaow/archives/images/megamenus/ea.gif

I need something similar to this, kind of like a mega drop down I suppose? Can anyone help or point me in the right direction?

JSFiddle: http://jsfiddle.net/RVQ6m/

Some code:

            <ul class="level1">
                <li class="level1">top
                    <ul class="level2">
                        <li class="level2">middle
                            <ul class="level3">
                                <li class="level3">bottom</li>
                                <li class="level3">bottom</li>
                                <li class="level3">bottom</li>
                                <li class="level3">bottom</li>
                                <li class="level3">bottom</li>
                            </ul>
                        </li class="level2">
                        <li class="level2">middle
                            <ul class="level3">
                                <li class="level3">bottom</li>
                                <li class="level3">bottom</li>
                                <li class="level3">bottom</li>
                                <li class="level3">bottom</li>
                                <li class="level3">bottom</li>
                            </ul>
                        </li class="level2">
                        <li class="level2">middle
                            <ul class="level3">
                                <li class="level3">bottom</li>
                                <li class="level3">bottom</li>
                                <li class="level3">bottom</li>
                                <li class="level3">bottom</li>
                                <li class="level3">bottom</li>
                            </ul>
                        </li class="level2">
                        <li class="level2">middle
                            <ul class="level3">
                                <li class="level3">bottom</li>
                                <li class="level3">bottom</li>
                                <li class="level3">bottom</li>
                                <li class="level3">bottom</li>
                                <li class="level3">bottom</li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
tjcss
  • 856
  • 1
  • 12
  • 33
  • 1
    The image shows only 2 level. But you can read up here http://stackoverflow.com/questions/9100344/pure-css-multi-level-drop-down-menu – San May 12 '14 at 16:07
  • 1
    Have you done any searching or tried any css or javascrpit methods? It looks like you've just layered out some nested lists and expect somebody to come along and do the rest for you. – Howdy_McGee May 12 '14 at 16:08
  • I've searched; but not sure exactly what to search for as I've not actually done anything like this before. Difficult to know what to search for without knowing what it is I'm searching for. – tjcss May 12 '14 at 16:23

1 Answers1

1

Well, for one I think your doing this all wrong and you need to look at it a different way. From the image example you provided this seems more like a div showing and hiding content as apposed to a bunch of nested Unordered list. Also, I'm not sure what script you would like to use in order to achieve the effect you are looking for. For simplicity sake. I started you off by creating a Div that you can show and hide using JavaScript or a library of your choice. All you need to do now is find a script that will toggle (show and hide the div on mouseover) Note: the Div #games-display should not be displayed when a user lands on the page.

http://jsfiddle.net/jimmyt1001/Bz9QA/

First Your CSS

            <style type="text/css">


            .nav-container {
                font-family: Arial, Helvetica, sans-serif;
                font-size: 0.8em;
            }

            div.column {
                border-left: 2px #dedede solid;
                width:156px;
                float:left;
                padding: 11px 25px 5px 11px;

            }
            div.column:nth-child(1)
            {
            border-left:none;
            }



            .column a {

                line-height:1.7em;

            }

            ul {
                color:#3173d4;
            }

            .column.highlight a {
                color:#3173d4;
                font-weight:bold;
                }


            .clear-fix {
                clear:both;
            }


            #games-display {
                width:580px;
                height:273px;
                border-top: 6px #639df4 solid;
                border-right: 1px #639df4 solid;
                border-left: 1px #639df4 solid;
                border-bottom: 1px #639df4 solid;
                background-color:#fff;
                -webkit-border-bottom-right-radius: 10px;
                -webkit-border-bottom-left-radius: 10px;
                -moz-border-radius-bottomright: 10px;
                -moz-border-radius-bottomleft: 10px;
                border-bottom-right-radius: 10px;
                border-bottom-left-radius: 10px;
                padding:10px;

            }

            .display-header {
                width:135px;
                height:5px;
                background-color:#f7f7f7;
                font-weight:bold;
                padding:8px 5px 15px 15px;
                border: 1px #c5c5c5 solid;
            }

            .featured {
                width:135px;
                height:125px;
                background-color:#f7f7f7;
                text-align:center;
                font-weight:bold;
                padding:12px;
                border: 1px #c5c5c5 solid;
                }


            </style>

And then your HTML

<div class="nav-container">

            <a href="#"">Nav Link</a>

               <div id="games-display">

                   <div class="column highlight">
                        <ul>
                            <li><a href="">Link 1</a></li>
                            <li><a href="">Link 2</a></li>
                            <li><a href="">Link 3</a></li>
                        </ul>

                       <div class="featured">
                        Featured Info
                       </div>

                   </div>

                   <div class="column">
                        <div class="display-header">Column 2</div>
                        <ul>
                            <li><a href="">Link 1</a></li>
                            <li><a href="">Link 2</a></li>
                            <li><a href="">Link 3</a></li>
                            <li><a href="">Link 4</a></li>
                            <li><a href="">Link 5</a></li>
                            <li><a href="">Link 6</a></li>
                            <li><a href="">Link 7</a></li>
                            <li><a href="">Link 8</a></li>

                        </ul>
                   </div>

                   <div class="column">
                        <div class="display-header">Column 3</div>
                                    <ul>
                            <li><a href="">Link 1</a></li>
                            <li><a href="">Link 2</a></li>
                            <li><a href="">Link 3</a></li>
                            <li><a href="">Link 4</a></li>
                            <li><a href="">Link 5</a></li>
                            <li><a href="">Link 6</a></li>
                            <li><a href="">Link 7</a></li>
                            <li><a href="">Link 8</a></li>

                        </ul>
                   </div>

                   <div class="clear-fix"></div> <!-- Very dirty way of removing float property -->

               </div>

            </div>
Spanky
  • 699
  • 2
  • 11
  • 38