Reputation: 3247
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.
Upvotes: 2
Views: 2399
Reputation: 3856
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.
Upvotes: 1
Reputation: 29975
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 :
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.
Upvotes: 0