WordPress.org

1. design_dolphin
   Member
   Posted 1 year ago #

   I am working on a theme, and the menu has a float:left for the individual menu items (ul li):

   #main_menu ul li {
       float: left;
       text-transform: uppercase;
       vertical-align: middle;
   }

   This float:left is interfering with the div structure below, until it reaches a clear:both underneath the "le" and "r" div. Getting rid of the float:left solves it, however then the menu does not look right. How can I stop it from doing that?

   A link to the theme:
   http://www.ecodelphinus.com/temp/

2. design_dolphin
   Member
   Posted 1 year ago #

   The problem was a display:block value in the a href value in the CSS. This was overriding any attempt of adding display:inline to the ul li.

   #main_menu a {
       display:block;
       padding: 15px 30px 13px;
   }

   Removing the display:block from the a href and replacing float:left in the ul li with display:inline solved it.

   #main_menu ul li {
       display:inline;
       text-transform: uppercase;
       vertical-align: middle;
   }

Topic Closed

This topic has been closed to new replies.