Solved

Problem with drop down roll over menu

Posted on 2006-07-21
2
261 Views
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:

http://www.cssplay.co.uk/menus/drop_examples.html

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]-->
<TABLE>
<TBODY>
<TR>
<TD><UL>
<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]-->

<TABLE>
<TBODY>
<TR>
<TD><UL>
<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]-->
<TABLE>
<TBODY>
<TR>
<TD>
<UL>
<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]-->
<TABLE>
<TBODY>
<TR>
<TD><UL>
<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]-->
<TABLE>
<TBODY>
<TR>
<TD>
<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;
width:15.5em;
}

.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; }
0
Comment
Question by:MikeMCSD
2 Comments
 
LVL 6

Accepted Solution

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

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


Kind Regards
Bakr
0
 
LVL 16

Author Comment

by:MikeMCSD
ID: 17170994
thanks Bakr ..  that worked.
0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Ninja Form Reformat Bold Subheader for Wordpress site 5 28
Problem to Popup 2 51
Hovering effect 9 29
Menu Inconsistent 3 21
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…

706 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now