Drop out tabs not straight

Hello!

I was trying some things with tabs in a menu (li and lu codes) but found myself having a little problem. For some reason the drop out under the maintab is not straight under the maintab, but a little to the right.

example:

As you might see it is actually quite annoying since the drop out dissapears if you do not touch the maintab or the drop out with your cursor.
The codes are as follows:
HTML

Code:

<center>
                 
   <div style="width: 480px; height: 85px; background:url(http://i57.tinypic.com/14deicj.png); margin-bottom:-10px;  padding:1px; text-align: justify; line-height: 100%;">
                    
      <div class="boarddesc">
                 TEXT TEXT
      </div>
                    
      <div class="boarddesclink">
                     
         <ul id="nav">
                        
            <li>
                     <a href="#">ground</a>      
               <ul>
                            
                  <li>
                           <a href="#">Sub item 1.1</a>      
                  </li>
                            
                  <li>
                           <a href="#">Sub item 1.2</a>      
                  </li>
                            
                  <li>
                           <a href="#">Sub item 1.3</a>      
                  </li>
                            
                  <li>
                           <a href="#">Sub item 1.4</a>      
                  </li>
                            
               </ul>
                           
            </li>
                        
            <li>
                     <a href="#">first</a>      
               <ul>
                            
                  <li>
                           <a href="#">Sub item 2.1</a>      
                  </li>
                            
                  <li>
                           <a href="#">Sub item 2.2</a>      
                  </li>
                            
                  <li>
                           <a href="#">Sub item 2.3</a>      
                  </li>
                            
                  <li>
                           <a href="#">Sub item 2.4</a>      
                  </li>
                            
                  <li>
                           <a href="#">Sub item 2.5</a>      
                  </li>
                            
               </ul>
                           
            </li>
                        
            <li>
                     <a href="#">second</a>      
               <ul>
                            
                  <li>
                           <a href="#">Sub item 3.1</a>      
                  </li>
                            
                  <li>
                           <a href="#">Sub item 3.2</a>      
                  </li>
                            
               </ul>
                           
            </li>
              
            <li>
                     <a href="#">third</a>      
               <ul>
                            
                  <li>
                           <a href="#">Sub item 3.1</a>      
                  </li>
                            
                  <li>
                           <a href="#">Sub item 3.2</a>      
                  </li>
                            
               </ul>
                           
            </li>
            
            <li>
                     <a href="#">basement</a>      
               <ul>
                            
                  <li>
                           <a href="#">Sub item 3.1</a>      
                  </li>
                            
                  <li>
                           <a href="#">Sub item 3.2</a>      
                  </li>
                            
               </ul>
                           
            </li>
            
            <li>
                     <a href="#">grounds</a>      
               <ul>
                            
                  <li>
                           <a href="#">Sub item 3.1</a>      
                  </li>
                            
                  <li>
                           <a href="#">Sub item 3.2</a>      
                  </li>
                            
               </ul>
                           
            </li>
                        
         </ul>
                     
      </div>
                    
   </div>
</center>

CSS

Code:

/* -------------------------------- BOARD DESC*/
/* -------------------------------- NAVVIE*/
#nav, #nav ul {
margin: 0;
list-style: none;
}

#nav li {
float: left;
padding-right: 10px;
padding-left: 10px;
}

#nav ul {
position: absolute;
width: 120px;
left: -10000px;
}

#nav li:hover ul, #nav li.ie_does_hover ul {
left: auto;
background-position: 0 0;
}

#nav a {
display: block;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
}

ul a{
font-weight: bold;
color: #D97A60;
cursor: default;
}

ul ul a:link, ul ul a:visited{
font-weight: normal;
color: #CCC;
cursor: pointer;
}

ul ul a:hover, ul ul a:active{
font-weight: normal;
color: #FFF;
cursor: pointer;
}

ul li{
background-color: #585858;
border-left: 3px solid #FFF;
}

ul ul li{
background-color: #585858;
border-top: 3px solid #FFF;
border-left: 0;
}

/* -------------------------------- IMAGE*/

.boarddesc {
opacity: 0.0 !important;
overflow: auto;
width: 464px;
height: 69px;
margin: 3px;
padding: 5px;
color: #000;
background-color: #eeecea;
transition-duration: 0.6s;-moz-transition-duration: 0.6s;-webkit-transition-duration: 0.6s;-o-transition-duration: 0.6s;
}

.boarddesc:hover {
  opacity: 0.8;
}


.boarddesclink {
opacity: 0.8;
position: absolute;
font-family: Trajanpro;
font-variant: small-caps;
font-size: 10px;
font-family: georgia;
text-transform: uppercase;
text-align: center;
text-shadow: #000000 0px 0px 3px;
padding: 2.5px;
font-weight: normal;
color: #f6f3e9;
margin-top: -20px;
margin-left: -1px;
width: 476px;
background-color: #585858;
}

/* -------------------------------- END BOARD DESC*/

I would like to have the drop outs just normally under the tab, so if there is someone that can help me with this problem I would be very grateful ^^

Love & Rockets,
Hert.

P.S. I can provide an image of what I want (edited that is) if my description is a little bit unclear/confusing (;

do you have a test forum or somewhere i can see this menu?

Here you go: http://layouttestn.actieforum.com/ ^^

replace

Code:

#nav li:hover ul, #nav li.ie_does_hover ul {
left: auto;
background-position: 0 0;
}

with

Code:

#nav li:hover ul, #nav li.ie_does_hover ul {
left: auto !important;
   margin-left:-85px;
display:initial;
background-position: 0 0;
}

Hmn, it still looks a bit weird...
But can I perhaps change the position by changing the number from margin-left?

edit: yes I can!

Thank you very much for your help ^^

This problem is here by SOLVED.

Thanks for the help, twisted.

Topic archived