• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 296
  • Last Modified:

Problem with drop down roll over menu

I'm trying to make the text appear as one long line on the pull box for this menu.

When you click the menu item Products, then Cameras,
and the pull out menu appears,
I want to make the items in that pull out menu appear as one long line,
but it wraps to a certain length:

Menu #5    on this page:


I made the pull out box bigger, but the text still wraps and doesn't display as a long line:

/* controls box lenght for slide out size */
.menu5 li:hover ul li:hover ul,
.menu5 li a:hover ul li a:hover ul {
visibility:visible; color:#000; border:1px solid #ddd; height:auto; background:#fff;
width:15.5em;          <<<<<<<<<<<<<< make the pull out box bigger

Which parameter (if any) would stop the text from wrapping?  thanks

Menu #5

<UL class=menu5>
<LI class=home><A
href="www">Home</A> </LI>
<LI class=products><A class=drop
href="www">Products<!--[if IE 7]><!--></a><!--<![endif]-->
<LI class=subprod><A href="www">Mobiles</A> </LI>
<LI class=subprod2><A href="www">Photoframes</A> </LI>
<LI class=subprod2><A href="www">Tripods</A> </LI>
<LI class=subprod><A href="www">Memory cards</A> </LI>
<LI class=subprod3><A class=drop href="www">Cameras<!--[if IE 7]><!--></a><!--<![endif]-->

<LI><A href="www">SLRs</A> </LI>
<LI><A href="www">Compact</A> </LI>
<LI><A href="www">Digital</A> </LI>
<LI><A href="www">Video</A>
</LI></UL></TD></TR></TBODY></TABLE><!--[if lte IE 6]></A><![endif]--></LI>
<LI class=subprod2><A href="www">Camcorders</A> </LI>
<LI class=subprod><A href="www">Accessories</A>
</LI></UL></TD></TR></TBODY></TABLE><!--[if lte IE 6]></A><![endif]--></LI>
<LI class=services><A class=drop href="www">Services<!--[if IE 7]><!--></a><!--<![endif]-->
<LI class=subserv4><A href="www">Photography</A> </LI>
<LI class=subserv3><A href="www">Video editing</A> </LI>
<LI class=subserv><A href="www">Web site Design and Hosting</A> </LI>
<LI class=subserv5><A href="www">Reference guides</A> </LI>
<LI class=subserv2><A href="www">Tutorials</A> </LI></UL></TD></TR></TBODY></TABLE><!--[if lte IE 6]></A><![endif]--></LI>
<LI class=contact><A href="www">Contact us</A> </LI>
<LI class=site><A href="www">Site Map</A> </LI>
<LI class=news><A class=drop href="www">News<!--[if IE 7]><!--></a><!--<![endif]-->
<LI class=subnews3><A href="www">Breaking</A> </LI>
<LI class=subnews><A href="www">Latest</A> </LI>
<LI class=subnews><A href="www">May 2006</A> </LI>
<LI class=subnews2><A class=drop href="www">News Archives and Articles<!--[if IE 7]><!--></a><!--<![endif]-->
<UL class=left>
<LI><A href="www">April 2006</A> </LI>
<LI><A href="www">March 2006</A> </LI>
<LI><A href="www">February 2006</A> </LI>
<LI><A href="www">January 2006</A> </LI></UL></TD></TR></TBODY></TABLE><!--[if lte IE 6]></A><![endif]--></LI></UL></TD></TR></TBODY></TABLE><!--[if lte IE 6]></A><![endif]--></LI></UL>

=========================== CSS:

.menu5 { text-align:left; font-family: verdana, sans-serif; position:relative;
font-size:0.9em; height:2.5em; margin:0 padding:0; list-style-type:none; }

.menu5 ul {
padding:0; margin:0; list-style-type:none; /* for Firefox */

.menu5 li { float:left; position:relative; }

/* the 10em (and 11em) is the the width of the text on the top of the menu */
.menu5 li a, .menu5 li a:visited {
display:block; text-decoration:none;
width:10em; color:#000; float:left; padding-right:1em;
height:3em; line-height:3em; color:#909;
* html .menu5 li a, .menu5 li a:visited {
width:11em; w\idth:10em; /* hack for IE5.5 */

.menu5 li a.drop, .menu5 li a.drop:visited { font-weight:bold; }

.menu5 li ul { visibility:hidden; position:absolute; top:2.5em; left:0; height:0; overflow:hidden; }

table {
margin:-1px; border-collapse:collapse; font-size:1em; /* font size for IE5.5 */

/* fist line style for IE7 and non-IE browsers and the second line for IE5.5 and IE6 */
.menu5 li:hover a,
.menu5 li a:hover { text-decoration:underline; border:0; }

/*  controls drop down box size */
.menu5 li:hover ul,
.menu5 li a:hover ul {
visibility:visible; height:auto; width:15em; background:#fff; border:1px solid #ddd;
left:0; top:2.5em; overflow:visible; }

.menu5 li:hover ul li a,
.menu5 li a:hover ul li a {
display:block; font-weight:normal; background:transparent; text-decoration:none;
height:auto; line-height:1.5em; padding:0.5em; width:10em;  }

* html .menu5 li a:hover ul li a {
width:12em; w\idth:10em; /* hack for IE5.5 */

.menu5 li:hover ul li a.drop,
.menu5 li a:hover ul li a.drop { font-weight:bold; }

.menu5 li:hover ul li ul,
.menu5 li a:hover ul li a ul { visibility:hidden; position:absolute; top:0; left:9.5em; height:0; overflow:hidden; }

.menu5 li:hover ul li a:hover,
.menu5 li a:hover ul li a:hover { text-decoration:underline; }

/* controls box lenght for slide out size */
.menu5 li:hover ul li:hover ul,
.menu5 li a:hover ul li a:hover ul {
visibility:visible; color:#000; border:1px solid #ddd; height:auto; background:#fff;

.menu5 li:hover ul li:hover ul.left,
.menu5 li a:hover ul li a:hover ul.left { left:-9.3em; }

.menu5 li:hover ul li:hover ul li a,
.menu5 li a:hover ul li a:hover ul li a { display:block; height:auto; }

.menu5 li:hover ul li:hover ul li:hover a,
.menu5 li a:hover ul li a:hover ul li a:hover { text-decoration:underline; }
1 Solution
try adding this to your css

.menu5 LI A:hover UL LI {
    white-space: nowrap;

Kind Regards
MikeMCSDAuthor Commented:
thanks Bakr ..  that worked.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now