Grow your CSS skills. Land your dream job.

Need Help Styling a Menu

  • # February 11, 2013 at 9:16 am

    Here is my site: [http://solarsource.net/new/](http://solarsource.net/new/ “Solar Source”)

    Hover over the main nav to see the menu in question.

    1. The About Us menu is almost perfect. The only thing I need to fix on this one is to extend the vertical lines all the way to the top and bottom.

    2. On the News menu, we need to extend the vertical lines all the way to the top and bottom. In addition, the blue highlighting needs to extend the entire height/width of the box.

    3. On the Products/Services menu, again the vertical line needs to be the entire height of the menu. Also, the blue hover background needs to extend the full width inside and the “headers” need to be bold (For Home, Business & Government, Education).

    This is wordpress so I can add a special class to the menus if needed but the fixes need to be generic enough so we can add new items without causing something to break.

    Any help would be greatly appreciated.

    # February 11, 2013 at 10:17 am

    As you have the border on the list items you will have to remove any top/bottom margin and substitute in padding instead. This will ‘join’ the borders but unless you have the same number in each column you will still have problems.

    As for list items that are different heights (news – submenu)….well, there I think you will have to fall back to javascript…unless others can thinks of something.

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

You must be logged in to reply to this topic.

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