Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add a 3rd level to my CSS drop down menu?

I have a 2-level drop down menu that looks great in all browsers. Now I want to add a 3rd level. How do I do that?

Here is my HTML for the menu:

    <div class="nav">
        <div class="navbar">
            <ul class="menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">About JoyFactory</a>
                <ul class="sub-menu">
                <li><a href="#">Who We Are</a></li>
                <li><a href="#">Our Education Concept</a></li>
                <li><a href="#">References</a></li>
                </ul>
            </li>
            <li><a href="#">JoyFactory Kinderkrippe</a>
                <ul class="sub-menu">
                <li><a href="#">JoyFactory Kinderkrippe Oerlikon</a>
                    <ul>
                    <li><a href="#">item 1</a></li>
                    <li><a href="#">item 2</a></li>
                    <li><a href="#">item 3</a></li>
                    <li><a href="#">item 4</a></li>
                    </ul>
                </li>
                <li><a href="#">JoyFactory Kinderkrippe Seebach</a></li>
                </ul>
            </li>
            </ul>
        </div>
    </div>

and here is my CSS:

    .nav    { clear:both ;
    width:1020px ;
    height:55px ;
    background:url("images/nav-bg.png") no-repeat ;
    position:absolute ;
    top:125px ;
    left:-10px ;
    }

        .navbar { width:1000px ;
        height:50px ;
        margin:auto ;
        }

            ul.menu { margin-left:0 ;
            padding-left:0 ;
            list-style-type:none ;
            }

            .menu li    { display:inline ;
            float:left ;
            height:50px ;
            margin:0 6px ;
            }

            .menu li a  { font-family:'MyriadPro-SemiboldCond' ;
            font-size:24px ;
            color:#ffffff ;
            text-decoration:none ;
            height:50px ;
            line-height:50px ;
            padding:0px 10px ;
            }

            .menu li:hover, .menu li:hover a { background:#ffd322 ;
            color:#e32a0e ;
            }

          .sub-menu { position:absolute ;
          float:none ;
          padding:0 ;
          top:50px ;
          z-index:9999 ;
          background:#ffd322 ;
          margin-left:0 ;
          padding-left:0 ;
          }

          .sub-menu li { display:none ;
          min-width:175px !important ;
          margin: 0 !important;
          padding: 0 !important;
          }

          .sub-menu li a, .current-menu-parent .sub-menu li a   { display:block ;
          background:#ffd322 ; 
          font-family:arial,helvetica,sans-serif ;
          font-size:16px ;
          padding:0 10px ;
          border-top:1px solid #f37f10 ;
          border-left:none ;
          }

          .sub-menu li a:hover, .menu li.current-menu-parent .sub-menu li.current-menu-item a   { background:#f37f10 }

          .menu li:hover li { float: none; display:block; clear: both; }

Any help would be most appreciated!

Many thanks :)

like image 792
Cynthia Avatar asked Sep 10 '12 21:09

Cynthia


People also ask

How do you customize a drop down menu in CSS?

Example Explained HTML) Use any element to open the dropdown content, e.g. a <span>, or a <button> element. Use a container element (like <div>) to create the dropdown content and add whatever you want inside of it. Wrap a <div> element around the elements to position the dropdown content correctly with CSS.

How do you expand a dropdown in CSS?

By setting . dropdown-menu to max-height: 0; overflow: hidden; we hide the content. We can then apply styles to the . dropdown-menu-open to increase the max-height to show the contents.

Can you style dropdown in CSS?

You can style the contents of the dropdown menu using CSS. Take a look at the example HTML code below. There are now three new element ids in use. They are applied to the href elements of the “dropdownMenuItems” class.


1 Answers

Here is a basic submenu setup: http://jsfiddle.net/Wss5A/

* {
    list-style:none;
    margin:0;
    padding:0;
    font-size:1em;
    cursor:pointer;
}

#menu{
    margin:3px;
}

#menu > li{            /* Top Level */
    float:left;
    margin-right:3px;
}
#menu > li > span{
    display:block;
    background:#0ac;
    padding:3px 10px;
}
#menu > li:hover > span{
    color:#fff;
}

#menu > li > ul{        /* Second Level */
    display:none;
    background:#08a;
}
#menu > li:hover > ul{
    display:block;
    position:absolute;
}
#menu > li > ul > li > span{
    display:block;
    padding:3px 10px;
    border-top:solid 3px #fff;
}
#menu > li > ul > li:hover > span{
    color:#fff;
}

#menu > li > ul li > ul{   /* Third Level & beyond */
    display:none;
    background:#068;
}
#menu > li > ul li:hover > ul{
    display:block;
    position:absolute;
    left:100%;
    border-left:solid 3px #fff;
    top:0;
    width:auto;
}
#menu > li > ul > li ul > li{
    display:block;
    padding:3px 10px;
    border-top:solid 3px #fff;
    white-space:nowrap;
}
#menu > li > ul > li ul > li:hover > span{
    color:#fff;
}
like image 77
Shmiddty Avatar answered Nov 15 '22 06:11

Shmiddty