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="noLeftPadding">Home</li>

            <li class="test">Industry</li> /*class .test is suppose to be
the trigger*/

            <li>Clientele</li>

            <li>Partners</li>

            <li>Careers</li>

            <li>About</li>

            <li>Contact</li>

</ul>


<ul id="industry" class="menu">

            <li>Immigration Information</li>

            <li>POEA Regulations</li>

            <li>Disciplinary Guidelines</li>

            <li>POEA Sample Contract</li>

            <li>Questions 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]
*******************************************************************

Reply via email to