ナビゲーションバーにカーソルを合わせる

Question

ナビゲーションバーにはサブナビゲーションがありますが、ナビゲーションの特定の部分にカーソルを合わせると、サブメニューが非常に奇妙に表示されます。ここに私のコードです：

#menu { 
 
    background-color: rgba(0, 0, 0, 0.6); 
 
    width: 715px; 
 
    margin-left: 600px; 
 
    font-family: "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif; 
 
    border-radius: 4px; 
 
} 
 
#menu ul li { 
 
    display: inline-block; 
 
    padding: 15px; 
 
    margin-left: 90px; 
 
} 
 
#menu ul li a { 
 
    text-decoration: none; 
 
    color: #FFF; 
 
} 
 
/* Sub-menu */ 
 

 
#menu ul ul { 
 
    display: none; 
 
} 
 
#menu ul li:hover > ul { 
 
    display: block; 
 
}

<nav id="menu"> 
 
    <ul> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">Projecten<i class="material-icons" style="font-size:15px">arrow_drop_down</i> 
 
    \t <ul class="sub-menu"> 
 
    \t \t <li><a href="ru.html">Russisch</a></li> 
 
     </ul> 
 
     </a> 
 
    </li> 
 
    <li><a href="contact.html">Contact</a></li> 
 
    </ul> 
 
</nav>

それは "Projecten" タブの下に開く必要がありますが、ある本を行います。 problem

Answer 1

。これは、すべての部分を抜き出し、それが見えるようにします。

解決策は、position: absolute;で、サイトのフローからサブメニューを削除します。私はあなたの仕事を継続するため、これは十分に晴れていただければ幸いです

#menu { 
 
     background-color: rgba(0,0,0,0.6); 
 
     width: 715px; 
 
     margin-left: 600px; 
 
     font-family: "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif; 
 
     border-radius: 4px; 
 
    } 
 
    
 
    #menu ul li { 
 
     display: inline-block; 
 
     padding: 15px; 
 
     margin-left: 90px; 
 
     position: relative; /* This is needed to be able to set 
 
          the submenu relative to it's parent item */ 
 
    } 
 
    
 
    #menu ul li a { 
 
     text-decoration: none; 
 
     color: #FFF; 
 
    
 
    } 
 
    
 
    /* Sub-menu */ 
 
    
 
    #menu ul ul { 
 
     display: none; 
 
     /* Here we'll place it at the bottom of the menu item */ 
 
     position: absolute; 
 
     top: 100%; /* This should equal the bottom of the item */ 
 
     left: 0; /* To put it at the left side of the item */ 
 
     /** And some basic styling to make it visible */ 
 
     background: rgba(0,0,0,0.6); 
 
    } 
 
    
 
     #menu ul li:hover > ul { 
 
      display:block; 
 
     }

<nav id="menu"> 
 
    \t \t \t <ul> 
 
    \t \t \t \t <li><a href="#">Home</a></li> 
 
    \t \t \t \t <li><a href="#">Projecten<i class="material-icons" style="font-size:15px">arrow_drop_down</i></a> 
 
    \t \t \t \t <ul class="sub-menu"> 
 
    \t \t \t \t \t <li><a href="ru.html">Russisch</a></li> 
 
    \t \t \t \t </ul> 
 
    \t \t \t \t </li> 
 
    \t \t \t \t <li><a href="contact.html">Contact</a></li> 
 
    \t \t \t </ul> 
 
    \t \t </nav>

：私はあなたのコードを使用して、あなたの一例を紹介します。

EDIT：HTMLもクリアしました。リンクに新しいULを開くべきではありません。

Answer 2

使用ポジショニング。方法は次のとおりです。

• li要素にposition: relativeを追加します。
• 第2レベルに要素にposition: absoluteを追加します。
• 第2レベルの背景色をul要素に追加します。

これは、これをドロップダウンメニューとして表示します。

の作業例：

#menu { 
 
     background-color: rgba(0,0,0,0.6); 
 
     width: 715px; 
 
     margin-left: 600px; 
 
     font-family: "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif; 
 
     border-radius: 4px; 
 
    } 
 
    
 
    #menu ul li { 
 
     display: inline-block; 
 
     padding: 15px; 
 
     margin-left: 90px; 
 
     position: relative; /*Added this*/ 
 
    
 
    } 
 
    
 
    #menu ul li a { 
 
     text-decoration: none; 
 
     color: #FFF; 
 
    
 
    } 
 
    
 
    /* Sub-menu */ 
 
    
 
    #menu ul ul { 
 
     display: none; 
 
     background-color: rgba(0,0,0,0.6); /*added this*/ 
 
     position: absolute; /*and this*/ 
 
     /*These two are positioning the dropdown relative to the bottom left corner of the parent item*/ 
 
     left: 0; 
 
     top: 100%; 
 
    } 
 
    
 
    #menu ul li:hover > ul { 
 
     display:block; 
 
    }

<nav id="menu"> 
 
    \t \t \t <ul> 
 
    \t \t \t \t <li><a href="#">Home</a></li> 
 
    \t \t \t \t <li><a href="#">Projecten<i class="material-icons" style="font-size:15px">arrow_drop_down</i> 
 
    \t \t \t \t <ul class="sub-menu"> 
 
    \t \t \t \t \t <li><a href="ru.html">Russisch</a></li> 
 
    \t \t \t \t </ul> 
 
    \t \t \t \t </a></li> 
 
    \t \t \t \t <li><a href="contact.html">Contact</a></li> 
 
    \t \t \t </ul> 
 
    \t \t </nav>

あなたはできるだけ早くあなたが display: none;から display: block;に何かを設定すると、メニューに要素を追加しているためだ

Answer 3

/* edit by Manish*/ 
.sub-menu { 
    background: #333 none repeat scroll 0 0; 
    left: 0; 
    position: absolute; 
    right: 0; 
    top: 49px; 
} 
.parent{ 
    position: relative; 
} 
/* edit by Manish*/ 

親に「親」クラスを追加し、「李」

<nav id="menu"> 
        <ul> 
         <li><a href="#">Home</a></li> 
         <li class="parent"><a href="#">Projecten<i class="material-icons" style="font-size:15px">arrow_drop_down</i> 
         <ul class="sub-menu"> 
          <li><a href="ru.html">Russisch</a></li> 
         </ul> 
         </a></li> 
         <li><a href="contact.html">Contact</a></li> 
        </ul> 
       </nav>