CSS Formatting on Wordpress Menu Class

Question

I have the following formatting on my horizontal WordPress menu. It works great.

.menu {
  width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 50;
  list-style: none;
}

In the footer of my theme I am trying to use a vertical menu through the WordPress menu setup. When I put the menu in the footer via a widget I get this:

<div class="menu-footer-container"><ul id="menu-footer" class="menu">

Because the UL class is menu it picks up the above horizontal css and makes the menu horizontal in my footer. How do I add CSS to make the menu vertical in my WordPress footer?

Answer 1

<ul id="menu-footer" class="menu-ver">

You can use a different class for example menu-ver having following CSS,

.menu-ver {
  width: 200px;
  margin: 0 auto;
  position: relative;
  z-index: 50;
  list-style: none;
}
.menu-ver li{
  width: 100%;
}

Also you can adjust the margin property according to your design if you don't want it to get centered.

Answer 2

.menu-footer-container .menu li {
    display: inline;
}

Use this code and it will work nicely. Thanks

Answer 3

I don't think the problem it's on the .menu class, I'm assuming the problem it's in a CSS style for your li tags somewhere on your stylesheet.

It should look something like this: .menu li {display:inline-block;}. You can fix this by giving a style only for the li tags for your footer like this:

#menu-footer li {
    display: list-item;
}

Check out this online example on jsFiddle

---

Anyways if you still wanna style the .menu class just for the footer, you can do it like this:

.menu-footer-container .menu { ... } or simply style #menu-footer { ... } with the desired results.