Solved

Problem with drop down roll over menu

Posted on 2006-07-21
2
274 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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 Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
2 separate CSS animations 2 38
Google Tag Manager - Add Trigger Using Div class 22 99
Why isn't my DIV and Form centering? 1 28
Top Aligning Inner Divs 5 33
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

734 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