在懸停期間，CSS無法根據需要定位菜單塊

我的左側塊包含垂直菜單以及上下的其他項目。主菜單項是可見的。當鼠標懸停在主菜單項上時，我想要一個二級菜單塊變爲可見並且被移動（向下和向右）。所有這些都應該可以使用CSS來實現。在懸停期間，CSS無法根據需要定位菜單塊

當我將樣式設置爲position: absolute時，輔助菜單全部顯示在相同位置，而不是垂直位於活動鏈接下方。

當我將樣式設置爲position: relative時，輔助菜單顯示在正確的位置，但較低的主菜單向下移動，更改了左手塊的尺寸。

有沒有辦法在正確的位置疊加二級菜單塊？

相關CSS是：

.nav 
{ 
    padding: 0; 
    margin: 0; 
    border-right: 1px hidden #54879d; 
    z-index: 20; 
} 

.nav li 
{ 
    height: auto; 
    display: block; 
    text-align: left; 
    list-style: none; /* Removes the default styling (bullets) for the list */ 
    font-family:"Arial Black", Gadget, sans-serif; 
    font-size:1.00em; 
    padding: 0 0 15px 0; 
    margin: 0; 
} 

.nav a 
{       
    border-left: 1px hidden #54879d; 
    border-right: 1px hidden #1f5065; 
    text-decoration: none; 
    color: white; 
    display: block; 
} 

.nav li ul 
{ 
    display: none; /* Hides the drop-down menu */ 
    height: auto;         
    margin: 0; /* Aligns drop-down box underneath the menu item */ 
    padding: 1px; /* Aligns drop-down box underneath the menu item */   
}    

.nav li:hover ul 
{ 
    display: block; /* Displays the drop-down box when the menu item is hovered over */ 
    position: relative; //absolute; 
    top: 1em; 
    left: 50px; 
    background-color: LightSlateGray; 
} 

.nav li ul li 
{ 
    width: 150px; 
} 

.nav li ul li a 
{ 
    border-left: 1px hidden #1f5065; 
    border-right: 1px hidden #1f5065; 
    border-top: 1px hidden #74a3b7; 
    border-bottom: 1px hidden #1f5065; 
} 

.nav li ul li a:hover { background-color: rgb(180, 0, 0); }

典型HTML是這樣，但可以具有不同數量的內一次菜單項和次級菜單項目的：

<ul class="nav"> 
    <li class=" active "> 
     <a href="firstpage" id="link">Overview</a> 
    </li> 
    <li> 
     <div class="dropdown inactive " id="itemContainer"> 
      <a href="secondmenu?3#" id="dropdown" class="dropdown-toggle" data-toggle="dropdown">Terms</a> 
      <ul class="dropdown-menu"> 
       <li> 
        <a href="seondsinglepage" id="link">New Term</a> 
       </li> 
       <li> 
        <a href="secondmultiplepage" id="link">View Terms</a> 
       </li> 
      </ul> 
     </div> 
    </li> 
    <li> 
     <div class="dropdown inactive " id="itemContainer"> 
      <a href="thirdmenu?3#" id="dropdown" class="dropdown-toggle" data-toggle="dropdown">Classes</a> 
      <ul class="dropdown-menu"> 
       <li> 
        <a href="secondsinglepage" id="link">New Class</a> 
       </li> 
       <li> 
        <a href="secondmultiplepage" id="link">View Classes</a> 
       </li> 
      </ul> 
     </div> 
    </li> 
    <li><a href="j_spring_security_logout" id="logout_link">Logout</a></li> 
</ul>

來源

2017-05-29 JoeAB

嘗試增加： .nav li {position：relative;} 它將爲它的子元素設置一個相對位置 - 也就是你的子菜單。

然後， .nav li：hover ul {position：absolute; z-index：1;} 將您的子菜單定位在內聯佈局和z-index之外：1將它置於主菜單的z-index之上。

來源

2017-05-29 23:27:20 adriatiq

在懸停期間，CSS無法根據需要定位菜單塊

回答

相關問題