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 center multiple inline-block elements with CSS?

    How to create a floating mutlicolumn layout in CSS (Flexbox, float, inline-block)?

    Unable to show progress bar

    How to hover span content from li

    How to get odd/even coloring for IE and Firefox using CSS alone?

    How to avoid line breaks after “:before” in CSS

    How to reload or rerender CSS for a single HTML element? [duplicate]

    how to make an ul lay out horizontally?

    How can I force my table width into the width of my container?

    CSS select + select How to get first select

    How to align elements equally in a line in CSS/Bootstrap?

    How to conditionally load CSS

    Why do small spaces keep showing up in my web pages?

    How to make sure the UI always shrinks and fit to the window irrespective of the resolution and device via viewport or CSS

    CSS: How to blur background image within the div?

    How to animate 2 parallel lines in order to form an X on click using CSS and JQuery

    how can i center the footer text in the bottom of the page regardless of screen size

    How to repeat multiple images over one element using CSS

    How do I make this Javascript checkbox trigger action work like my CSS only example

    How to implement this kind of blur effect?

    CSS - How to add a glow effect around a fluid box?

    How to add tooltip to image on hover with CSS

    How to add multiple css rules at once through Dev-Tools or Firebug

    CSS: How to add borders of different colors to input radio buttons labels?

    How to select with css specific id only if have specific class on same div?

    How to add the same header and footer to all pages at once? HTML

    How should I re-create this design in HTML and CSS?

    How To Use CSS To Add Multiple Fonts In One Paragraph And How To Add Multiple CSS Properties To One CSS Id?

    How to split page and reveal stuff underneath?

    how to place content to the right of the fixed img with css 100% height (no width given)