Drop down menu display problem..

Does anyone know how to get the drop down menu for the links in the upper left hand corner of my page to display right underneath their parent links?

http://www.thedailysearch.com/bingsearch.html#

When you scroll over the top links the drop down menus display to the right and it makes them hard to click on because they disappear as soon as you move your mouse of the parent link...

I would like them to display underneath the parent link but I can't figure out where in the code to control their position...I've never worked with this particular code before...Thank you! BTW, this is a non javascript css drop down menu.

Here is the css code:

  #nav {
    zoom:1;
    padding-bottom:2em;
  }
  

  
  #nav a span {
    font-size:.9em;
  }
  
  #nav ul {
    list-style-type:none;
  }

  #nav ul li ul {
    background:transparent url() top left no-repeat;
  }
  
  #nav ul li {
    float:left;
    margin-right:0.1em;
    border:0.1em solid #000;
  }
  
  #nav a {
    padding:0.0em 0em;
    background:#b2bdc4;
    display:block;
    color:white;
    text-decoration:none;
  }
  
  #nav a.arrow {
    padding-right:2em;
    background:#eee url()center left no-repeat;
  }
  
  #nav a.arrow:hover,
  #nav a:hover {
    background-color:#b2bdc4;
    color:red;
  }
  
  #nav ul li ul {
    position:absolute;
    display:none;
    padding-top:0.2em;
    margin-left:-0.1em;
  }
  
  #nav ul li:hover ul {
    display:block;
  }
  
  #nav ul li:hover ul li ul {
    display:none;
  }
  
  #nav ul li ul li:hover ul {
    display:block;
  }
  
  #nav ul li ul li:hover ul li ul {
    display:none;
  }
  
  #nav ul li ul li ul li:hover ul {
    display:block;
  }
  
  #nav ul li ul li {
    float:none;
    margin:0;
    border:0.1em solid #ddd;
    margin-bottom:0.1em;
    width:5em;
  }
  
  #nav ul li ul li ul {
    margin-left:0em;
    margin-top:-1.8em;
    padding-left:0.2em;
    display:none;
  }    

HTML:

 

I don't think that your page drop down navigation is a non javascript css drop down. Anyways, I can help you with this, just pm me and price

<SCRIPT TYPE="text/javascript">
<!--
function dropdown(mySel)
{
var myWin, myVal;
myVal = mySel.options[mySel.selectedIndex].value;
if(myVal)
   {
   if(mySel.form.target)myWin = parent[mySel.form.target];
   else myWin = window;
   if (! myWin) return true;
   myWin.location = myVal;
   }
return false;
}
//-->
</SCRIPT>

Code (markup):

 

Why do you think it's javascript? I just disabled my browser's javascript and it still works.

EDIT: Oh, that javascript code was from another menu. I forgot to remove it. It's removed now and the menu still works...Just trying to figure how to get the drop down menu to move over toward the left.

 

This might help

In: {screen.css (line 48)

#nav ul li ul
display:none;
margin-left:-3em;
padding-top:0.2em;
position:absolute;
}

Change the margin-left: to -3.. you can tweak it from there, but it pulls the menu to the left.

Also, you may want to change the padding-top: value to 0em so that there is no space between the main menu and the sub so that the menu wont close when the user tries to get to it.


Good luck

 

Thanks! I'll test it when I get home.