[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] ***
