WordPress.org

1. ebloss
   Member
   Posted 8 months ago #

   Greetings! I want to put a horizontal menu in the footer of a site, with submenu items listed directly under the parent menus. I know it can be done with CSS, but how? I'm stumped and can't seem to find the answer here. I looked at this thread and used the code, but the submenu items are not lining up under the parents correctly. Here's approximately how I want it to look:

   Home About Services                   Our Team             Experience
               Financial                  Charles Reardon      Transactions
               Restructuring              Liran Gordon         Case Studies
               Mergers & Acquisitions     Jeffrey R. Wilson
               Capital-Raising            Andrew Gutmann
               Principal Investing        John E. McCarrick
                                          Li Jin G. Soe

   Here's the code I'm using in the footer.php template:

   <ul class="bottomnav">
   	<?php wp_nav_menu( array('menu'=>'Main') ); ?>
   	</ul>

   Here's my CSS:

   ul.bottomnav {margin:10px 0;overflow:hidden;}
   ul.bottomnav li {padding:0 30px 0 34px;list-style-type:none;display:inline;}
   ul.bottomnav li a,#footernav a:active,#footernav a:visited{text-decoration:none;}
   ul.bottomnav li a:hover{text-decoration:underline;}

   Here's the test page: http://www.asgaardcapital.com/test/

   Thanks in advance for your help!!

2. sixhours
   Member
   Posted 8 months ago #

   Try something like this:

   ul.bottomnav li {
       float: left;
       list-style-type: none;
       padding: 0 30px 0 34px;
   }
   
   ul.menu li ul.sub-menu li {
       float: none;
       padding-left: 5px;
   }

   You may need to play with the padding a bit to get things lined up the way you want.

3. ebloss
   Member
   Posted 8 months ago #

   Thank you so much, sixhours! That worked perfectly.

Reply

You must log in to post.