Css Popup Menu Guidance Please...

[Web Weenie]

I'm trying to learn how to do this and failing miserably. I'm sure I'm making this more difficult than it is, but I simply don't understand this and I haven't found a tutorial on how to do this. Examples seem to be overly complicated to me and I'm not getting it.Here's what I'm trying to do:build a vertical list of popup menus separated by other html.Each popup needs a background image and the heading displayed on it. It's size and position are defined. Decoration needs to be none but color, size, and style needs to be specific and doesn't change on state. An small graphic needs to proceed the heading text.The menu popup needs to have a fade graphic for the entire menu with a 1px border. The menu needs to be placed to the left of the popup. Link text needs to be a set size, color and no decoration except for hover. A small graphic needs to be placed in front of the link based on a defined id.Hours of tinkering has produced this, which is close, but is now a bit convoluted from trial and error coding. Background graphics have been substituted for simple colors and the preceding graphic images have yet to be implemented.#######################################My CSS code: (be kind, I don't know what I'm doing)

<style type="text/css"><!--ul {width: 175px; height: 22px;padding-left:14px;margin: 0;font-family:Arial, Helvetica, Verdana, Tahoma, sans-serif;font: bold 14px Arial;}a:link { color: #FFFFFF;text-decoration: none;}a:visited { color: #CCCCCC;}a:hover { color: #FF0000;text-decoration: underline;}ul li {list-style-type: none;  border: 1px solid silver;  border-width: 1px 1px 1px 1px;  position: relative;  margin: 0;  padding: 0;}ul ul {display: none;}ul li:hover > ul {display: block; position: absolute; top: 5px; left: 170;/*text-decoration:underline;*/}li a {display: block;padding: 5px 7px; text-decoration:none;background: #CCCCCC;}ul#gomenu li a:hover {background: yellow;}ul#gomenu {width: 175px;height: 22px;}ul#gomenu > li:hover > ul {width: 100px; top: 5px; left: 150px;}ul ul {/*width: 10px;*/}--></style>###############################My HTML code:<ul id="gomenu">  <li class="pop"><a href="#">Group 1</a>	<ul id="g1">	<li><a href="#">Link 1.1</a></li>	<li><a href="#">Link 1.2</a></li>	<li><a href="#">Link 1.3</a></li>	<li><a href="#">Link 1.4</a></li>	<li><a href="#">Link 1. 5</a></li>	<li><a href="#">Link 1.6</a></li>	</ul>  </li>  <p> <font color="#000000" size="2" face="Arial, Helvetica, sans-serif">This is some arbitrary html objects.</font></p>  <li class="pop"><a href="#">Group 2</a>	<ul id="g2">	<li><a href="#">Link 2.1</a></li>	<li><a href="#">Link 2.2</a></li>	<li><a href="#">Link 2.3</a></li>	<li><a href="#">Link 2.4</a></li>	<li><a href="#">Link 2.5</a></li>   	</ul>  </li>  <p> <font color="#000000" size="2" face="Arial, Helvetica, sans-serif">This is some arbitrary html objects.</font></p>  <li class="pop"><a href="#">Group3</a>	<ul id="g3">	<li><a href="#">Link 3.1</a></li>	<li><a href="#">Link 3.2</a></li>	</ul>  </li></ul>

[student101]

My css knowledge is OK but I prefer to rely on an expert; ul-image-dropdownEnjoy!

[Web Weenie]

well thanks for the reply...Not only do I need to find a solution for this, I need to know how to do this. I've taken several examples and tried to rework, but I never get to where I need to be and all I accomplish is to break the code. I can't believe it's that hard, but I can't seem to figure it out and it seems the examples are unnecessarily complex. My two brain cells are peddling as fast as they can but can't seem to catch up.Basically I need a list with a list embedded into each item of the first list.Anybody know of a tut for this, I haven't been able to find one.

[student101]

Basically I need a list with a list embedded into each item of the first list.

Do you have an image of what you want?

[Web Weenie]

Ok, I just about have it! After 8 hours of pounding my head on the keyboard I have everything solved except one issue and I don't understand what is happening... I started out with a standalone example and added one element into the css script at a time. This allowed me to understand where each element needed to be and how things interact. Once I had a substantial portion done I created the graphics I wanted to use. Finely I had it all working to the point I will settle for. It's not perfect but I can live with it.The last hurdle was to add to my web page and make it all work. I had some alignment issues but worked it out with a single header and it's popup menu. After getting this working I added the other headers and there popups. Great except...The last problem is something I didn't expect and didn't have in my standalone example. Every popup menu is positioned adjacent to the first header and in the exact same position. Hovering over each header displays the popup in the same place in stead of next to each header.I've given up for tonight, but i'll tinker more tomorrow. I have no idea what what is causing this but must be something I did to fix the positioning of the header element. I'll probably be back for help on this but will try to solve on my own. I need to learn and this is the only way I will, although it is slow and painful.

[thescientist]

link? new code?

[student101]

Updated yours with this;Where do you want images?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><style type="text/css"><!--p {	color: #000000;	font-size: 10px;	font-family: Arial, Helvetica, sans-serif;}ul {width: 175px; height: 22px;padding-left:14px;margin: 0;font-family:Arial, Helvetica, Verdana, Tahoma, sans-serif;font: bold 14px Arial;}a:link { color: #FFFFFF;text-decoration: none;}a:visited { color: #CCCCCC;}a:hover { color: #FF0000;text-decoration: underline;}ul li {list-style-type: none;border: 1px solid silver;border-width: 1px 1px 1px 1px;position: relative;margin: 0;padding: 0;}ul ul {display: none;}ul li:hover > ul {display: block; position: absolute; top: 5px; left: 170;/*text-decoration:underline;*/}li a {display: block;padding: 5px 7px; text-decoration:none;background: #CCCCCC;}ul#gomenu li a:hover {background: yellow;}ul#gomenu {width: 175px;height: 22px;}ul#gomenu > li:hover > ul {	width: 100px;	top: 5px;	left: 150px;	z-index: 999;}ul ul {/*width: 10px;*/}--></style></head><body><ul id="gomenu"><li class="pop"><a href="#">Group 1</a><ul id="g1"><li><a href="#">Link 1.1</a></li><li><a href="#">Link 1.2</a></li><li><a href="#">Link 1.3</a></li><li><a href="#">Link 1.4</a></li><li><a href="#">Link 1. 5</a></li><li><a href="#">Link 1.6</a></li></ul></li><p>This is some arbitrary html objects.</p><li class="pop"><a href="#">Group 2</a><ul id="g2"><li><a href="#">Link 2.1</a></li><li><a href="#">Link 2.2</a></li><li><a href="#">Link 2.3</a></li><li><a href="#">Link 2.4</a></li><li><a href="#">Link 2.5</a></li></ul></li><p>This is some arbitrary html objects.</p><li class="pop"><a href="#">Group3</a><ul id="g3"><li><a href="#">Link 3.1</a></li><li><a href="#">Link 3.2</a></li></ul></li></ul> </body></html>

[Web Weenie]

Thanks student101 for your efforts I'll look over your modifications, and also thesientist for your attempt to help.After some sleep and big cup of coffee I jumped back in... With some hacking shenanigans and more head pounding I've got it. Icons that I wanted in front of popup header text and links are now part of the background image. But, layout, positioning and all are working about how I wanted. I've done so much trial and error, back and forth with this I'm not sure I have learned anything on how all this works, except don't do this again until I do know how. As least with this under my belt I now have the courage to attempt things like this in the future. Hopefully some of this has sunk in and I'm a bit smarter.I really do appreciate all attempts to help but I can't learn by doing a copy and paste from others work. While I had a objective in all this, I also had an underlying goal of teaching myself the finer points of css. Maybe I did or maybe I didn't. But I'm moving forward and that counts for something.Again, thanks to all...

[student101]

Cool, notice I added z-index: so the menu overlaps and doesn't sit behind the other menu or text.

ul#gomenu > li:hover > ul {	width: 100px;	top: 5px;	left: 150px;	z-index: 999;}

http://www.w3schools.com/Css/pr_pos_z-index.asp

[Web Weenie]

Cool, notice I added z-index: so the menu overlaps and doesn't sit behind the other menu or text.

ul#gomenu > li:hover > ul {	width: 100px;	top: 5px;	left: 150px;	z-index: 999;}

http://www.w3schools.com/Css/pr_pos_z-index.asp

Well that's good to know. I solved this by moving to the edge so there is no overlap.

[Web Weenie]

Ok, maybe I've taken this too far... I've added all my headers and link items to each corresponding header, some are nearly 20 items long.Now I find myself with a new problem which I don't know how to solve. Some of the long menus now drop below the bottom of the screen, even when the window is scrolled to the bottom of the page.I have two solutions but both are not apparent to me how to implement and I fear that at least one will wreak more havoc to my diminishing brain capacity. I can either move the menu so it starts above the corresponding header or I can make my menu into multiple columns (not hierarchal). For the first I'm guessing I'll have to make a separate classes for each menu and define it's offset from the header position. The multi-column approach is something I have no idea how to solve.Is there any way to know how to programmatically adjust the top of the menu list so that it will always fit in the window?Any advice or solutions? Thought I had this whipped but it seems that this was only round 1 in the battle.TIA

[student101]

post your new menu code.

[Web Weenie]

post your new menu code.

CSS Code:

ul#main { position:relative;margin-left: -25px;margin-top: 5px;list-style: none; width: 175px; font-family: Arial, sans-serif; font-size: 14px; } ul a#pop { color: #FFF; text-decoration: none; display: block; width: 175px; height:22px;background: url(images/menupopup.jpg) no-repeat 0 0;padding: 3px 0px 4px 0px;} ul a.linc { display: block; width: 147px; height:14px;padding: 3px 0px 4px 26px;background: url(images/linker1.jpg) no-repeat 0 0;color: #FFF; text-decoration: none; } ul a.sep { display: block; width: 173px; height:5px;padding: 0px 0px 0px 26px;background: url(images/linker0.jpg) no-repeat 0 0;} ul a.linc:hover { color: #4BD8FF; text-decoration: none; background: url(images/linker2.jpg) no-repeat 0 0;} ul li.linc { float: left; position: relative; }ul li { float: left; position: relative; }ul li ul { list-style: none; position: absolute; left: 134px; top: 0; display: none;  } ul li:hover ul { display: block; }

[student101]

where's the rest of it?You can use the wrap in CODE tags when you post code...You're not perhaps looking for something like this;

<style type=text/css>h3 {font-weight: normal; font-size: 1.5em; color: #999; font-family: arial, sans-serif; letter-spacing: -2px}h4 {font-weight: normal; font-size: 1em; color: #aaa; font-family: arial, sans-serif}#menu {padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; width: 0px; padding-top: 0px}#menu li {margin: 0px 0px 0.25em; list-style-type: none}#menu a {border-right: #808 1px solid; padding-right: 0.25em; border-top: #808 1px solid; display: block; padding-left: 0.25em; font-size: 0.8em; background: #808; padding-bottom: 0.25em; border-left: #808 1px solid; width: 9em; color: #eee; padding-top: 0.25em; border-bottom: #808 1px solid; font-family: arial, verdana, sans-serif; position: relative; text-align: center; text-decoration: none}#menu a:visited {border-right: #808 1px solid; padding-right: 0.25em; border-top: #808 1px solid; display: block; padding-left: 0.25em; font-size: 0.8em; background: #808; padding-bottom: 0.25em; border-left: #808 1px solid; width: 9em; color: #eee; padding-top: 0.25em; border-bottom: #808 1px solid; font-family: arial, verdana, sans-serif; position: relative; text-align: center; text-decoration: none}#menu a span {display: none}#menu a:hover {background: #ddd; color: #808}#menu a:hover span {border-right: #808 1px solid; padding-right: 0.5em; border-top: #808 1px solid; display: block; padding-left: 0.5em; left: 10em; padding-bottom: 0.5em; border-left: #808 1px solid; width: 24em; color: #000; padding-top: 0.5em; border-bottom: #808 1px solid; position: absolute; top: 0px; background-color: #eee; text-align: left}#menu a:hover span:first-line {font-weight: bold; font-size: 1.2em; color: #808}#menu img {border-right: #000 1px solid; border-top: #000 1px solid; float: left; margin: 0.25em 1em 0.5em 0px; border-left: #000 1px solid; border-bottom: #000 1px solid}</style></head><body><ul id=menu>  <li><a   href="#">paul   cézanne <span>paul cézanne (1839-1906)<br><img title=painting alt=painting   src="unordered list with comments - part three - styled list_files/cezanne.jpg">   the french painter who exhibited little in his lifetime and pursued his   interests increasingly in artistic isolation, is regarded today as one of the   great forerunners of modern painting. </span></a>  <li><a   href="#">henri   matisse <span>henri matisse (1869-1954)<br><img title=painting alt=painting   src="unordered list with comments - part three - styled list_files/matisse.jpg">   initially planned a career as a lawyer. however, he began to paint after an   acute attack of appendicitis and then proceeded to become a leader in many art   circles. </span></a>  <li><a   href="#">william   turner <span>j m w turner (1775-1851)<br><img title=painting alt=painting   src="unordered list with comments - part three - styled list_files/turner.jpg">   this english painter was one of the greatest romantic interpreters of nature   in the history of western art and is still unrivaled in the virtuosity of his   painting of light. </span></a>  <li><a   href="#">john   constable <span>john constable (1776-1837)<br><img title=painting alt=painting   src="unordered list with comments - part three - styled list_files/constable.jpg">   tried to capture informally the effects of changing light and the patterns of   clouds moving across the country sky. he loved the countryside, and his best   work was of outdoor scenes in his native suffolk and his london home in   hampstead. </span></a>  <li><a   href="#">claude   monet <span>claude monet (1840-1926)<br><img title=painting alt=painting   src="unordered list with comments - part three - styled list_files/monet.jpg">   monet's concern was to reflect the influence of light on a subject. he never   abandoned his impressionist painting style until his death in 1926 when   fauvism and cubism were en vogue and when abstract painting came into   existence. </span></a></li></ul></body></html>

[Web Weenie]

I've tried to use the codebox but can't seem to get past this errorThere is an error with your BBCode. It is possible that you have incorrectly used a tag such as [TAG] when it is meant to be used as [TAG=] or vice-versa.I have no idea what the problem is but it wouldn't let me post my code in it. Maybe a Safari issue???Your last post was a bit confusing to me, but this may be my problem as I might be using incorrect descriptions. Your code only provided what I'm calling header popups. What I'm doing is each header popup has a popup menu associated with it. I have 10 header popups and some have up to 18 popup menus in it. Some of the longer popup menus extend below the window. I would like to programmatically adjust the popup menu top so it will fit within the window. Pretty much what a desktop application does to long menus.My previous post was the complete css code and here is my html (single popup header only)

<ul id="main"> <!-- popup group -->					<li><a id="pop" href="#">       Mac News & Info</a> <!--  popup header -->					  <ul>						<li><a class="linc" href="http://www.tuaw.com/" target="_blank">TUAW</font></a></li> <!--  popup menu item -->						<li><a class="linc" href="http://www.macdailynews.com/" target="_blank">Mac Daily News</a></li>						<li><a class="linc" href="http://www.macintouch.com/" target="_blank">MacInTouch</a></li>						<li><a class="linc" href="http://www.macworld.com/" target="_blank">Mac User / Macworld</a></li>						<li><a class="linc" href="http://www.macnn.com/" target="_blank">Mac News Network</a></li>						<li><a class="linc" href="http://www.insanely-great.com/" target="_blank">Insanely Great Mac</a></li>						<li><a class="linc" href="http://www.tidbits.com/" target="_blank">TidBITS</a></li>						<li><a class="linc" href="http://www.macnews.com/" target="_blank">MacNews</a></li>						<li><a class="linc" href="http://www.macrumors.com/" target="_blank">Mac Rumors</a></li>						<li><a class="linc" href="http://www.macobserver.com/" target="_blank">Mac Observer</a></li>						<li><a class="linc" href="http://www.appleinsider.com/" target="_blank">Apple Insider</a></li>						<li><a class="linc" href="http://www.macsurfer.com/" target="_blank">Mac Surfer</a></li>						<li><a class="linc" href="http://www.engadget.com/" target="_blank">Engadget</a></li>					  </ul>					</li></ul>

end of html...

[student101]

I've tried to use the codebox but can't seem to get past this errorThere is an error with your BBCode. It is possible that you have incorrectly used a tag such as [TAG] when it is meant to be used as [TAG=] or vice-versa.

You paste your page in, select the code you want to put in [code] tags and click the "Wrap in code tags button"Like I've just done here...

Please post the entire the page...It's not this you're looking for?

[Web Weenie]

student101 thank you very much for your persistence... I've solved (in a way) the problem.To answer your last question, no the header menu part is similar but a popup menu list appears when you hover over the header item. I know I'm not being clear.similar to: http://www.cssplay.co.uk/menus/flyout4.html (menu item #3 and #6 - but single level only)my solution was to assign a unique class to each menu group <ul> and I hard coded an offset in my css to raise each popup menu by a specific amount. (fly away in the example above). My solution does not solve the problem perfectly but it is better. I was looking for a way to calculate the height of the popup menu, test to see it it will extend below the bottom of the current screen and raise the menu appropriately to prevent that from happening. I don't even know if it is possible to do what I want.psudo code:x= top position of menuz= total height of menuw=window heightif (w-z) < x then x=(w-z)I'm open for a better solution but I guess I can live with what I have now.Thanks again.

[student101]

I'm open for a better solution but I guess I can live with what I have now.

Anytime, glad you solved it.Not sure what you have, but it's not like this is it?

[Web Weenie]

Anytime, glad you solved it.Not sure what you have, but it's not like this is it?

No but that's pretty cool! Take the text link make it a graphic band the width of a web page sidebar and have the menu popup to the right of the graphic so the top of the first menu item is the same height as the graphic band. Now make nine more down the sidebar, each with it's own unique menu. I like the way your example expands and when I get this project all done I may pester you for that code to make mine zoom in like that. Very nice effect.Thanks again.