ドロップダウンメニューが機能しない

About Meの要素からカーソルを移動すると、ドロップダウンメニューが消えます。トップアトリビュートを調整しても機能しますが、ナビゲーションバードロップダウンメニューでは、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）の例ですか？最後の1つは、問題を特定するのに役立ちます。 – 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

ドロップダウンメニューが機能しない

答えて

関連する問題