About All Levels Navigational Menu (v3.02)

[denysaputra]

1) Script Title: All Levels Navigational Menu (v3.02)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/

3) Describe Problem: See below.

Hi Guys!

Firstly, greetings! I'm deny, new member here, and new in CSS/HTML though. I need some guide or advice
Just trying to play and learn with the "All Levels Navigational Menu (v3.02)", I did install in on my test project.
Looks very good with it. But the problem is appear when I test the menu (sub level menu) by adding longer text. The text is out from the menu box horizontally.
Please check my screenshot attached.

Much appreciated your help!

[denysaputra]

Any help?

[james438]

I moved your thread here where you will probably get better help and reformatted it a little because you are asking for help with a dynamicdrive script.

Please post a link to your site so that others can better help diagnose your problem.

[denysaputra]

Many thanks for your help james! I don't know much about the script, tried everything, editing with the CSS. No solution found so far.
By the way, the site is not online now.
Any other users had similar case?

I moved your thread here where you will probably get better help and reformatted it a little because you are asking for help with a dynamicdrive script.

Please post a link to your site so that others can better help diagnose your problem?

[ajfmrf]

there is a width to the links and if you go beyond it that's what happens.

You will need to expand the whole menu to make longer text links as you are showing in your post.

Is that the idea? You want to do this? Long text links instead of the normal(standard limited size as the script uses)?

Can you post what you have now for the page you are talking about?

[denysaputra]

Hi
Thank you for your reply
This is the HTML I've written

<nav id="navigation">
						<ul class="ddsmoothmenu">
							<li><a href="about.html">About us</a></li>  
							<li>
								<a href="#">Drop down</a>
								<ul>
									<li><a href="#">One level menu</a></li>
									<li><a href="#">Very Long Top Level Menu with Very Long Text Very Long Top Level Menu with Very Long Text</a>
										<ul>
											<li><a href="#">Example level</a></li>
											<li><a href="#">Example level</a></li>
											<li><a href="#">Example level</a></li>
										</ul>
									</li>
									<li><a href="#">Three level menu</a>
										<ul>
											<li><a href="#">Example level</a>
											<ul>
												<li><a href="#">Example level</a></li>
												<li><a href="#">Example level</a></li>
												<li><a href="#">Example level</a></li>
											</ul>											
											</li>										
											<li><a href="#">Example level</a>
											<ul>
												<li><a href="#">Example level</a></li>
												<li><a href="#">Example level</a></li>
												<li><a href="#">Example level</a></li>
											</ul>											
											</li>
										</ul>
									</li>									
								</ul>
							</li>
							<li><a href="index.html">Archive</a></li>
							<li><a href="contact.html">Contact</a></li>
						</ul>
					</nav>

and this is the CSS

.ddsmoothmenu ul{
	z-index:999999;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

/*Top level list items*/
.ddsmoothmenu ul li{
	position: relative;
	display: inline;
	float: left;
	padding:0;
	margin:0;
}

/*Top level menu link items style*/
.ddsmoothmenu ul li a{
	color:#999999;
	font-style:normal;
	padding:0;
	margin:10px 0 10px 0;
	display: block;
	text-decoration: none;
	font-weight:normal;	
}

.ddsmoothmenu ul li a span{
	text-transform:none;
	font-style:italic;
	font-size:11px;
	font-weight:normal;
}

.ddsmoothmenu ul li.last{
	border-right:none;
}

 .ddsmoothmenu ul li.first{
 	border-left:none;
 }
 
* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
	display: inline-block;
}

.ddsmoothmenu ul li a.selected, .ddsmoothmenu ul li a:hover, .ddsmoothmenu ul li a.active{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
	color:#fff;
}

#navigation ul li ul li a:hover, #navigation ul li ul li a.selected, ul li ul li a.active{
	color:#fff;
}

/*1st sub level menu*/
.ddsmoothmenu ul li ul{
	z-index:999999;
	position: absolute;
	left: 20px;
	display: none; /*collapse all sub menus to begin with*/
	visibility: hidden;
	margin:0;
	padding:0;
	border:none;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{
	display: list-item;
	float: none;
	margin:0;
	padding:0;	
	border:none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{
	background:#1c1c1c;
	border-top:1px solid #999999;
	
}

#navigation .ddsmoothmenu ul{
	border-top:1px solid #080808;
	background:#1c1c1c;
	margin:0;
	padding:0;
}

#navigation .ddsmoothmenu ul ul{
	background:#1c1c1c;	
	border-top:1px solid #080808;
	margin:0 0 0 0;
	padding-top:0;
}

/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{
	width: 160px; /*width of sub menus*/
	margin: 0;
	text-transform:none;
	color:#999999;
	border:none;
	border-top:1px solid #363636;
	border-bottom:1px solid #080808;
	font-weight:normal;	
	font-size:12px;
	display: inline-block;
	line-height:18px;
}


.ddsmoothmenu ul li ul li a:hover {
	background:#1e1e1e;
}
#navigation .ddsmoothmenu ul li{
	margin:0;
	line-height:18px;
	text-align:left;
	display: inline-block;
}

#navigation .ddsmoothmenu ul li a{
	padding:5px 20px 5px 20px;display:block;
}

Is that the idea? You want to do this? Long text links instead of the normal(standard limited size as the script uses)?

Yes, exactly is it. I want to use longer text in the 2nd level menu (dropdown), and I hope when I use it, the text is will adjusted vertically and still inside the "width" that I gave background. Instead of horizontally our from that "width".

Any thought?

Thnak you;
Deny

there is a width to the links and if you go beyond it that's what happens.

You will need to expand the whole menu to make longer text links as you are showing in your post.

Is that the idea? You want to do this? Long text links instead of the normal(standard limited size as the script uses)?

Can you post what you have now for the page you are talking about?

[Beverleyh]

Sorry - the code you posted is incomplete and doesnt do much to help us.

The demo wraps text as expected when it gets too long, so it must be down to something else in the rest of your code.

The only thing I can think of is that you've set a text-wrap CSS property somewhere that is affecting the menu as well.

If you need more help, please post a link to you page.

[ajfmrf]

That does not include the js script and any of the rest of the css files.

Please post a complete (all) of the markup for your page.Everything and all of it please, as you have it on your page...

[ajfmrf]

I made a temp file and made a few items long like you are asking about and they worked fine within the menu.

http://www.web-user.info/test/alllevels/demo.htm

I only made a change in the with of the menu in the top menu css file,thats all I changed

[denysaputra]

Hii Bud!

Many thanks for the help!
I still on my efforts to figured it out.
Will back to here soon (I hope so)

Many thanks
Deny

I made a temp file and made a few items long like you are asking about and they worked fine within the menu.

http://www.web-user.info/test/alllevels/demo.htm

I only made a change in the with of the menu in the top menu css file,thats all I changed