2

I'm still working on my footer. So I would like to have a language selector that should drop down to the top. So I tried to find a method to list them up and I have no clue how to do so! Everything will be listed downside.

The HTML structure is like that:

<div id="legals">
    <div id="list2">
    <span class="down">text large</span>
         <ul class="nav2">
        <li><a href="/one">one</a></li>
        <li>|</li>
        <li><a href="/two">two</a></li>
        <li>|</li>
        <li><a href="/three">three</a></li>
        <li>|</li>
        <li>select:</li>
          </ul>
              <ul class="flag"> -->here it starts
                <li id="1"> -->just an image of a flag. when hover this, the divs below should be visible
                    <ul class="drop_down">
                           <div> -->as an container for the flags and label
                               <li id="en"></li>-->shows just an image<a href="#">one</a> -->will be the link 
                           </div>
                           <div>
                       <li id="fr"></li><a href="#">two</a>
                           </div>
                           <div>
                       <li id="pl"></li><a href="#">three</a>
                           </div> 
                        </ul>
                </li>
               </ul>
      </div>
</div>

And for the CSS:

.footer #legals #list2 .flag {
    width: 20px;
    height: 10px;
    margin-top: 14px;
    margin-left: 8px;
    float: left;
    display: inline-block;
    border: 1px solid #ccc;
}
.footer #legals #list2 .flag:hover {
    border: 1px solid #fff;
}
.footer #legals #list2 .flag li{
    width: 20px;
    height: 10px;
    display: inline-block;
    float:left;
    background-image:url(../images/flags.png);
}
.footer #legals #list2 .flag #en{   
    background-position: -40px;
}

/*HOVERSETTINGS*/
.footer #legals #list2 .flag li .drop_down{
    display:none;
}

.footer #legals #list2 .flag li .drop_down div{ 
    width: 100px;
    height: 16px;
    border-top: 1px solid #9fce23;
    border-bottom: 1px solid #9fce23;
    background-color: #f23;
        display:block;
}
.footer #legals #list2 .flag li .drop_down div li{
    width: 20px;
    height: 10px;
    background-image:url(../images/flags.png);
    background-repeat: no-repeat;
    border: 1px solid #ccc;
    margin-top: 1px;
}
.footer #legals #list2 .flag li .drop_down div:hover{
    color: #fff;    
}
.footer #legals #list2 .flag li .drop_down div a{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #ccc;
    font-weight:bolder;
    text-align: left;
    margin-left: 10px;  
}

So if there is someone who could help me out I really would appreciate.

2 Answers 2

1

You can try something like this http://jsfiddle.net/ZG2BL/

The idea is, to set the li that holds dropdown ul as position:relative; and the ul dropdown as position:absolute; and give it a positive bottom value so it'll show up above the parent li

I must say that you have a lot of unnesecary code. For example ther's no need for li elements to be wrapped in div etc. Also you cant have numerical id's.

2
  • hello and thanks for answering this question. the problem with the li was that i have a large sprite.png. this i can not use as background image for the div. so i had to use a li to limit the visible flag that i like to display. otherwise i would not know how to realize it else.
    – bonny
    Dec 16, 2012 at 21:49
  • @bonny in that case, put the div inside the li Dec 16, 2012 at 21:57
0

It's really hard to make a dropup menu, because HTML/CSS works from top to bottom and to make a dropup menu you'd have to know exactly how large the menu is.

Luckily, there are hacks to work around this. I just came up with one that's a bit complex but should work just fine :

  1. Make a dropdown menu
  2. Rotate the entire menu 180 degrees using CSS.
  3. Ensure that the pivot point is set correctly so that it rotates using the middle of the menu bar (?) as the rotation point.
  4. Rotate all menu items 180 degrees to make sure the text isn't upside down.

Like I said, it's a bit complex, but it should work. Rotating the items 180 degrees will force CSS to work bottom-to-top so you don't have to hardcode any heights.

Of course, there are JavaScript alternatives that are easier, but this CSS hack should be fairly easy to implement if you understood what I just wrote.

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.