Question

这是我的一些例子。它没有完整，我没有包含整个代码，因为它与此无关。

我希望我的第一个和第二个菜单项排成一行，而不是另一个。

我有这个东西＆＃34; drsalnik＆＃34;，它是为6个项目制作的（它们扩展（1％）并且用悬停淡入/淡出）并且我希望它们也是一个下拉，使用子菜单项进行扩展（也可以在css中悬停）。

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>
<li><a href="6stran.html" ><div class="item six">Ostala oprema</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>
</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;
    float: 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%;
}

已编辑：子菜单和菜单对齐问题。＆＃34; Domov＆＃34;的子菜单出现在＆＃34; Fotoaparati＆＃34;以及＆＃34; Fotoaparati＆＃34;的子菜单下。出现在＆＃34; Objektivi＆＃34;。有什么想法吗？

Answer 1

查找.navbar li并将其更改为此，这将解决您的浮动问题。

.navbar li{
    display: block;
}

Answer 2

“navbar li”中的“clear：both”似乎是问题所在。

尝试：

.navbar li{
    display: block;
    width: 100%;
}

在css中进行下拉菜单的问题

2 个答案: