Knowledge Base support case for AllWebMenus, abstracted and stripped of all user’s private info.


Initial Email From: Becky
Initial Email Subject:  adding drop down menu to website
Support Case Month: March 2012

Hi.

I am done building my web menu. My coding is set so the drop down menus have an auto width however they aren’t adjusting to the correct widths..some have extra space and others have too little thus forcing the sub menus to become vertical instead of horizontal. Since each Sub Menu has somewhere between 1-3 columns I wasn’t sure how many to put in the style editor. I am wondering if it will in fact still look right on an html page. Which brings me to my other issue. I am planning on adding the menu to an existing site. It’s through Network Solutions, the menu would thus need to appear in the header design coding (to apply to all pages of the site). I’ve been reading through your knowledge bank but keep finding information on linking the menu to a site that has a local root on the desktop, this site does not. The site is {URL REMOVED}.

I’ve attached my menu.

Thank you for all of your help and assistance!

Cheers,

Becky.

Reply From: Likno Customer Support

Dear Becky,

If you turn the “Menu Structure” option back to “inside this project” you will see that you have set custom widths for most of your submenus:

custom submenu width

This is why these submenus are not becoming vertical, while the ones that do not have a width set become vertical.

There are two solutions for this:

1) change the menu back to “populate inside this project” so that the custom widths are actually active, and set widths for all submenus

OR

2) change your HTML code for each submenu so that it does not “brake”. One way would be to add your DIVs within TDs of a single table row, for example:

<table><tr>

<td>

<div style="background:#000000; font-size:11px; color:#FFFFFF; width:auto; height:325px; float: left; line-height:20px; border-right:1px solid #BBBBBB;">

  <p style="color:#FFF; font-size:13px; font-weight:bold; margin:10px 15px 0 15px;"><a href="{LINK REMOVED}">Car Audio</a></p>

  <p style="margin:10px 15px 20px 15px;"><a href="{LINK REMOVED}" style="color:#ffffff;">Car Stereo & Head Units</a><br/>

    <!-- MANY MORE LINKS HERE -->

    <a href="{LINK REMOVED}" style="color:#ffffff;">Satellite Radio</a></p>

</div>
</td>

<td>

<div style="background:#000000; font-size:11px; color:#FFFFFF; width:auto; float: left; height:325px; line-height:20px; border-right:1px solid #BBBBBB;">

  <p style="color:#FFF; font-size:13px; font-weight:bold; margin:10px 15px 0 15px;"><a href="{LINK REMOVED}">Car Speakers</a></p>

  <!-- MANY MORE LINKS HERE -->

  <p style="margin:10px 15px 20px 15px;">
    <a href="{LINK REMOVED}" style="color:#FFFFFF;">Tweeters</a>
  </p>

</div>

</td>

<td>

<div style="background:#000000; font-size:11px; color:#FFFFFF; width:auto; float: left; height:325px; line-height:20px; border-right:1px solid #BBBBBB;">

  <p style="color:#FFF; font-size:13px; font-weight:bold; margin:10px 15px 0 15px;"><a href="{LINK REMOVED}">Car Amplifiers</a></p>

  <p style="margin:10px 15px 20px 15px;">
    <a href="{LINK REMOVED}" style="color:#FFFFFF;">Class D</a><br/>

   <!-- MANY MORE LINKS HERE -->

    <a href="{LINK REMOVED}" style="color:#FFFFFF;">Vehicle Specific</a></p>

</div>

</td>

<td>

<div style="background:#000000; font-size:11px; color:#FFFFFF; width:auto; float: left; height:325px; line-height:20px; border-right:1px solid #BBBBBB;">

  <p style="color:#FFF; font-size:13px; font-weight:bold; margin:10px 15px 0 15px;"><a href="http://www.driveinautosound.com/carsubwoofers.aspx">Car Subwoofers</a></p>

  <p style="margin:10px 15px 20px 15px;">
    <a href="{LINK REMOVED}" style="color:#FFFFFF;">6 1/2" Subwoofers</a><br/>

    <!-- MANY MORE LINKS HERE -->

    <a href="{LINK REMOVED}" style="color:#FFFFFF;">Vehicle Specific</a></p>

</div>

</td>
<td>

<div style="background:#000000; font-size:11px; color:#FFFFFF; width:auto; float: left; height:325px; line-height:20px;;">

  <p style="color:#FFF; font-size:13px; font-weight:bold; margin:10px 15px 0 15px;"><a href="{LINK REMOVED}">Installation Accessories</a></p>

  <p style="margin:10px 15px 20px 15px;">
   <a href="{LINK REMOVED}" style="color:#FFFFFF;">Car Stereo Installation</a><br/>

    <!-- MANY MORE LINKS HERE -->
    <a href="{LINK REMOVED}" style="color:#FFFFFF;">Batteries</a></p>

</div>

</td>
</tr></table>

Regards,
Kostas
Likno Customer Support
www.likno.com
Create any type of javascript menu (CSS menu, drop-down menu, sliding menu), button, html tree, modal window, tooltip, accordion, tab, scroller, jQuery slider or design for your websites!
Like us on Facebook – Follow us on Twitter

Reply From: Becky

Kostas,

Thanks for your assistance I was able to fix the alignment issue I was having with my submenus.

Thanks,
Becky