无法对齐CSS下拉菜单
问题描述:
正如我上面告诉的,我无法将下拉菜单对齐到正确的位置。我想要的是放下他们父母下的项目。无法对齐CSS下拉菜单
,当我在 “HOVERTHIS”
悬停我需要找到他们的父母下的子菜单。
这里是我的HMTL:
<div id="templatemo_menu">
<ul>
<li><a href="index.php" class="current">Anasayfa</a></li>
<li><a href="galeri.php">Galeri</a></li>
<li><a href="duyurular.php?duyuru=1">23 Nisan</a></li>
<li><a href="urunler.php">Ürünler</a></li>
<li><a href="iletisim.php">İletişim</a></li>
<li><a href="icerik.php?icerik=3">Okuyun</a></li>
<li><a href="urunler.php" onclick="return false;">HOVERTHIS</a>
<ul class="alturun">
<li><a href="urunler.php?kat=2">Test Kategori 1</a></li>
<li><a href="urunler.php?kat=3">Hizmet Ürünleri</a></li>
<li><a href="urunler.php?kat=15">POWDERS</a></li>
</ul>
</li>
</ul>
<div class="cleaner"></div>
</div> <!-- end of templatemo_menu -->
这里是我的CSS:
/* menu */
#templatemo_menu {
clear: both;
width: 900px;
height: 40px;
padding: 0 30px;
background:url(images/templatemo_menu.png)
}
#templatemo_menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#templatemo_menu ul li {
padding: 0px;
margin: 0px;
display: inline;
}
#templatemo_menu ul li a {
float: left;
display: block;
width: 100px;
height: 28px;
padding: 9px 0 0;
margin: 0 1px 0 0;
font-size: 14px;
text-align: center;
text-decoration: none;
color: #383838;
font-weight: 500;
letter-spacing: 1px;
outline: none;
border: none;
}
#templatemo_menu ul li a:hover, #templatemo_menu ul li .current { color: #000; height: 31px; padding: 6px 0 0; background: url(images/templatemo_menu_hover.png) bottom center no-repeat }
.alturun {
}
#templatemo_menu ul li:hover ul {
display: block;
}
#templatemo_menu ul li ul{
width: 100px;
display: none;
}
/* end of menu */
在此先感谢!
编辑由山姆
基于OP的代码包括的jsfiddle - >http://jsfiddle.net/uWcLM/
答
你可以添加position: relative;
到下拉列表包含在随后position: absolute;
+一些顶部和左侧值来设置UL李在其中下拉。
看到我的改变山姆只要你http://jsfiddle.net/rlemon/uWcLM/1/
答
的关键是的#templatemo_menu UL李display: inline-block
代替display: inline
然后你就可以定位与嵌套UL的小提琴:
position: absolute;
top: 20px;
我分叉原来的jsfiddle:http://jsfiddle.net/SE4cD/2/
此解决方案不工作,除了最后一个菜单EM。尝试添加子菜单的其他选项:http://jsfiddle.net/TpD5T/ – cstack 2012-07-22 22:20:46