Grow your CSS skills. Land your dream job.

Footer Menu – No Dropdowns, All Inline

  • # June 5, 2013 at 1:34 am

    Hi all,

    Is it possible to have a footer menu display all inline, with no drop downs?

    I have a WordPress header menu with dropdowns, but on the footer, I’d like to be able to display ALL the links in a straight line.

    This is what I’m trying to accomplish (at the bottom of this site)
    http://www.singleinstilettos.com

    I’m doing okay, but so far some of the padding is off on some of the links.

    Here’s my code…
    .footer_menu {
    margin: auto;
    width: 90%;
    }
    .footer_menu li, .footer_menu ul {
    display: inline-block;
    list-style: none outside none;
    margin-bottom: 5px;
    }
    .footer_menu li {
    padding-right: 10px;
    }
    .footer_menu li a {
    color: #373737;
    text-decoration: none;
    }
    .footer_menu li a:hover {
    text-decoration: underline;
    }
    .footer_menu ul li ul li {
    padding-left: 10px;
    }

    # June 5, 2013 at 1:35 am

    (How do I make code in a black box like you guys have? For some reason I’ve never been able to accomplish this correctly.)

    Edit: It works if I put it in a reply, without anything above it.

    # June 5, 2013 at 1:35 am

    .footer_menu {
    margin: auto;
    width: 90%;
    }
    .footer_menu li, .footer_menu ul {
    display: inline-block;
    list-style: none outside none;
    margin-bottom: 5px;
    }
    .footer_menu li {
    padding-right: 10px;
    }
    .footer_menu li a {
    color: #373737;
    text-decoration: none;
    }
    .footer_menu li a:hover {
    text-decoration: underline;
    }
    .footer_menu ul li ul li {
    padding-left: 10px;
    }

    # June 6, 2013 at 1:29 am

    Would I need to do a PHP hack that would just change all my dropdown submenus to all regular parent menus instead, or is this possible with CSS to ignore the list heirarchy?

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".