All Levels Navigational Menu Width & Alignment Problems

[mindretreat]

1) Script Title: All Levels Navigational Menu (v2.1)
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...menu/index.htm
3) Describe problem:

I have 2 problems: Please go to www dot micemassage dot com to see the problem.

Problem 1: The text in some of my drop-down menus are longer than others. How can I make the width of one drop-down menu to be wider than others? Compare "About Us --> AAAAAAAAAAAAAAAA1" with "Brands --> B1". Is it possible to have different drop-down widths for different top buttons?

Problem 2: The last top button has drop-down width that aligns to the left and it exceeds my right website border. How do I make the last menu option align to the right along my right website border so that it does not exceed? See under "Spa Software --> H1" and you can see it exceeds the right border.

Please kindly assist.

Thank You very much in advance.

[Nile]

At the top of the page, you have:

<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-base.css" /> 
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-topbar.css" />
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-sidebar.css" />

You can delete the highlighted, and also get rid of ddlevelsfiles/ddlevelsmenu-sidebar.css. It is not needed.

Now, in ddlevelsfiles/ddlevelsmenu-base.css, find this code:

.ddsubmenustyle li a {
  background-color: #F0F0F0;
  color: #000000;
  display: block;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 11px;
  margin: 0;
  padding: 5px;
  text-decoration: none;
  width: 160px;
}

And fix it to this:

.ddsubmenustyle li a {
  background-color: #F0F0F0;
  color: #000000;
  display: block;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 11px;
  margin: 0;
  padding: 5px;
  text-decoration: none;
  width: auto;
}

[ddadmin]

You can individually alter the width of a certain drop down menu by adding an inline CSS "width" attribute inside the sub menu's HTML, ie:

  	    <ul id="ddsubmenu1" class="ddsubmenustyle">
            <li><a href="#" style="width:250px">AAAAAAAAAAAAAAAAAAAAAAAAAAAAA1</a></li>
			<li><a href="#" style="width:250px">A2</a></li>
			<li><a href="#" style="width:250px">A3</a></li>
</ul>

The last top button has drop-down width that aligns to the left and it exceeds my right website border. How do I make the last menu option align to the right along my right website border so that it does not exceed? See under "Spa Software --> H1" and you can see it exceeds the right border.

Hmm there's no easy way to just have the right most drop down menu drop to the left (instead of right) of the window's edge unfortunately. The script does this automatically only if a drop down menu spills over the browser's right edge, not the edge of a certain DIV as in your case.

Edit: Fixed error in sample code

[mindretreat]

Thanks to Nile and DD Admin.

For DD Admin's suggestion, I cannot get your solution to work. The drop-down menu stays incorrectly aligned at 250px.

When I increased to 280px, the drop-down menu aligns correctly, but below the "Relaxation Lounges" instead of "Spa Software".

Please go to www dot micemassage dot com to see the effects of the solution at width:280px.

Please further assist.

Thank You.

[ddadmin]

Looking at your page, the HTML for your drop down menus (ULs) are invalid. It should be one nested UL containing additional sub ULs, not separate ULs as you have now. When in doubt, view the original HTML in the code you cut and pasted. You may also want to make sure you're familiar with the syntax of nested lists in HTML in general.

[mindretreat]

Hi,

In the Demo supplied with the file, there are also separate ULs for each individual drop-down menu.

I reproduced them as below. I do not want to include sub-items for each drop-down menu for a clearer picture.

Please see www dot micemassage dot com and you can see the style is similar to the below demo code except there are no sub-items.

Please further assist.

Thank You.

<!--Top Drop Down Menu 1 HTML-->


<ul id="ddsubmenu1" class="ddsubmenustyle">
<li><a href="#">Item 1a</a></li>
<li><a href="#">Item 2a</a></li>
<li><a href="#">Item Folder 3a</a>
  <ul>
  <li><a href="#">Sub Item 3.1a</a></li>
  <li><a href="#">Sub Item 3.2a</a></li>
  <li><a href="#">Sub Item 3.3a</a></li>
  <li><a href="#">Sub Item 3.4a</a></li>
  </ul>
</li>
<li><a href="#">Item 4a</a></li>
<li><a href="#">Item Folder 5a</a>
  <ul>
  <li><a href="#">Sub Item 5.1a</a></li>
  <li><a href="#">Item Folder 5.2a</a>
    <ul>
    <li><a href="#">Sub Item 5.2.1a</a></li>
    <li><a href="#">Sub Item 5.2.2a</a></li>
    <li><a href="#">Sub Item 5.2.3a</a></li>
    <li><a href="#">Sub Item 5.2.4a</a></li>
    </ul>
  </li>
	</ul>
</li>
<li><a href="#">Item 6a</a></li>
</ul>


<!--Top Drop Down Menu 2 HTML-->

<ul id="ddsubmenu2" class="ddsubmenustyle">
<li><a href="#">Item 1b</a></li>
<li><a href="#">Item 2b</a></li>
<li><a href="#">Item Folder 3b</a>
  <ul>
  <li><a href="#">Sub Item 3.1b</a></li>
  <li><a href="#">Sub Item 3.2b</a></li>
  <li><a href="#">Sub Item 3.3b</a></li>
  <li><a href="#">Sub Item 3.4b</a></li>
  </ul>
</li>
<li><a href="#">Item 4b</a></li>
<li><a href="#">Item Folder 5b</a>
  <ul>
  <li><a href="#">Sub Item 5.1b</a></li>
  <li><a href="#">Item Folder 5.2b</a>
    <ul>
    <li><a href="#">Sub Item 5.2.1b</a></li>
    <li><a href="#">Sub Item 5.2.2b</a></li>
    <li><a href="#">Sub Item 5.2.3b</a></li>
    </ul>
  </li>
	</ul>
</li>
<li><a href="#">Item 6b</a></li>
</ul>

<!--Top Drop Down Menu 3 HTML-->

<ul id="ddsubmenu3" class="ddsubmenustyle">
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a></li>
<li><a href="http://tools.dynamicdrive.com/favicon/">FavIcon Generator</a></li>
<li><a href="http://www.dynamicdrive.com/emailriddler/">Email Riddler</a></li>
<li><a href="http://tools.dynamicdrive.com/password/">htaccess Password</a></li>
<li><a href="http://tools.dynamicdrive.com/userban/">htaccess Banning</a></li>
</ul>

</body>
</html>

[Nile]

Did my code work?
Anyways, glad to help you!

[mindretreat]

Hi Nile,

Yes, your code does work.

However, I need each individual drop-down menu to be of different widths wheareas your suggestion is a universal change in width for all drop-down menus.

Please further assist.

Thank You.

[Nile]

Each does have a different width. The width for each one will only be as long as it needs to be, making the widths for each one depending on the length of content.

[mindretreat]

Hi Nile,

Yes, but there is a problem when there is a 2nd and 3rd level drop-down menu.

Please see www dot micemassage dot com and you can see the arrow in deeper level menus being "pushed" on top and blocking the menu text.

If this is solved, your solution can be implemented.

Can you please help on this. Thanks!