How to stylize second level dropdown menu list


Tags: html,css,drop-down-menu,styles

Problem :

I made a drop down menu, which works fine for top level items. But I dunno what CSS to add for second level menu items, to be move them to the right side of the hovered item.

Here is my HTML content:

<ul class="menu">
<li><a href="#" >item1</a></li>
<li><a href="#">item2</a></li>
<li><a href="#">item3</a>
    <ul>
        <li><a href="#">subitem1</a></li>
        <li><a href="#">subitem2</a></li>
        <li><a href="#">subitem3</a>
            <ul>
                <li><a href="#">subsubitem1</a></li>
                <li><a href="#">subsubitem2</a></li>
            </ul>
        </li>
        <li><a href="#">subitem4</a></li>
        <li><a href="#">subitem5</a></li>

    </ul>
</li>
<li><a href="#">item4</a></li>
<li><a href="#">item5</a></li>
</ul>

and my actual CSS:

.menu {
    border:none;
    border:0px;
    margin:0px;
    padding:0px;
    font: 67.5%"Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;
}

.menu ul {
    background:#333333;
    height:35px;
    list-style:none;
    margin:0;
    padding:0;
}

.menu li {
    float:left;
    padding:0px;
}

.menu li a {
    background:#333333 url("seperator.gif") bottom right no-repeat;
    color:#cccccc;
    display:block;
    font-weight:normal;
    line-height:35px;
    margin:0px;
    padding:0px 25px;
    text-align:center;
    text-decoration:none;
}

.menu li a:hover, .menu ul li:hover a {
    background: #2580a2 url("hover.gif") bottom center no-repeat;
    color:#FFFFFF;
    text-decoration:none;
}

.menu li ul {
    background:#333333;
    display:none;
    height:auto;
    padding:0px;
    margin:0px;
    border:0px;
    position:absolute;
    width:225px;
    z-index:200;
    /*top:1em;
    /*left:0;*/
}

.menu li:hover ul {
    display:block;
}

.menu li li {
    background:url('sub_sep.gif') bottom left no-repeat;
    display:block;
    float:none;
    margin:0px;
    padding:0px;
    width:225px;
}

.menu li:hover li a {
    background:none;
}

.menu li ul a {
    display:block;
    height:35px;
    font-size:12px;
    font-style:normal;
    margin:0px;
    padding:0px 10px 0px 15px;
    text-align:left;
}

.menu li ul a:hover, .menu li ul li:hover a {
    background:#2580a2 url('hover_sub.gif') center left no-repeat;
    border:0px;
    color:#ffffff;
    text-decoration:none;
}

jsfiddle

I'm trying to do a submenu of a submenu of a list menu and told that this may work but i dont know how to add it to css. and weather or not the styles would apply to it if its put into css.

[SOLVED] Okay, so i managed to solve this ( and now I just have to style widths and hovers ). What I Did was chuck in the css from the answer below, added in this css aswell

.tabs .widget ul, .tabs .widget ul {
    margin: 0;
    padding: 0;
    overflow: visible;
    list-style: none;
}

For some reason it was set to { overflow:hidden ; } (wtf!) so i changed that and it seemed to overflow correctly now.

In the menu html, I changed

<ul>
    <li><a href="#" >item1</a></li>
    ....
</ul>

to

<ul class="menu_top">
    <li><a href="#" >item1</a></li>
    ....
</ul>

on line one of the given html. Now all that I need to do is style {width:225px; } and change the :hover element, thanks for everyones help!



Solution :

You can use the following CSS:

ul.menu_top {
    float:left;
    width:70%;
    margin: 8px 100px 0 0;
    border-radius:4px;
    background-color: #c4092a;
    list-style-type: none;
    z-index:+1;
}
ul.menu_top li {
    float: left;
    position: relative;
    margin: 4px 2em 4px 4px;
    padding: 0;
}
ul.menu_top li ul {
    visibility: hidden;
    position: absolute;
    top:100%;
    left:0px;
    padding:0.5em;
    list-style-type: none;
    white-space:nowrap;
    background-color: #c4092a;
    border: 1px solid white;
    border-radius:4px;
    z-index:+1;
}
ul.menu_top li:hover > ul {
    visibility: visible;
    z-index: +2;
}
ul.menu_top li ul li {
    padding: 0;
    margin: 12px 4px;
    float:none;
    border:0;
    min-width:3em;
}
ul.menu_top li ul li ul {
    top:0;
    left:99%;
}
ul.menu_top a {
    background-color:#c4092a;
    color:white;
    text-decoration:none;
    padding:4px;
    font-size:18px
}
ul.menu_top a:hover, ul.menu_top a.haschildren.childselected, ul.menu_top a.selected {
    background-color:white;
    color:blue;
    text-decoration:none;
}
ul.menu_top li a.haschildren:after {
    content:"\00A0\00A0\25BC";
}
a {
    color:#0000aa;
    background-color:inherit;
}
body, ul, li { /* normalize for old browsers*/
    margin:0;
    padding:0;
}

It's taken from my old question. The .menu_top class is used only for distinguishing between the navigation menu and another unordered lists.

JSFiddle code & result page


    CSS Howto..

    How to do something like border-top-left-color. [CSS]

    image carousel showing all images

    How to apply css for a class within h2?

    How to Change Style of Parent
  • on Hover
  • Ideas with how to draw a specific large amount of circles on a page using a loop

    How do I animate an entire table row in Angular without affecting the table row border?

    Dojo: how to find css definition for digit.form.filteringselect, especially the drop down list?

    how to set transform for div without effect on background image?

    How to change css file of bx-slider, multiple sliders on a page [closed]

    Firebug shows 404 error for claro_rtl.css, but I can't find the source that is trying to reference that file

    simple text input box “autosuggest” script - how to overlap with css

    How to make CSS background-image responsive? [duplicate]

    How to hide a div on certain pages using CSS

    how can I center this menu with CSS

    How can you hide the title tag using CSS?

    How to use calc in CSS for mozilla firefox without position absolute

    How to keep the Parent menu hovered while the mouse in child menu in a Dropdown Menu

    How to draw a dotted line with css?

    How do I get nested divs to be same height and expand to the largest of the heights?

    How animate stacking divs in javascript/css?

    How to grows up a div height with a table that has your rows added dynamically?

    CSS how do I define the height between multiple label and textboxes elements

    How to make the contents of a div not wrap?

    how to add class with animation?

    how to indent html output using CSS

    How to stop Visual Studio css intellisense breaking when css is added via a custom control

    How do I get an object from d3.data()?

    How can i stop my text css from over-riding my form on my blog?

    How to keep div height fixed during changing its content?

    How to make CSS/HTML prototyping faster for engineers without strong CSS skills?