CSS Issue for Wordpress Menu..

[Cormac]

Hi, i'm using the following CSS code to style a menu in wordpress. The php code to render the menu is displayed below. The code is meant to display menu items in a block style but as you can see from the screen shots below it is not having the desired affect.

Menu Correct is how the menu is meant to be displayed and Menu Wrong is what i'm getting from the code below. Does anyone why the error is occuring?

Thanks

h4 {
    font-weight:700;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #000000;
    margin: 0 0 0px 0px;
    padding: 0px 0 0px 0px;
    text-align: left;
    display: block;
}

#showentry {
    margin: 0;
    padding: 0;
    display:block;
}

#showentry a {
    text-decoration:none;
}
#showentry:hover {
    color: #ffffff;
    display:block;
    background-color:#FF7324;
}

the php code to display the menu is

<div id="showentry">
<ul>
<h4><?php wp_list_cats(); ?></h4>
</ul>
</div>

 

[daviddoran]

Are all the list entries going to be inside that H4. Despite being invalid I imagine it will affect them.

 

[Cormac]

yes, the list values will all be inside the h4, how is it invalid?

 

[daviddoran]

Updated CSS

I imagine what you want is more correctly:

#showentry ul li{
    font-weight:700;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0px;
    padding: 0px;
    text-align: left;
    display: block;
    list-style:none;
}

#showentry {
    margin: 0;
    padding: 0;
    display:block;
    width:300px;
}

#showentry ul li a {
    text-decoration:none;
    color: #000000;
    font-size: 14px;
    display:block;
    width:100%;
}
#showentry ul li a:hover {
    color: #ffffff;
    background-color:#FF7324;
    display:block;
    width:100%;
}

The HTML would be:

<div id="showentry">
  <ul>
     <li> <a href="hh">Uncat</a> </li>
     <li> <a href="hh">2cat</a> </li>
     <li> <a href="hh">AMcat</a> </li>
  </ul>
</div>

So your PHP should be:

<div id="showentry">
  <ul>
      <?php wp_list_cats(); ?>
  </ul>
</div>

And the result is: (the middle one is being hovered over)

 

[Cormac]

cheers david, that worked a treat.