Smooth Navigational Menu - Variable Submenu Width?

[rtrinidad]

Script: Smooth Navigational Menu (v1.02)
http://www.dynamicdrive.com/dynamici...smoothmenu.htm

I'm hoping there is a way to vary the width of each submenu grouping. Currently the script allows for a single width for all submenus which causes the submenu to appear too long for some text and causes other text to wrap making the submenu item twice as high.

Any help would be great. Thanks.

[ddadmin]

You should be able to do this by inserting an explicit width using inline CSS into the sub menu you wish to have a varying width. For example:

<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Item 1</a></li>
<li><a href="#">Folder 0</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  <li><a href="#">Sub Item 1.3</a></li>
  <li><a href="#">Sub Item 1.4</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  <li><a href="#">Sub Item 1.3</a></li>
  <li><a href="#">Sub Item 1.4</a></li>
  </ul>
</li>
<li><a href="#">Folder 1</a>
  <ul style="width:150px">
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  <li><a href="#">Sub Item 1.3</a></li>
  <li><a href="#">Sub Item 1.4</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  <li><a href="#">Sub Item 1.3</a></li>
  <li><a href="#">Sub Item 1.4</a></li>
  </ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
  <ul>
  <li><a href="#">Sub Item 2.1</a></li>
  <li><a href="#">Folder 2.1</a>
    <ul>
    <li><a href="#">Sub Item 2.1.1</a></li>
    <li><a href="#">Sub Item 2.1.2</a></li>
    <li><a href="#">Folder 3.1.1</a>
		<ul>
    		<li><a href="#">Sub Item 3.1.1.1</a></li>
    		<li><a href="#">Sub Item 3.1.1.2</a></li>
    		<li><a href="#">Sub Item 3.1.1.3</a></li>
    		<li><a href="#">Sub Item 3.1.1.4</a></li>
    		<li><a href="#">Sub Item 3.1.1.5</a></li>
		</ul>
    </li>
    <li><a href="#">Sub Item 2.1.4</a></li>
    </ul>
  </li>
  </ul>
</li>
<li><a href="http://www.dynamicdrive.com/style/">Item 4</a></li>
</ul>
<br style="clear: left" />
</div>

Bear in mind the effects of CSS inheritance affecting the sub menus following that which you gave an explicit CSS width.

[rtrinidad]

I tried that earlier and noticed that the submenu was a different width as it was expanding but changed to the generic width after it was fully expanded.

I did figure out that your suggest works if you removed the "width" entry of the "sub level menu links style" in the ddsmoothmenu.css file.

In fact just removing the "width" entry in ddsmoothmenu.css seems to allow the menus to auto adjust the width of the submenus based on their longest content. Do you see an issue with this?