ボタンをホバーに表示するにはどうすればいいですか？

Question

ボタンホバーにリストを表示しようとしていますが、ボタン領域の近くにマウスを置くたびにテキストが表示されます。

.header_nav { 
 
    width: 800px; 
 
    height: 400px; 
 
} 
 
.header_nav ul { 
 
    list-style: none; 
 
} 
 
.header_nav ul ul { 
 
    display: none; 
 
} 
 
.header_nav ul ul #nav_button:hover>ul { 
 
    display: block; 
 
} 
 
.header_nav ul ul li >ul { 
 
    display: none; 
 
} 
 
.header_nav ul li:hover >ul { 
 
    display: block; 
 
}

<nav class="header_nav"> 
 
    <ul> 
 
    <li> 
 
     <input type="button" value="Button 1" name="nav_button" id="nav_button"> 
 
     <ul> 
 
     <li>Locations</li> 
 
     <li> 
 
      Mumbai 
 
      <ul> 
 
      <li>Txt 1</li> 
 
      <li>Txt 2s</li> 
 
      <li>Txt 3</li> 
 
      </ul> 
 
     </li> 
 
     <li>Delhi</li> 
 
     <li>Banglore</li> 
 
     <li>Nagpur</li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</nav>

JS FIDDLE：https://jsfiddle.net/fhv7drst/

Answer 1

あなたli要素はブロック要素だったからです。

は私がインライン化することを変更し、それはあなたの要件に応じて作業を開始し

HTML：

<li class="parentElement"> 
        <input type="button" value="Button 1" name="nav_button" id="nav_button"> 

CSS：ここ

li.parentElement{ 
    display: inline; 
    } 

が作業フィドル

https://jsfiddle.net/m73p8pea/

にあります

Answer 2

あなたのli要素がブロック要素であるため、利用可能な幅全体に自動的に広がるようにするためです。あなたの場合、これは一番上の要素によって提供される800ピクセルです。

すぐに利用できる2つのソリューションがあります.1つはリスト要素をインラインブロック要素（または単にインライン要素ですが、ここではインラインブロックが望ましいと思いますが、ブロックはどのように開始されたかです）を防ぐことです全体の幅spaning：

.header_nav ul li { 
    display: inline-block; 
} 

を直接、ボタンの上にマウスを移動するとき、それは親のリスト項目の上にマウスを移動するときにも、番号なしリストの表示の変更をしませ引き起こす可能性：

.header_nav #nav_button:hover + ul { 
    display: block; 
} 

これがそうですより良い解決策、それはディスプレイを台無しにしないあなたが必要とするものよりも多くのタイプ、そしてあなたが何を起こしたいのかをより正確に記述することができます。ボタンが押されたときにリストを表示します。

Answer 3

質問が正しく表示されている場合は、ボタンを重ねるたびにリストを表示したいと考えています。あなたはそれを行うためにjqueryを使うべきです。すべての のような最初にこのURLからファイルにjqueryのを含める

<script src="https://code.jquery.com/jquery-3.1.0.min.js"> 

その

$('#BUTTON_ID').mouseover(function({ 
$('#LIST_ID').show(); 
})); 

のようなあなたのボタンはどれも表示しないようにあなたのリストを作ることを忘れないでくださいターゲット。 ちょうどそれが動作するかどうかを知るために興奮した

Answer 4

確かに@ラフルアローラで指摘されているように、それはブロック要素としてliです。

しかし、何らかの理由でそれでもブロック要素として保持したい場合は、inline-blockとしておくことができます。 marginを削除することをお勧めします（inspect要素で指定した例を参照してください。ulの書き込みになります）。paddingがデフォルトでブラウザによって割り当てられます。

.header_nav 
 
    { 
 
     width:800px; 
 
     height:400px; 
 
    } 
 
    .header_nav ul 
 
    { 
 
     list-style:none; 
 

 
     //displaying ul & all its child as inline block until overriden by other rules 
 
     display:inline-block; 
 
     
 
    //removing default margin and padding 
 
     margin:0; 
 
     padding:0; 
 
    } 
 
    .header_nav ul ul 
 
    { 
 
     display:none; 
 
    } 
 
    .header_nav ul ul #nav_button:hover>ul 
 
    { 
 
    display:block; 
 
    } 
 
    .header_nav ul ul li >ul 
 
    { 
 
     display:none; 
 
    } 
 
    .header_nav ul li:hover >ul 
 
    { 
 
    display:block; 
 
    }

<nav class="header_nav"> 
 
       <ul> 
 
        <li> 
 
        <input type="button" value="Button 1" name="nav_button" id="nav_button"> 
 
         <ul> 
 
          <li>Locations</li> 
 
          <li> 
 
          Mumbai 
 
          <ul> 
 
           <li>Txt 1</li> 
 
           <li>Txt 2s</li> 
 
           <li>Txt 3</li> 
 
          </ul> 
 
          </li> 
 
           
 
          <li>Delhi</li> 
 
          <li>Banglore</li> 
 
          <li>Nagpur</li> 
 
         </ul> 
 
          
 
        </li> 
 
        </ul> 
 
      </nav>