ナビゲーションバーのリンクからドロップダウンメニューを作成する方法

ドラッグしたときにナビゲーションバーのリンクからドロップダウンメニューを作成しようとしています。私はどのようにドロップダウンリスト内のリンクのリストを非表示にして、適切なリンクが上にホバーされたときにそれらを表示させるか分からない。どんな助けもありがとう。ナビゲーションバーのリンクからドロップダウンメニューを作成する方法

これまでに、これまで私のHTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>Dropdown Menu</title> 
    <link rel="stylesheet" type="text/css" href="main.css"> 
</head> 
<body> 
    <nav> 
     <ul> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">About</a></li> 
      <li> 
       <a href="#">Products</a> <!-- link that creates dropdown menu --> 
       <ul class="dropdown"> <!-- dropdown menu list --> 
        <li><a href="#">Engineering</a></li> 
        <li><a href="#">Technical</a></li> 
        <li><a href="#">Other</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Something</a></li> 
      <li><a href="#">Last</a></li> 
     </ul> 
    </nav> 
</body> 
</html>

マイCSS

body { 
    margin: 0; 
} 
nav { 
    background-color: green; 
} 

a { 
    text-decoration: none; 
    color: white; 
} 

ul { 
    list-style: none; 
    text-align: center; 
} 

li { 
    display: inline-block; 
    padding-right: 10px; 
} 

a:hover { 
    color: yellow; 
} 

.dropdown { 
    display: none; 
}

出典

2017-01-07 jtc10

は、この使用してください：一般的に

ul{ 
 
     padding: 0; 
 
     list-style: none; 
 
     background: green; 
 
    } 
 
    ul li{ 
 
     display: inline-block; 
 
     position: relative; 
 
     line-height: 21px; 
 
     text-align: left; 
 
    } 
 
    ul li a{ 
 
     display: block; 
 
     padding: 8px 25px; 
 
     color: #fff; 
 
     text-decoration: none; 
 
    } 
 
    ul li a:hover{ 
 
     color: #fff; 
 
     background: #000; 
 
    } 
 
    ul li ul.dropdown{ 
 
     min-width: 100%; /* Set width of the dropdown */ 
 
     background: green; 
 
     display: none; 
 
     position: absolute; 
 
     z-index: 999; 
 
     left: 0; 
 
    } 
 
    ul li:hover ul.dropdown{ 
 
     display: block; \t /* Display the dropdown */ 
 
    } 
 
    ul li ul.dropdown li{ 
 
     display: block;}

<nav> 
 
     <ul> 
 
      <li><a href="#">Home</a></li> 
 
      <li><a href="#">About</a></li> 
 
      <li> 
 
       <a href="#">Products &#9662;</a> <!-- link that creates dropdown menu --> 
 
       <ul class="dropdown"> <!-- dropdown menu list --> 
 
        <li><a href="#">Engineering</a></li> 
 
        <li><a href="#">Technical</a></li> 
 
        <li><a href="#">Other</a></li> 
 
       </ul> 
 
      </li> 
 
      <li><a href="#">Something</a></li> 
 
      <li><a href="#">Last</a></li> 
 
     </ul> 
 
    </nav>

出典

2017-01-07 20:16:44 bulldozer

をメインのnav要素のホバーイベントにCSSクラスを割り当てることで、nav要素がホバーされ、そのnav要素にネストされたメニューがある場合は、ホバーにネストされたメニューを表示するようにします。

ここにデモがあります。

* {margin:0;padding:0;} 
 
body { 
 
    margin: 0; 
 
} 
 
nav { 
 
    background-color: green; 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
    color: white; 
 
    display: block; 
 
} 
 

 
ul { 
 
    list-style: none; 
 
    text-align: center; 
 
} 
 

 
li { 
 
    display: inline-block; 
 
    padding-right: 10px; 
 
    position: relative; 
 
} 
 

 
a:hover { 
 
    color: yellow; 
 
} 
 

 
.dropdown { 
 
    display: none; 
 
} 
 

 
li:hover .dropdown { 
 
    display: block; 
 
    position: absolute; 
 
} 
 

 
ul ul a { 
 
    color: green; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>Dropdown Menu</title> 
 
    <link rel="stylesheet" type="text/css" href="main.css"> 
 
</head> 
 
<body> 
 
    <nav> 
 
     <ul> 
 
      <li><a href="#">Home</a></li> 
 
      <li><a href="#">About</a></li> 
 
      <li> 
 
       <a href="#">Products</a> <!-- link that creates dropdown menu --> 
 
       <ul class="dropdown"> <!-- dropdown menu list --> 
 
        <li><a href="#">Engineering</a></li> 
 
        <li><a href="#">Technical</a></li> 
 
        <li><a href="#">Other</a></li> 
 
       </ul> 
 
      </li> 
 
      <li><a href="#">Something</a></li> 
 
      <li><a href="#">Last</a></li> 
 
     </ul> 
 
    </nav> 
 
</body> 
 
</html>

出典

2017-01-07 20:18:55

ナビゲーションバーのリンクからドロップダウンメニューを作成する方法

答えて

関連する問題