Solved

Problem with drop down roll over menu

Posted on 2006-07-21
2
264 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Install bootstrap locally using Angular CLI 2 45
How do i set padding within the sidebar? 2 27
CSS Question 5 41
form button worked now it doesnt anymore 9 41
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…
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…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

895 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

12 Experts available now in Live!

Get 1:1 Help Now