クラスリストで子供を1人だけ選択する方法

Question

ナビゲーションメニューに一連の送信ボタンを使用しています（送信値はサイト全体のナビゲーション方法になります）。私はドロップダウンからフライアウトを持つドロップダウンメニューを作成しました。しかし、私は、フライアウトを示すためにドロップダウン内のホバリングされた要素だけをどのように分離するのか分かりません。すべてのドロップダウン項目は、すべてのサブメニューまたはなしを表示します。私は>と+子セレクタを別の領域で使用しようとしました。誰でも助けてくれますか？

マイCSS：

/* Dropdown Button */ 
.ddb-container { 
width: 100%; 
    overflow: hidden; 
    background-color: #faebca; 
    font-family: Arial; 
    margin-top: 75px; 
    padding-left: 150px; 
    z-index: 1; 
    border-top: 3px black solid; 
    border-bottom: 3px black solid; 
    border-left: none; 
    border-right: none; 
} 

.ddb-container button { 
    margin: 0; 
    padding: 0; 
    float: left; 
    font-size: 14px; 
    border: none; 
    color: #000000; 
    text-align: center; 
    padding: 5px 10px; 
    text-decoration: none; 
    font-weight: bold; 
    background-color: transparent; 
} 

.ddb-container button:hover { 
    background-color: #dbcfa4; 
} 

.ddb-dropdown { 
    float: left; 
    overflow: hidden; 
    font-size: 14px;  
    font-weight: bold; 
} 

.ddb-dropdown .dropbtn { 
    border: none; 
    outline: none; 
    color: #000000; 
    padding: 5px 10px; 
    background-color: transparent; 
} 

.ddb-dropdown .dropbtn:hover { 
    background-color: #dbcfa4; 
} 

.ddb-dropdown .dropdown-level1 { 
    display: none; 
    position: absolute; 
    background-color: #faebca; 
    min-width: 160px; 
    box-shadow: 0px 8px 12px 0px rgba(0,0,0,0.2); 
    z-index: 1; 
} 

.ddb-dropdown:hover .dropdown-level1 { 
    display: block; 
} 

.ddb-dropdown .dropdown-level1 .dropdown-level2 { 
    display: none; 
    position: absolute; 
    background-color: #faebca; 
    min-width: 160px; 
    margin-left: 160px; 
    box-shadow: 0px 8px 12px 0px rgba(0,0,0,0.2); 
    z-index: 2; 
} 

.ddb-dropdown .dropdown-level1:hover .dropdown-level2 { 
    display: block; 
} 

HTML：あなたは現在、あなたは純粋なCSSで欲しいものを得ることができない持っているHTMLで

<div class='ddb-container'> 
<button type='submit' name='submit' value='0'>Home</button> 
<div class='ddb-dropdown'> 
    <div class='dropbtn'>Sales</div> 
     <div class='dropdown-level1'><button type='submit' name='submit' value='#1'>Link 1</button><br /><br /> 
     <button type='button'>Link 2 ></button><br /> 
      <div class='dropdown-level2'> 
      <button type='submit' name='submit' value='#1'>Sublink 1</button><br /> 
      <button type='submit' name='submit' value='#2'>Sublink 2</button><br /> 
      <button type='submit' name='submit' value='#3'>Sublink 3</button><br /><br /> 
      </div><br /> 
     <button type='submit' name='submit' value='#3'>Link 3</button><br /><br /> 
     <button type='submit' name='submit' value='#4'>Link 4</button><br /><br /> 
     <button type='button'>Link 5 ></button><br /> 
      <div class='dropdown-level2'> 
      <button type='submit' name='submit' value='#1'>Sublink 1</button><br /> 
      <button type='submit' name='submit' value='#2'>Sublink 2</button><br /> 
      <button type='submit' name='submit' value='#3'>Sublink 3</button><br /><br /> 
      </div><br /><button type='submit' name='submit' value='#6'>Link 6</button><br /><br /> 
     </div> 
</div> 

<div class='ddb-dropdown'> 
    <div class='dropbtn'>Purchasing</div> 
</div> 
<div class='ddb-dropdown'> 
    <div class='dropbtn'>Inventory</div> 
</div> 
<div class='ddb-dropdown'> 
    <div class='dropbtn'>Accounting</div> 
</div> 
<div class='ddb-dropdown'> 
    <div class='dropbtn'>Documents</div> 
</div> 
<div class='ddb-dropdown'> 
    <div class='dropbtn'>Tools</div> 
     <div class='dropdown-level1'> 
      <button type='submit' name='submit' value='#1'>Tools Link 1</button><br /><br /> 
      <button type='submit' name='submit' value='#2'>Tools Link 2</button><br /><br /> 
      <button type='submit' name='submit' value='#3'>Tools Link 3</button><br /><br /> 
      <button type='button'>Tools Link 4 ></button><br /> 
       <div class='dropdown-level2'> 
        <button type='submit' name='submit' value='#1'>Sublink 1</button><br /> 
        <button type='submit' name='submit' value='#2'>Sublink 2</button><br /> 
        <button type='submit' name='submit' value='#3'>Sublink 3</button><br /><br /> 
       </div><br /> 
      <button type='submit' name='submit' value='#5'>Tools Link 5</button><br /><br /> 
      <button type='submit' name='submit' value='#6'>Tools Link 6</button><br /><br /> 
     </div> 
    </div> 
<div class='ddb-dropdown'> 
    <div class='dropbtn'>Employees</div> 
</div> 
<div class='ddb-dropdown'> 
    <div class='dropbtn'>Administration</div> 
</div> 

Answer 1

。あなたはjavascriptが必要になります。 HTMLをリファクタリングすると、CSSでこれを行うことができます。

をaに置き換える必要はありませんが、ナビゲーションにリンクを使用する方が理にかなっています。href属性で正しいURLを使用してください。

我々はbrタグを削除し、隣接兄弟セレクタを使用して（+を）ホバー効果を達成している可能性がありますが、サブメニューの上にマウスを移動するとき、前の兄弟は、ホバーとサブメニューが消えてしまう失うことになります。

階層を作成することで、サブメニューがホバーを受信して​​いる間もアクティブに保つことができます。親もホバーです。ネストされたリストは、この階層をマークアップする一般的な方法です。

以下は、途中であなたを得るために切り捨てられたバージョンです。

/*Basic List Reset*/ 
 

 
ul.ddb-container, 
 
ul.ddb-container ul { 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 

 

 
/*Basic Link Reset*/ 
 

 
ul.ddb-container a { 
 
    text-decoration: none; 
 
} 
 

 
ul.ddb-container a:link, 
 
ul.ddb-container a:visited { 
 
    color: #000; 
 
} 
 

 

 
/*Dropdown Magic*/ 
 

 
.ddb-container ul { 
 
    display: none; 
 
} 
 

 
.ddb-container { 
 
    width: 100%; 
 
    overflow: visible; 
 
    background-color: #faebca; 
 
    font-family: Arial; 
 
    margin-top: 75px; 
 
    padding-left: 150px; 
 
    z-index: 1; 
 
    border-top: 3px black solid; 
 
    border-bottom: 3px black solid; 
 
    border-left: none; 
 
    border-right: none; 
 
} 
 

 
.ddb-container > li { 
 
    margin: 0; 
 
    padding: 0; 
 
    display:inline-block; 
 
    font-size: 14px; 
 
    border: none; 
 
    color: #000000; 
 
    text-align: center; 
 
    padding: 5px 10px; 
 
    text-decoration: none; 
 
    font-weight: bold; 
 
    background-color: transparent; 
 
    position:relative; 
 
    overflow:visible; 
 
} 
 

 
.ddb-container li:hover { 
 
    background-color: #dbcfa4; 
 
} 
 

 
.ddb-dropdown .dropdown-level1 { 
 
    position: absolute; 
 
    background-color: #faebca; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.2); 
 
    z-index: 1; 
 
    text-align:left; 
 
    top:26px; 
 
    left: 0; 
 
} 
 

 
.ddb-dropdown .dropdown-level1 .dropdown-level2 { 
 
    position: absolute; 
 
    background-color: #faebca; 
 
    min-width: 160px; 
 
    margin-left: 160px; 
 
    box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.2); 
 
    z-index: 2; 
 
} 
 

 
.ddb-dropdown ul > li { 
 
padding: 1em 0; 
 
} 
 

 
.ddb-container li:hover > ul { 
 
    display:block; 
 
}

<ul class='ddb-container'> 
 
    <li> 
 
    <a href="#">Home</a> 
 
    </li> 
 
    <li class='ddb-dropdown'> 
 
    <a href="#">Sales</a> 
 
    <ul class="dropdown-level1"> 
 
     <li><a href="#">Link 1</a></li> 
 
     <li><a href="#">Link 2 ></a> 
 
     <ul class='dropdown-level2'> 
 
      <li><a href="#">Link2 Sublink 1</a></li> 
 
      <li><a href="#">Link2 Sublink 2</a></li> 
 
      <li><a href="#">Link2 Sublink 3</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Link 3</a></li> 
 
     <li><a href="#">Link 4</a></li> 
 
     <li><a href="#">Link 5 ></a> 
 
     <ul class='dropdown-level2'> 
 
      <li><a href="#">Link5 Sublink 1</a></li> 
 
      <li><a href="#">Link5 Sublink 2</a></li> 
 
      <li><a href="#">Link5 Sublink 3</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Link 6</a></li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#">Purchasing</a></li> 
 
</ul>