The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Drop out tabs not straight

View previous topic View next topic Go down

Solved Drop out tabs not straight

Post by Hert on January 14th 2015, 12:40 pm

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:

Since it's a print screen you can't see my cursor, but it is placed on the FIRST tab
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 (;


Last edited by Hert on January 14th 2015, 1:59 pm; edited 1 time in total

Hert
Forumember

Posts : 81
Reputation : 3
Language : Dutch and English

http://afterthefall.actieforum.com/

Back to top Go down

Solved Re: Drop out tabs not straight

Post by _Twisted_Mods_ on January 14th 2015, 12:56 pm

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

_Twisted_Mods_
Helper
Helper

Male Posts : 2020
Reputation : 299
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Drop out tabs not straight

Post by Hert on January 14th 2015, 1:03 pm


Hert
Forumember

Posts : 81
Reputation : 3
Language : Dutch and English

http://afterthefall.actieforum.com/

Back to top Go down

Solved Re: Drop out tabs not straight

Post by _Twisted_Mods_ on January 14th 2015, 1:26 pm

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;
}

_Twisted_Mods_
Helper
Helper

Male Posts : 2020
Reputation : 299
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Drop out tabs not straight

Post by Hert on January 14th 2015, 1:52 pm

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.

Hert
Forumember

Posts : 81
Reputation : 3
Language : Dutch and English

http://afterthefall.actieforum.com/

Back to top Go down

Solved Re: Drop out tabs not straight

Post by Ange Tuteur on January 15th 2015, 4:35 am

Thanks for the help, twisted.

Topic archived

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum