如何使css下拉菜单中的一个下拉菜单
我仍在工作我的页脚。所以我想有一个语言选择器应该放在首位。所以我试图找到一个方法列出来,我不知道该怎么做!一切都会列在下面。如何使css下拉菜单中的一个下拉菜单
的HTML结构是这样的:
<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>
而对于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;
}
所以,如果有一个人谁可以帮我我真的感激。
你可以尝试这样的事情http://jsfiddle.net/ZG2BL/
的想法是,要设置li
是持有下拉ul
为position:relative;
和ul
下拉为position:absolute;
,并给它一个正面底部值,它会显示出来以上父母li
我必须说你有很多独特的代码。例如,他不需要li
元素被包装在div
等等。你也不能有数字ID。
这是确实难以制作一个上拉菜单,因为HTML/CSS从上到下工作,并且要创建一个上拉菜单,您必须确切知道菜单的大小。
幸运的是,有黑客可以解决这个问题。我只是想出了一个有点复杂,但应该只是罚款:
- 做一个下拉菜单
- 旋转整个菜单使用CSS 180度。
- 确保旋转点设置正确,以便使用菜单栏(?)的中间作为旋转点进行旋转。
- 将所有菜单项目旋转180度以确保文本不是颠倒的。
就像我说的,它有点复杂,但它应该工作。将项目旋转180度将迫使CSS从下到上工作,因此您不必对任何高度进行硬编码。
当然,有些JavaScript替代品比较容易,但如果你理解我刚写的东西,这个CSS hack应该相当容易实现。
OMG !!!第一步:准备好。第二步:这是如何工作的? – bonny
查看[您最喜爱的搜索引擎](http://www.bing.com/search?q=css+rotate)。 –
你好,谢谢你回答这个问题。李的问题是我有一个很大的sprite.png。这我不能用作div的背景图片。所以我不得不使用li来限制我想要显示的可见标志。否则我不知道如何去实现它。 – bonny
@bonny在这种情况下,把里面的div –
好吧,非常感谢你的帮助。 – bonny