menu is not showing properly

Question

I am working on premiumepress - RealtorPress child theme and currently having an issue with the menu.

I actually use the PremiumPress PHP code to show the menu

<?php echo $ThemeDesign->LAY_NAVIGATION(); ?> 

I wrap this code under my CSS like:

<ul class="sf-menu">
    <?php echo $ThemeDesign->LAY_NAVIGATION(); ?> 
</ul> <!-- END .sf-menu -->

I'm using Superfish for the menu, but I am unable to understand why its' not working properly as I use this plugin correctly.

<script type="text/javascript">
    jQuery(document).ready(function() { 
        jQuery('ul.sf-menu').superfish({
            delay:       200, 
            animation:   {opacity:'show',height:'show'},
            speed:       'fast',
            autoArrows:  false,
            dropShadows: false
        });
    });     
</script>

But when I see the home page ... I discover there are some irrelevant div's inside the menu..

<div class="dropdown_1column"> <div class="col_1 firstcolumn">

please check the real link to get idea .. what i am talking about :

http://www.ruralpropertyagents.com/

So please help me get rid of this ..

Answer 1

Your hunch is correct - remove those div elements and you'll be fixed. I used fiddler to remove them from the markup and it cleared up the issue immediately. They currently wrap all of your nested unordered lists.

When all is corrected, the structure should resemble the following:

<ul class="sf-menu">
  <li><a href="...">Home</a></li>
  <li><a href="...">Commercial Sales</a>
      <ul>
        <li><a href="...">Industrial Units for Sale</a></li>
        <li><a href="...">Office Blocks for Sale</a></li>
      </ul>
  </li>
</ul>