Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Styling drop down menu elements

Styling drop down menu elements

Problem

I am trying to style the Drop down level of my navigation (for example, increase the width of the drop down), but can't find the relevant selector to change. The site is http://www.mattmaclennan.co.uk/a2

Example: On the "New Motorcycles" drop down, I would like to increase the width, and then move the rollover elements to the side

I know the code to use, but I just can't find the relevant selector to do it under. Tearing my hair out here!

Thanks for any advice in advance!

Problem courtesy of: Matt Maclennan

Solution

maybe this will help? http://jsfiddle.net/Xtu9t/

its basic dropdown so you have to do a little bit more styling yourself. but here is the css

body {    
font-family: Helvetica, sans-serif;
font-size: 14px;
line-height: 10px;
}

nav ul ul {
display: none;
}
nav ul li:hover > ul {
    display: block;
}


nav ul {
     background: red; 
     list-style: none;
     position: relative;
    display: inline-table;
}
nav ul:after {
content: "";
clear: both;
display: block;
}

nav ul li {
    float: left;

}
    nav ul li:hover {
        background: black;
    }
        nav ul li:hover a {
            color: #fff;
        }

    nav ul li a {
        display: block;
        padding: 25px 20px;
        color: #fff;
        text-decoration: none;

    }


nav ul ul {
    background: red;
    padding: 0;
    position: absolute;
    top: 100%;
}
    nav ul ul li {
        float: none;
        position: relative;
    }
        nav ul ul li a {
            padding: 15px 20px;
            color: #fff;
        }    
            nav ul ul li a:hover {
                background: #000;
            }

nav ul ul ul {
    position: absolute;
    left: 100%;
    top:0;
}

As you can see no class or id's where used. ​

Solution courtesy of: Jarno van Rhijn

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Styling drop down menu elements

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×