菜单和子菜单之间的 CSS 下拉菜单对齐 [英] CSS Dropdown menu alignment between menu and submenu

问题描述

我在如何对齐菜单和子菜单方面遇到了很多问题.我的子菜单出现在下一个菜单项上.代码如下:

HTML

<ul class="navbar"><li><a href="Stranzaindexom.html" ><div class="item">Domov</div></a><ul><li><a href="Stranzaindexom.html" >新手</a></li><li><a href="1stran-podstran1.html" >Akcije &popusti</a></li><li><a href="1stran-podstran2.html" >Najbolj iskano</a></li><li><a href="1stran-podstran3.html" >Fotografije tedna</a></li><li><a href="1stran-podstran4.html" >Foto-zgodbe</a></li><li><a href="1stran-podstran5.html" >Dostava</a></li><li><a href="2stran.html" ><div class="item">Fotoaparati</div></a><ul><li><a href="2stran-podstran1.html" >DSLR</a></li><li><a href="2stran-podstran2.html" >Kompaktni</a></li><li><a href="2stran-podstran3.html" >Analogni</a></li><li><a href="2stran-podstran4.html" >Video kamere</a></li><ul><a href="3stran.html" ><div class="item 3">Objektivi</div></a></ul><ul><a href="4stran.html" ><div class="item四">Stojala</div></a></ul><ul><a href="5stran.html" ><div class="item五">bliskavice中的过滤</div></a></ul><ul><a href="6stran.html" ><div class="item 6">Ostala oprema</div></a></ul>

CSS

.drsalnik {宽度:100%；保证金:自动；溢出:隐藏；边框:0；背景颜色:白色；}.物品 {高度:40px；宽度:16.5%；向左飘浮;背景位置:左上角；过渡:宽度 0.5s 缓和；字体大小:140%；文本对齐:居中；边框:黑色实心.5px；不透明度:0.8；}.drsalnik:悬停 .item {宽度:16.5%；过渡:宽度 0.5s 缓和；不透明度:0.4；}.drsalnik .item:hover{宽度:17.5%；过渡:宽度 0.5s 缓和；背景位置:中心；文本对齐:居中；不透明度:5；}.导航栏{列表样式:无；}.navbar li{显示:块；}.navbar ul li{不透明度:0.6；填充顶部:5px；}.navbar li:hover {不透明度:1；显示:块；}.navbar li:hover .item{不透明度:1；}.navbar li ul{显示:无；字体大小:110%；边距顶部:40px；背景颜色:白色；填充:10px；字体样式:斜体；位置:相对；向左飘浮;文本对齐:居中；}.navbar li:hover ul{显示:内联；位置:绝对；宽度:14.5%；}

所以这个想法是让第一个菜单项的子菜单出现在下一个菜单项的正下方而不是下一个菜单项.我尝试在几乎所有地方更改显示和位置，但似乎都不起作用.

这是jsfiddle:http://jsfiddle.net/2mp6ajdx/

解决方案

请尝试将 margin-left: -16.5% 添加到 .navbar li ul

.navbar li ul{显示:无；字体大小:110%；边距顶部:40px；背景颜色:白色；填充:10px；字体样式:斜体；位置:相对；向左飘浮;文本对齐:居中；左边距:-16.5%；}

I'm having a lot of problems how to align menu and submenu. My submenu appears on next menu item. Here's the code:

HTML

<div class="drsalnik">
<ul class="navbar">

<li><a href="Stranzaindexom.html" ><div class="item">Domov</div></a>
<ul>
<li><a href="Stranzaindexom.html" >Novice</a></li>
<li><a href="1stran-podstran1.html" >Akcije & popusti</a></li>
<li><a href="1stran-podstran2.html" >Najbolj iskano</a></li>
<li><a href="1stran-podstran3.html" >Fotografije tedna</a></li>
<li><a href="1stran-podstran4.html" >Foto-zgodbe</a></li>
<li><a href="1stran-podstran5.html" >Dostava</a></li>
</ul>
</li>

<li><a href="2stran.html" ><div class="item">Fotoaparati</div></a>
<ul>
<li><a href="2stran-podstran1.html" >DSLR</a></li>
<li><a href="2stran-podstran2.html" >Kompaktni</a></li>
<li><a href="2stran-podstran3.html" >Analogni</a></li>
<li><a href="2stran-podstran4.html" >Video kamere</a></li>
</ul>
</li>

<ul><a href="3stran.html" ><div class="item three">Objektivi</div></a></ul>
<ul><a href="4stran.html" ><div class="item four">Stojala</div></a></ul>
<ul><a href="5stran.html" ><div class="item five">Filtri in bliskavice</div></a></ul>

<ul><a href="6stran.html" ><div class="item six">Ostala oprema</div></a></ul>

</ul>
</div>

CSS

.drsalnik {
width:100%;
margin:  auto;
overflow:hidden;
border: 0;
background-color: white;
}

.item {
  height:40px;
  width:16.5%;
  float:left;
  background-position: left top;
  transition:width 0.5s ease;
  font-size: 140%;
  text-align: center;
 border: black solid .5px;
 opacity: 0.8;
}

.drsalnik:hover .item {
  width:16.5%;
  transition:width 0.5s ease;
   opacity: 0.4;
}

.drsalnik .item:hover{
    width:17.5%;
    transition:width 0.5s ease;
    background-position: center;
    text-align: center;
    opacity: 5;
}

.navbar{
    list-style: none;
}

.navbar li{
    display: block;
}

.navbar ul li{
    opacity: 0.6;
    padding-top: 5px;
}

.navbar li:hover {
    opacity: 1;
    display: block;
}

.navbar li:hover .item{
    opacity: 1;
}

.navbar li ul{
    display: none;
    font-size: 110%;
    margin-top: 40px;
    background-color: white;
    padding:10px;
    font-style: italic;
    position: relative;
    float: left;
    text-align: center;
}

.navbar li:hover ul{
    display: inline;
    position: absolute;
    width: 14.5%;
}

So the idea is to make submenu of first menu item appears right under and not at the next menu item. I try to change displays and positions almost everywhere, but none seems to work.

Here's jsfiddle: http://jsfiddle.net/2mp6ajdx/

解决方案

Please try to add margin-left: -16.5% to .navbar li ul

.navbar li ul{
    display: none;
    font-size: 110%;
    margin-top: 40px;
    background-color: white;
    padding:10px;
    font-style: italic;
    position: relative;
    float: left;
    text-align: center;
    margin-left: -16.5%;
}

这篇关于菜单和子菜单之间的 CSS 下拉菜单对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！