Why won't my drop down list display on hover?

I am currently implementing a drop down navigation list to an existing navigation bar. This uses very basic html with only ul and li elements. Below is a link to the page, as well as a snippet of the HTML code and CSS that supports it.
http://derektoigo.com/assets/livesites/DJDKMedia/features.html
The problem that I am having occurs when hovering over the Features link in my navigation bar. I am trying to display the items that are shown below in the format of a vertical list, but the bigger problem is that even though I am hovering over the parent CSS item and it says to display:block, essentially causing it to hover so I can click, I can't do so. I'm trying to find a way to make the menu stay in place once I move my mouse away from the original item. Please note that none of the other pages support this functionality yet and will contain different code.
For the record, I am using the Suckerfish drop down and I am following this tutorial: http://www.alistapart.com/articles/dropdowns I stopped just before proceeding with the IE fixes, titled as "Hold on a minute!"
If anyone can point out what I'm doing wrong, I'd be most appreciative for the fix. Thanks to all for your help.
HTML Structure
<div id="headerFullwidth">
    <div id="header" class="container">
        <img src="images/logo.png" alt="DJDK Media" />
        <ul id="navigation">
            <li><a href="index.html">Home</a></li>
            <li><a href="features.html">Features</a>
                 <ul>
                  <li><a href="index.html">Home</a></li>
                  <li><a href="features.html">Features</a></li>
                  <li><a href="services.html">Services</a></li>
                  <li><a href="portfolio.html">Portfolio</a></li>
                  <li><a href="about.html">About</a></li>
                  <li><a href="contact.php">Contact</a></li>
                </ul>
            </li>
            <li><a href="services.html">Services</a></li>
            <li><a href="portfolio.html">Portfolio</a></li>
            <li><a href="about.html">About</a></li>
            <li class="last"><a href="contact.php">Contact</a></li>
        </ul>
    </div>
</div>
CSS
#header ul {
float:right;
margin-top:20px;
margin-right:-22px;
background-color:none;
list-style-type:none;
#header ul li {
float:left;
padding-left:22px;
padding-right:22px;
background:url(../images/navigation-divider-background.jpg);
background-position:right;
background-repeat:no-repeat;
line-height:30px;
li ul {
display: none;
position: absolute;
top: 1em;
left: 0;
li > ul {
top: auto;
left: auto;
li:hover ul {
display: block;
li:hover ul li {
background:none;
display:block;
margin:0px;
padding:0px;
#header ul li:hover {
float:left;
padding-left:22px;
padding-right:22px;
background:url(../images/navigation-divider-background.jpg);
background-color:#323232;
background-position:right;
background-repeat:no-repeat;
line-height:30px;
#header ul li a {
color:#fff;
font-size:14px;
#header ul li a:hover {
color:#6d6d6d;

Try pasting this into a new, blank HTML document
<!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=iso-8859-1" />
<title>CSS Horizontal Drop-Menu</title>
<style type="text/css">
/**GENERAL**/
body{
font:1em/100% Verdana, Arial, Helvetica, sans-serif;
background:#666;
margin:0px;
padding:0px;
text-align:center;
/**IE ONLY**/
*body {font-size:76%}
#container{
width:970px;
margin: 0 auto; /**centered**/
padding: 12px;
border: 4px solid silver;
background: #FFF;
#header {
width: 960px;
margin: 0 auto;
border: 1px solid green;
/* Horizontal Drop-Menu */
ul #navbar {
width: 100%;
margin: 0 auto; /**centered**/
text-align:center; /**centers older browsers**/
padding: 0;
font-size: 14px;
height: 1em;
#navbar li {
list-style: none;
float:left;
/**top level menu**/
#navbar li a {
display: block;
text-decoration: none;
color: #444;
width: 8em;
padding: 10px;
border-left: 1px solid #fff;
border-top: 1px solid #fff;
border-right: 1px solid #aaa;
background-color: #DDD;
#navbar li a:hover {
background: #666;
color: #FFF;
/**sub-menu**/
#navbar li ul {
display: none;
width: 8em; /* Width to help Opera out */
background-color: #999;}
/**help for IE6 JavaScript**/
#navbar li:hover ul,
#navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
#navbar li:hover li,
#navbar li.hover li {
float: none;}
#navbar li:hover li a,
#navbar li.hover li a {
background-color: #999;
border-bottom: 1px solid #FFF;
color: #FFF;}
#navbar li li a:hover {background-color: #666;}
/**end Drop-menus**/
/**clear menu floats after ul**/
.clearing {clear:both; height: 1px; visibility: hidden;}
</style>
<script type="text/javascript">
//Script to make drop-menus work in IE6/
//
</script>
</head>
<body>
<div id="container">
<div id="header">
<h3>CSS Horizontal Drop-Menu</h3>

<ul id="navbar">
<li><a href="#">Item One</a></li>
<li><a href="#">Item Two</a></li>
<li><a href="#">Item Three > </a><ul><li>
<a href="#">Subitem 1</a></li><li>
<a href="#">Subitem 2</a></li><li>
<a href="#">Subitem 3</a></li></ul>
</li>
<li><a href="#">Item Four</a></li>
<li><a href="#">Item Five > </a><ul><li>
<a href="#">Subitem 1</a></li><li>
<a href="#">Subitem 2</a></li></ul>
</li>
<li><a href="#">Item Six > </a><ul><li>
<a href="#">Subitem 1</a></li><li>
<a href="#">Subitem 2</a></li></ul>
</li>
</ul>


<hr class="clearing" />
</div> 
</div> 
</body>
</html>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Similar Messages

Why won't my drop down list populate from the array?

I am using the following array.
var actDesc = new Array(" ",
"Desc1 ",
"Desc2 ",
"Desc3 ");
// Array of HUD Activity Numbers.
var actNum = new Array(null,
"1 ",
"2 ",
"3 ");
// This populates the Description Drop-down List and works just fine.
function populateActDesc(dropdownField)
      var i;
      for (i=0; i < actDesc.length; i++)
         dropdownField.addItem(actDesc[i]);
//This is supposed to populate the Description Number Drop-down List but doesn't work.
function populateActNum(dropdownField)
      var i;
      for (i=0; i < actNum.length; i++)
         dropdownField.addItem(actNum[i]);
// Populates another field based on the Description Field value chosen and works as intended.
function getDesc(hudActivityDescription, hudActivityNumberField)
   var i;
   for (i = 0; i < actDesc.length; i++)
      if (actDesc[i] == hudActivityDescription)
        hudActivityNumberField.rawValue = actNum[i];
   break;
I placed the following into the drop-down list object holding the actDesc array (Event: initialize; Language: javascript):
actNoScript.populateActDesc(this);
This works just fine.
I placed the following into the drop-down list object holding the actNum array (Event: initialize; Language: javascript):
actNoScript.populateActNum(this);
This doesn't work. Any ideas?
Any help would be greatly appreciated. I am using LCD 8.2 ES on Vista 32bit.
Thanks,
Jerald

Hi Jerald,
You can't assign null to the display value of a drop down control. If you change the HUD activity number array to remove the null it should work.
That is;
// Array of HUD Activity Numbers.
var actNum = new Array(" ","1 ","2 ","3 ");
Bruce

How to get drop down list display values

I have binded my drop down list with tabledataprovider. In the value field i have given customer id and in display field i have given customer name.
I have reatrived cust id but
how to reatrieve customer name.

http://forum.sun.com/jive/thread.jspa?forumID=123&threadID=56515
Also, if your dropdown list is bound to a data provider you can use something like this:
RowKey rowkey = tripDataProvider.findFirst("PERSON.PERSONID", dropDown1.getSelected());
String displayValue = (String)tripDataProvider.getValue("PERSON.NAME", rowkey);

Why won't my drop downs menus appear in Firefox?

The menus work great in IE 6, but will not work in Firefox.

Looks like a problem with the CSS code or the placement of the UL sub menu items.<br />
Something like this won't work for the next sibling like you coded it: .art-menu li:hover>ul<br />
You need to place those UL blocks inside the LI blocks.
See http://www.w3.org/TR/CSS21/selector.html
A good place to ask questions and advice about web development is at the mozillaZine Web Development/Standards Evangelism forum.<br />
The helpers at that forum are more knowledgeable about web development issues.<br />
You need to register at the mozillaZine forum site in order to post at that forum.<br />
See http://forums.mozillazine.org/viewforum.php?f=25

Director app on Mac: Dock Icon Drop Down List displays with no title

Hi,
we have a Director application on mac, that changes it state from window-mode to full screen-mode. It is done using Resolution xtra
Now we've discovered following peculiarity
When program is in windowmode and user presses CMD-Button + Click Dock Icon, a dropdown list appears over the clicked dock icon. And the problem is, that besides of the name of our programm there is another item in the list, that have no title.
What can be the reason of this? Is there some workarounds for that problem?

Hi,
we have a Director application on mac, that changes it state from window-mode to full screen-mode. It is done using Resolution xtra
Now we've discovered following peculiarity
When program is in windowmode and user presses CMD-Button + Click Dock Icon, a dropdown list appears over the clicked dock icon. And the problem is, that besides of the name of our programm there is another item in the list, that have no title.
What can be the reason of this? Is there some workarounds for that problem?

Bookmarks tab on Yahoo Toolbar won't show drop down list of Boolmarks?.

I tried removing and reinstalling Yahoo Toolbar extension but still have problem.

Inquire about his problem from Yahoo! Toolbar Help -> http://help.yahoo.com/kb/index?locale=en_US&page=product&y=PROD_TOOL&pir=XraFQTNibUndlLJ81h4dphChWyAYWleOIHsBW8Qz4A1q

Drop-down List not function in preview mode.

Hi all,
LiveCycle 8.2.1.4029
I have created a drop-down list and populated it with a text
However when I preview the form, the drop-down is displayed without the dropdown arrow and the options (text) are not displayed.
The drop-down list is the only object on the form.
If I load a form or xpd of a form created prior today the drop-down list displays and functions as normal.
Any ideas.
Thanks
WowRonin

Hi,
I uninstalled and reinstalled Acrobat and then patched to 9.4 and everything is back to normal.
Go figure!!
Thanks for responding.
WowRonin

Detail region does not refresh when selecting from a drop-down list in master region

I am using DW CS3 and have updated to version 1.6.1 of Spry. Using an XML dataset, I am able to create a Spry table as the master region that links to a detail region that displays a small JPG graphic. It works fine in this format (clicking on a row displays the correct graphic). However, my table has 80 rows and requires the user to do too much scrolling. So I changed the master region to a drop-down repeat list, but the graphic does not change when a new selection is made in the drop down list. Listed below is the code produced when I used the insert Spry Repeat List. I got the same results when adding a spry:setrow="dsChartNurse". I also tried -- onclick="dsChartNurse.setCurrentRow('{ds_RowID}');" -- which again made no difference.
When I removed children from the spry:repeat, the master region displayed as a two column list of all 80 items in a drop-down list format.
<div spry:region="dsChartNurse">
       <select name="select" spry:repeatchildren="dsChartNurse">
         <option value="{name}">{name}</option>
       </select>
</div>
<div id="image" spry:detailregion="dsChartNurse">
   <img src="{dataimage}" align="center" style="margin:50px 0 0 0"width="320" height="164" />
</div>
Thanks so much to anyone who can help correct my code in order to have a drop-down list display information correctly in the detail region.

Thanks for the quick reply. I did solve the problem I was having by changing from onclick to onchange in the master region. But, now I have another problem with, of course, IE. I just put in online at http://www.minursemap.org/ageDistNurse.html. When opened in IE, the drop down list displays the last entry, but the image is for the first in the list. Thanks again for your help.

PO drop down list populates with "Delivery Completed" POs

All,
I have seen the following issue: When the supplier creates an ASN manually and is requested to populate the Purchase Order field, the drop down list displays "Open" Purchase Orders as well as "Delivery Completed" ones, which is very confusing. Do you happen to know how I can ensure that the supplier only has the choice to select from "Open" Purchase Orders when creating a new ASN?
Thank you for your help!
Johanna

If a particular email address will only be associated with a single office, then one thing you can do is set the export value of the items in the combo box to the corresponding email addresses. The email address will be the value of the field when you retrive it with JavaScript.
To submit to a particular email address, it would be best to use the mailDoc method, which is documented here: http://livedocs.adobe.com/acrobat_sdk/9.1/Acrobat9_1_HTMLHelp/JS_API_AcroJS.88.505.html
This is best because it allows you to reliably customize all the the email properties like recipients, subject, body, etc.
The code for getting the value of the comob box would look something like this:
// Get the email address from the combo box named "combo1"
var sTo = getField("combo1").value;
If more than one office will have the same email address associated with it, post again and I can refer you to other posts that discuss this situation. You would have to use a similar approach if you do not want to set the export values of the items to the email addresses for some reason.
The alternative is to use the submitForm JavaScript method, but specifying the subject and body text is less reliable and more complicated.
If you need more help, post again.

Spry region drop-down list problems in IE

Can someone please help me determine the reason that IE does not display the correct item in a spry region drop-down list when first opening the site. You can see the problem at http://www.minursemap.org/agedistnurse.html. The initial item in the drop-down list should be Alcona with the corresponding graphic displayed in the detail region. In Firefox, this works correctly. When first opening the page in IE, the graphic is Alcona, but the drop-down list displays Wexford (the last item in the list). From then on, all of the links work correctly.
The code for the two regions is below. Thanks in advance for assisting someone new to spry.
<div id="ctyname">
     <div spry:region="dsChartNurse">
       <select name="name" spry:repeatchildren="dsChartNurse" onchange="dsChartNurse.setCurrentRow(this.value)">
         <option value="{ds_RowID}">{name}</option>
       </select>
</div> 
</div>
<div id="image">
   <div spry:detailregion="dsChartNurse">
        <div align="center" style="padding-bottom:15px"><img src="{dataimage}" width="405" height="202" />
        </div>
   </div>
</div>

Try the following code to replace yours:
       <select name="name" spry:repeatchildren="dsChartNurse" onchange="dsChartNurse.setCurrentRow(this.value)">
         <option spry:if="{dsChartNurse::ds_RowID}=={dsChartNurse::ds_CurrentRowID}" spry:selected="selected" value="{ds_RowID}">{name}</option>
         <option spry:if="{dsChartNurse::ds_RowID}!={dsChartNurse::ds_CurrentRowID}" value="{ds_RowID}">{name}</option>
       </select>
I hope this helps.
Ben

MM-creating a PO - vendor could not be found thru drop down list.

dears, request to share this and provide how !
we could not find a vendor while creating a PO- normally we slect the vendor by the help of drop down list, in several monts it happend that vendor was not availble in drop down list, since we knew that this vendor is definately exists in our vendor master. then we searched in cvendor maser - yes it is there. then why not sow in drop down list.
later we tried agian and agian and finelaly we found it in drop down
note that
1- we tried all the mean by sorting vendor name, number etc could nto find)
2- we got all vendros - as we removed the general limit of 500 hits.
3- then we checked in vendor master - it was there.
my worry is
1- to know how it happend. and how it corrected itself.
2- does it happen frequently.
3- if it can happen for no reason (or hidden logical reason) then in som ecases we can make some mistakes, in same process or
in other proces of HR, MM, PM FI etc,
waiting your valueable share, guiide and advice.
Thanks n regards.
mansoora.

Chuck you have placed Order for Acrobat Upgrade if you don't have any previous version of Acrobat than you need to cancel this order and need to buy a full version.

Drop down lists don't diplay, just flash for an instant

Drop down lists display in Internet Explorer, but not when I'm using Firefox. I'm using version 7 on Windows 7. The list flashes for a second but doesn't display for a selection. If I enter the first letter of a list item, the item will be retrieved as a selection.

Try to Create a new profile as a test to check if your current profile is causing the problems.
See "Basic Troubleshooting: Make a new profile":
*https://support.mozilla.com/kb/Basic+Troubleshooting#w_8-make-a-new-profile
There may be extensions and plugins installed by default in a new profile, so check that in "Tools > Add-ons > Extensions & Plugins" in case there are still problems.
If that new profile works then you can transfer some files from the old profile to that new profile, but be careful not to copy corrupted files.
See:
*http://kb.mozillazine.org/Transferring_data_to_a_new_profile_-_Firefox
You can also try to disable plugins to see if that helps.
*https://support.mozilla.com/kb/Troubleshooting+plugins

Display pages that reacts to different values in the drop down list.

I currently did up a simple drop down list that stores values retrieved from the database. I would like the program to display pages that reacts to the selected value without the press of any button, which means, if I select any value from the drop down list, the page will be displayed according to the value selected.
Below are the codes that I did for the retrieval of data from the database.
<%
        String username = "test";
        String password = "test";
        String thinConn = "jdbc:oracle:thin:@dbdev:1521:ORCL";
        Connection conn;
        Statement stm;
        ResultSet rs;
        String baseQuery ="SELECT DISTINCT ID FROM STAFF ORDER BY ID ASC";
        try {
            conn = DriverManager.getConnection(thinConn,username,password);
            stm = conn.createStatement();
            rs = stm.executeQuery(baseQuery);
%>
<strong>Retrieve ID from Database</strong>
    <select size="1" name="dropdown">
    <%
    while (rs.next()) {
        String id = rs.getString("ID");
        out.write("<option value=\"" + id + "\">" + "level " + id + "</option>");
                conn.close();
            } catch (SQLException e) {
    %>
    </select>Would appreciate if someone might offer some help to what I have to do next
Edited by: wyndsor on Jun 26, 2008 7:34 PM

cotton.m wrote:
[_An instant classic_|http://www.webdeveloper.com/forum/showthread.php?t=184937]
Sometimes I find myself wondering why people think they won't get caught with their cross forum cross posting. Then I realize that if they knew about Google they wouldn't have needed to ask the question in the first place.
It's kind of funny in an ironic sort of way.

Displaying value only in Drop Down List

Greetings,
I have a drop down list with value:text as follows:
01:Daylight
02:Dusk
03:Dawn
04:Night
I would like to present the user who clicks on the drop down list with all of the literal text options (daylight, night, etc), but once selected, the object populate and print only the value (01, 02, etc).
I thought about resizing the object when the user clicks on it, and then resizing it back once selected, but this seems rather cumbersome. Space on the printed form is very limited, which is why the value/codes are used to represent the actual literal options.
Any methods or ideas would be greatly welcome
Thanks!
Brad

Here is a sample that shows what I think you want. I have a TextField that is displayed. When the user enters the field, I hide this field and make a DDlist available to the user. This DDList is placed behind the TextField and is hidden (not part of the layout) until the user enters the TextField. I also hide the TextField (this code is on the Enter event of the TextField). Now that the DDlist is visible you can set up a DDList to display one thing but report another. This is what I did (look at the binding tab of the DDList). Now when the user selects an item from the DDList the TextField is updated, the DDList is hidden and the TextField is made visisble, then the cursor is placed in the next field. This code is on the Exit event of the DDList.
Is this what you were trying to accomplish?
Paul

Trouble displaying A drop down list in Contribute

I am having trouble with a client that has downloaded Contribute onto their windows computer. The page in question contains a drop-down nav- bar which I coded using CSS. I have had the page certified by W3 CSS and the html also went through at 100%. It displays perfectly in all browsers and also in my version of Contribute 6.5. My client is also running the same version of Contribute, however the drop-down menu won't render properly in their version of contribute unless they try to edit the page. This is a problem because they rely on the navigation bar to navigate the site for editing. On their version of contribute the navigation bar appears as a lengthy unordered list instead of a smooth drop-down list which appears on all other browsers and versions of Contribute. I have changed the name of the CSS file and its location several times. This hasn't solved the issue. Any suggestions please???

Hi Dominic,
Thanks for showing interest.
I spoke to Adobe staff today who were very helpful. They put it down to a bad installation of Contribute. I have suggested to the client to clear the cache and reinstall Contribute tomorrow morning. IE is working fine on my clients machine and shows the page correctly. I will keep you posted on how it goes.
This is how it displays on the same version of Adobe Contribute on my Mac and all browsers.

Why won't my drop down list display on hover?

Similar Messages

Maybe you are looking for