[WSG] Please Help! Hover not working to trigger display:block in FF
Hello All - I've done this successfully in one previous project, but can't for the life of me understand what I'm doing wrong now. I've got a UL nav bar with a number of li's. I've set one of the li's as css trigger (via a class name) in order to show a drop-down menu (a UL) that has a default value of display:none. Unfortunately, nothing I try will initiate the declaration containing the display:block. My CSS and test.html page validates so I don't know where I'm going wrong. Could someone please show me the error of my ways? To see this live, please go here: http://www.x7m.us/_problems/test.htm and hover over the Industry li . of course, you won't see anything happen as this is the crux of my problem. HTML and CSS copied below for convenience. Appreciate any and all guidance on how to fix this Cole HTML !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd; html xmlns=http://www.w3.org/1999/xhtml; head meta http-equiv=Content-Type content=text/html; charset=iso-8859-1 / link href=a/style/test.css rel=stylesheet type=text/css media=screen / /head body div id=wrapper ul id=navTop li class=noLeftPaddingHome/li li class=testIndustry/li /*class .test is suppose to be the trigger*/ liClientele/li liPartners/li liCareers/li liAbout/li liContact/li /ul ul id=industry class=menu liImmigration Information/li liPOEA Regulations/li liDisciplinary Guidelines/li liPOEA Sample Contract/li liQuestions and Answers/li /ul /div /body /html CSS /* --- Global Properties --- */ * { margin: 0; padding: 0; border: none; } html{ height: 100%; } body{ min-width: 770px; min-height: 101%; text-align: center; font-family: Arial, Verdana, Tahoma, Helvetica, Geneva, sans-serif; font-weight: normal; font-size: 100%; background-color: #000; color: #000; } #wrapper { position: relative; width: 770px; height: 500px; margin: 0px auto; text-align: left; color: inherit; background-color: #FFF; } ul { list-style: none; } /* --- Nav Top */ #navTop { /*THIS IS A UL*/ height: 42px; padding-left: 10px; padding-top: 3px; background-color: #00CC00; } #navTop li { display: inline; border-right: 1px solid white; padding-top: 12px; padding-bottom: 24px; padding-right: 26px; padding-left: 6px; font-weight: bold; font-size: 0.75em; } #navTop li.noLeftPadding { padding-left: 0; } /* --- Drop Down Menus */ #industry { position: absolute; top: 45px; left: 70px; display: none; /*INDUSTRY UL IS HIDDEN BY DEFAULT*/ } ul#navTop li.test:hover ul#industry { /*I THINK THIS IS THE PROBLEM AREA*/ display: block; } li.test { cursor: pointer; } .menu { background-color: #FFCC99; } .menu li { padding: 5px 10px; font-size: 0.75em; border-bottom: 1px solid black; } *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Please Help! Hover not working to trigger display:block in FF
The dropdown menu's s'posed to be nested within the li from which it's to drop down from - it can't be a completely separate ul. On Sat, 24 Feb 2007 11:08:30 +1000, Cole Kuryakin [EMAIL PROTECTED] wrote: Hello All - I've done this successfully in one previous project, but can't for the life of me understand what I'm doing wrong now. I've got a UL nav bar with a number of li's. I've set one of the li's as css trigger (via a class name) in order to show a drop-down menu (a UL) that has a default value of display:none. Unfortunately, nothing I try will initiate the declaration containing the display:block. My CSS and test.html page validates so I don't know where I'm going wrong. Could someone please show me the error of my ways? To see this live, please go here: http://www.x7m.us/_problems/test.htm and hover over the Industry li . of course, you won't see anything happen as this is the crux of my problem. HTML and CSS copied below for convenience. Appreciate any and all guidance on how to fix this Cole HTML !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd; html xmlns=http://www.w3.org/1999/xhtml; head meta http-equiv=Content-Type content=text/html; charset=iso-8859-1 / link href=a/style/test.css rel=stylesheet type=text/css media=screen / /head body div id=wrapper ul id=navTop li class=noLeftPaddingHome/li li class=testIndustry/li /*class .test is suppose to be the trigger*/ liClientele/li liPartners/li liCareers/li liAbout/li liContact/li /ul ul id=industry class=menu liImmigration Information/li liPOEA Regulations/li liDisciplinary Guidelines/li liPOEA Sample Contract/li liQuestions and Answers/li /ul /div /body /html CSS /* --- Global Properties --- */ * { margin: 0; padding: 0; border: none; } html{ height: 100%; } body{ min-width: 770px; min-height: 101%; text-align: center; font-family: Arial, Verdana, Tahoma, Helvetica, Geneva, sans-serif; font-weight: normal; font-size: 100%; background-color: #000; color: #000; } #wrapper { position: relative; width: 770px; height: 500px; margin: 0px auto; text-align: left; color: inherit; background-color: #FFF; } ul { list-style: none; } /* --- Nav Top */ #navTop { /*THIS IS A UL*/ height: 42px; padding-left: 10px; padding-top: 3px; background-color: #00CC00; } #navTop li { display: inline; border-right: 1px solid white; padding-top: 12px; padding-bottom: 24px; padding-right: 26px; padding-left: 6px; font-weight: bold; font-size: 0.75em; } #navTop li.noLeftPadding { padding-left: 0; } /* --- Drop Down Menus */ #industry { position: absolute; top: 45px; left: 70px; display: none; /*INDUSTRY UL IS HIDDEN BY DEFAULT*/ } ul#navTop li.test:hover ul#industry { /*I THINK THIS IS THE PROBLEM AREA*/ display: block; } li.test { cursor: pointer; } .menu { background-color: #FFCC99; } .menu li { padding: 5px 10px; font-size: 0.75em; border-bottom: 1px solid black; } *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Tyssen Design www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Please Help! Hover not working to trigger display:block in FF
Cole Kuryakin wrote: Hello All – Hi Cole I’ve set one of the li’s as css trigger (via a class name) in order to show a drop-down menu (a UL) that has a default value of display:none. Unfortunately, nothing I try will initiate the declaration containing the display:block. You will need to nest the #industry ul within the li you wish it to display under to target it with the css: li class=testIndustry ul id=industry class=menu liImmigration Information/li liPOEA Regulations/li liDisciplinary Guidelines/li liPOEA Sample Contract/li liQuestions and Answers/li /ul /li Regards -- Scott Swabey Design Development Director - Lafinboy Productions www.lafinboy.com | www.thought-after.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***