リストを使ってドロップダウンメニューを作る方法

Question

これは私のhtmlとcssです。私はホバー上のドロップダウンメニューを作成したいが、私はそれぞれのクラスを呼び出すことはできません。誰かが私にこれを手伝うことができれば。とても感謝しております。私はjavascriptを使いたくありません。私はcssで解決策が欲しいだけです。 P.S：私は 私のウェブサイトのためのテンプレートを使用しています。私はちょうどヘッダークラ​​スを呼び出す際に助けが必要です。

#navigation .navbar { 
 
    background: rgba(255, 255, 255, 0.952941); 
 
    border-radius: 0; 
 
    border-bottom: 0; 
 
    box-shadow: rgba(0, 0, 0, 0.298039) 0px 0px 3px; 
 
    padding-bottom: 8px; 
 
} 
 

 
#navigation .navbar-toggle { 
 
    margin-top: 20px; 
 
    background-color: #333; 
 
} 
 

 
#navigation .navbar-brand h1 { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
#navigation .navbar-nav.navbar-right li { 
 
    padding: 0 1px; 
 
} 
 

 
#navigation .navbar-nav.navbar-right { 
 
    margin-top: 28px 
 
} 
 

 
#navigation .navbar-nav.navbar-right li a { 
 
    color: #43484E; 
 
    font-family: 'Roboto', sans-serif; 
 
    font-size: 14px; 
 
    padding: 0; 
 
    text-transform: uppercase; 
 
    -webkit-transition: all .9s ease 0s; 
 
    -moz-transition: all .9s ease 0s; 
 
    -o-transition: all .9s ease 0s; 
 
    transition: all .9s ease 0s; 
 
    padding: 6px 15px; 
 
} 
 

 
#navigation .navbar-inverse .navbar-nav .active a, 
 
#navigation .navbar-inverse .navbar-nav .active a:focus, 
 
#navigation .navbar-nav.navbar-right li a:hover { 
 
    color: #fff; 
 
    background-color: #ce181e; 
 
}

<header id="navigation"> 
 
    <div class="navbar navbar-inverse navbar-fixed-top" role="banner"> 
 
    <div class="container"> 
 
     <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
      <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="index.html"> 
 
      <h1><img src="images/logo.png" alt="logo"></h1> 
 
     </a> 
 
     </div> 
 
     <div class="collapse navbar-collapse"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li class="scroll active"><a href="#navigation">About Us</a></li> 
 
      <li class="scroll"><a href="#about-us">Academics</a></li> 
 
      <li class="scroll"><a href="#services">Admissions</a></li> 
 
      <li class="scroll"><a href="#our-team">Campuses</a></li> 
 
      <li class="scroll"><a href="#portfolio">Student Life</a></li> 
 
      <li class="scroll"><a href="#clients">News & events</a></li> 
 
      <li class="scroll"><a href="#blog">Careers</a></li> 
 
      <li class="scroll"><a href="#contact">Contact</a></li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <!--/navbar--> 
 
</header> 
 
<!--/#navigation-->

コード

Answer 1

H！シンプルなCSSのみのドロップダウンメニューがliにオプションでネストされたulを配置し、これらのスタイルを追加することによって行うことができ、あなたの初期設定を使用：

#navigation .navbar-nav.navbar-right li ul { 
    padding: 0; 
    display: inline-block; 
} 
#navigation .navbar-nav.navbar-right li { 
    list-style: none; 
} 
#navigation .navbar-nav.navbar-right li ul li:not(:first-of-type) { 
    display: none; 
} 
#navigation .navbar-nav.navbar-right li ul:hover li { 
    display: block; 
} 
#navigation .navbar-nav.navbar-right li { 
    padding: 5px; 
} 

#navigation .navbar { 
 
    background:rgba(255, 255, 255, 0.952941); 
 
    border-radius: 0; 
 
    border-bottom: 0; 
 
    box-shadow: rgba(0, 0, 0, 0.298039) 0px 0px 3px; 
 
    padding-bottom: 8px; 
 
} 
 

 
#navigation .navbar-toggle{ 
 
    margin-top: 20px; 
 
    background-color: #333; 
 
} 
 

 
#navigation .navbar-brand h1{ 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
#navigation .navbar-nav.navbar-right { 
 
\t margin-top:28px 
 
} 
 
/* added styles start */ 
 
#navigation .navbar-nav.navbar-right li ul { 
 
    padding: 0; 
 
    display: inline-block; 
 
} 
 
#navigation .navbar-nav.navbar-right li { 
 
    list-style: none; 
 
} 
 
#navigation .navbar-nav.navbar-right li ul li:not(:first-of-type) { 
 
    display: none; 
 
} 
 
#navigation .navbar-nav.navbar-right li ul:hover li { 
 
    display: block; 
 
} 
 
#navigation .navbar-nav.navbar-right li { 
 
\t padding: 5px; 
 
} 
 
/* added styles end */ 
 
#navigation .navbar-nav.navbar-right li a { 
 
\t color: #43484E; 
 
\t font-family: 'Roboto',sans-serif; 
 
\t font-size: 14px; 
 
\t padding: 0; 
 
\t text-transform: uppercase; 
 
\t -webkit-transition: all .9s ease 0s; 
 
\t -moz-transition: all .9s ease 0s; 
 
\t -o-transition: all .9s ease 0s; 
 
\t transition: all .9s ease 0s; 
 
\t padding: 6px 15px; 
 
} 
 

 
#navigation .navbar-inverse .navbar-nav .active a, 
 
#navigation .navbar-inverse .navbar-nav .active a:focus, 
 
#navigation .navbar-nav.navbar-right li a:hover { 
 
\t color: #fff; 
 
\t background-color: #ce181e; 
 
}

<header id="navigation"> 
 
\t \t <div class="navbar navbar-inverse navbar-fixed-top" role="banner"> 
 
\t \t \t <div class="container"> 
 
\t \t \t \t <div class="navbar-header"> 
 
\t \t \t \t \t <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
\t \t \t \t \t \t <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> 
 
\t \t \t \t \t </button> 
 
\t \t \t \t \t <a class="navbar-brand" href="index.html"><h1><img src="images/logo.png" alt="logo"></h1></a> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="collapse navbar-collapse"> 
 
\t \t <ul class="nav navbar-nav navbar-right"> 
 
      <li class="scroll"><a href="#about-us">Academics</a></li> 
 
\t \t <li class="scroll active"> 
 
      <ul> 
 
       <li><a href="#navigation">About Us0</a></li> 
 
       <li><a href="#navigation">About Us1</a></li> 
 
       <li><a href="#navigation">About Us2</a></li> 
 
       <li><a href="#navigation">About Us3</a></li> 
 
      </ul> 
 
      </li> 
 
\t \t <li class="scroll"><a href="#services">Admissions</a></li> 
 
\t \t <li class="scroll"><a href="#our-team">Campuses</a></li> 
 
\t \t <li class="scroll"><a href="#portfolio">Student Life</a></li> 
 
\t \t <li class="scroll"><a href="#clients">News & events</a></li> 
 
\t \t <li class="scroll"><a href="#blog">Careers</a></li> 
 
\t \t <li class="scroll"><a href="#contact">Contact</a></li> 
 
\t </ul> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div><!--/navbar--> 
 
\t </header> <!--/#navigation-->

をだから、私はあなたを願っていますアイデアを得て、今あなたが欲しいものを達成するために遊ぶことができます。より複雑なレイアウトを作成するために必要な資料をpositioningで確認できます。