Problem with drop down roll over menu

Posted on 2006-07-21
Last Modified: 2012-06-27
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; }
Question by:MikeMCSD

Accepted Solution

SysTurn earned 500 total points
ID: 17157650
try adding this to your css

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

Kind Regards
LVL 16

Author Comment

ID: 17170994
thanks Bakr ..  that worked.

Featured Post

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question