下拉菜單不工作

當我將光標從About Me li元素移開時，下拉菜單消失了，我知道如果我調整top屬性，它會起作用，但我想在導航欄之間保留一點距離和下拉菜單，我不想js或jquery修復，現在我只想知道這是否可以用CSS來完成。下拉菜單不工作

HTML CSS &

navboy { 
 
    margin-top: 50px; 
 
    height: 25px; 
 
    border-radius: 20px; 
 
    background-image: -webkit-linear-gradient(left, #999999 0.1%, #bfbfbf 50%, #cccccc); 
 
    background-image: -o-linear-gradient(left, #999999 0.1%, #bfbfbf 50%, #cccccc); 
 
    background-image: linear-gradient(left, #999999 0.1%, #bfbfbf 50%, #cccccc); 
 
} 
 
.nav { 
 
    list-style: none; 
 
    padding: 0px; 
 
    margin: 0px; 
 
} 
 
.nav li { 
 
    display: inline-block; 
 
    float: left; 
 
    position: relative; 
 
    margin-right: 40px; 
 
    margin-left: 20px; 
 
} 
 
ul.nav a { 
 
    display: inline-block; 
 
    text-decoration: none; 
 
    font-family: 'Abel', sans-serif; 
 
    font-size: 110%; 
 
    color: #000; 
 
} 
 
.nav li #embed { 
 
    position: absolute; 
 
    display: none; 
 
    float: left; 
 
    padding: 0; 
 
    margin: 0; 
 
    width: 150px; 
 
    left: -20px; 
 
    top: 140%; 
 
    background: -webkit-linear-gradient(top left, #999999 0.1%, #bfbfbf 97%, #cccccc); 
 
    ; 
 
    border-radius: 10px; 
 
} 
 
.nav > li:hover > #embed { 
 
    display: block; 
 
}

<body> 
 
    <div class="container_12"> 
 
    <div class="grid_12"> 
 
     <div class="headshot push_5"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="container_12"> 
 
    <div class="grid_12 navboy"> 
 
     <ul class="nav"> 
 
     <li><a href="#" id="me">About Me</a> 
 
      <ul id="embed"> 
 
      <li><a href="#">Contact Me</a> 
 
      </li> 
 
      <li><a href="#">Download</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">My Journey</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</body>

來源

2016-09-23 Janit

https：//開頭的jsfiddle .net/dwdfc0by/ – Janit

你有什麼嘗試？你在那裏使用什麼網格系統？這是最[最小，完整，可驗證]（stackoverflow.com/help/mcve）示例嗎？最後一個應該可以幫助你找出問題 – henry

我看着codepen，堆棧溢出。 W3schools，但答案不是我所期待的。我正在使用960.gs框架。 – Janit

您可以使用轉換。這是一個例子。希望它通過定位下拉立即菜單項下面，並給它一些頂尖的填充分離菜單項的下拉有助於

navboy { 
 

 
    margin-top: 50px; 
 
    height: 25px; 
 
    border-radius: 20px; 
 
    background-image: -webkit-linear-gradient(left, #999999 0.1%, #bfbfbf 50%, #cccccc); 
 
    background-image: -o-linear-gradient(left, #999999 0.1%, #bfbfbf 50%, #cccccc); 
 
    background-image: linear-gradient(left, #999999 0.1%, #bfbfbf 50%, #cccccc); 
 
} 
 

 

 
.nav { 
 

 
    list-style: none; 
 
    padding: 0px; 
 
    margin:0px; 
 
} 
 

 
.nav li { 
 

 
    display: inline-block; 
 
    float: left; 
 
    position: relative; 
 
    margin-right: 40px; 
 
    margin-left: 20px; 
 
} 
 

 
ul.nav a { 
 

 
    display: inline-block; 
 
    text-decoration: none; 
 
    font-family: 'Abel', sans-serif; 
 
    font-size: 110%; 
 
    color: #000; 
 
} 
 

 
.nav li #embed { 
 

 
    position: absolute; 
 
    visibility: hidden; 
 
    float: left; 
 
    padding:0; 
 
    margin:0; 
 
    width:150px; 
 
    left:-20px; 
 
    top:140%; 
 
    background: -webkit-linear-gradient(top left, #999999 0.1%, #bfbfbf 97%, #cccccc);; 
 
    border-radius: 10px; 
 
    transition-property: all; 
 
    transition-duration: 1000ms; 
 
    transition-timing-function: ease-in-out; 
 
} 
 

 
.nav > li:hover > #embed { 
 
    visibility:visible; 
 
}

<body> 
 

 
    `<div class="container_12" > 
 
     <div class="grid_12"> 
 
      <div class="headshot push_5"> 
 
     </div> 
 
    </div> 
 
</div> 
 
    <div class="container_12"> 
 
     <div class="grid_12 navboy"> 
 
      <ul class="nav"> 
 
       <li><a href="#" id="me">About Me</a> 
 
        <ul id="embed"> 
 
         <li><a href="#">Contact Me</a></li> 
 
         <li><a href="#">Download</a></li> 
 
        </ul> 
 
       </li> 
 
       <li><a href="#">My Journey</a></li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
</body>

來源

2016-09-23 16:44:41 Stormhashe

謝謝Stormhashe爲你的時間和你的建議，它的作品就像一個魅力。我想問題是顯示屬性，而不是我應該使用可見性屬性？因爲我試圖使用轉換，但它沒有工作較早與顯示屬性 – Janit

酷。轉換不適用於顯示，但會與可見性^^ – Stormhashe

你可以做到這一點。

這裏的工作演示（我修剪你的代碼到一個minimal, complete, verifiable example，使之成爲別人誰運行到同樣的問題很有用）

ul { 
 
    list-style: none; 
 
    padding: 0px; 
 
    margin: 0px; 
 
} 
 
li { 
 
    display: block; 
 
    float: left; 
 
    position: relative; 
 
    margin-right: 40px; 
 
    margin-left: 20px; 
 
} 
 
a { 
 
    display: inline-block; 
 
} 
 
li ul { 
 
    position: absolute; 
 
    display: none; 
 
    float: left; 
 
    padding: 20px 0 0; /* changed this */ 
 
    margin: 0; 
 
    width: 150px; 
 
    left: -20px; 
 
    top: 100%; /* changed this */ 
 
} 
 
li:hover > ul { 
 
    display: block; 
 
}

<ul> 
 
    <li><a href="#">About Me</a> 
 
    <ul> 
 
     <li><a href="#">Contact Me</a> 
 
     </li> 
 
     <li><a href="#">Download</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#">My Journey</a> 
 
    </li> 
 
</ul>

來源

2016-09-27 16:18:11 henry

下拉菜單不工作

回答

相關問題