21.HTML.CSS-ドロップダウンリスト - 完全無料OnLineパソコン教室

作成日: 2022/08/04 更新日: 2023/03/25 サイトの紹介と使い方

top
プログラム言語
HTMLとCSS
役立つHTMLの一覧
[ 21.HTML.CSS-ドロップダウンリスト ]

概要
お問合せ・御要望

概要

筆者は、このドロップダウンリストを使って、トップページのメインメニューを作成しています。
このドロップダウンリストはHTMLとCSSだけで作りました。

HTML部

<span class="my_dropdown_list">
  <ul>
    <li class="my_dropdown_list_parent">
      <a href="#">概要</a>
      <ul class="my_dropdown_list_child">
        <li><a href="https://aidendo-pilot.com/管理者">自己紹介</a></li>
        <li><a href="https://aidendo-pilot.com/目的-プログラムの学習と教育-二戸-一戸-軽米-九戸">目的</a></li>
        <li><a href="https://aidendo-pilot.com/お問合せページ-お気軽に連絡ください-i-will-answer/">お問合せ</a></li>
      </ul>
    </li>
    <li class="my_dropdown_list_parent">
      <a href="#">初心者</a>
      <ul class="my_dropdown_list_child">
        <li><a href="https://aidendo-pilot.com/cat_parent_パソコンの準備">パソコンの準備</a></li>
        <li><a href="https://aidendo-pilot.com/cat_parent_初めて">初めて</a></li>
        <li><a href="https://aidendo-pilot.com/cat_parent_初心者">初心者</a></li>
      </ul>
    </li>
    <li class="my_dropdown_list_parent">
      <a href="#">WEB</a>
      <ul class="my_dropdown_list_child">
        <li><a href="https://aidendo-pilot.com/cat_parent_wordpress/">wordpress</a></li>
        <li><a href="https://aidendo-pilot.com/cat_parent_サイト構築/">サイト構築</a></li>
        <li><a href="https://aidendo-pilot.com/cat_parent_ECサイト/">ECサイト</a></li>
      </ul>
    </li>
    <li class="my_dropdown_list_parent">
      <a href="#">実務</a>
      <ul class="my_dropdown_list_child">
        <li><a href="https://aidendo-pilot.com/cat_parent_人工知能">人工知能</a></li>
        <li><a href="https://aidendo-pilot.com/cat_parent_スマホアプリ/">スマホアプリ</a></li>
      </ul>
    </li>
    <li class="my_dropdown_list_parent">
      <a href="#">コンピュータの基礎</a>
      <ul class="my_dropdown_list_child">
        <li><a href="https://aidendo-pilot.com/cat_parent_コンピュータの基礎/">８０８６系</a></li>
      </ul>
    </li>
    <li class="my_dropdown_list_parent">
      <a href="#">数学</a>
      <ul class="my_dropdown_list_child">
        <li><a href="https://aidendo-pilot.com/cat_parent_図形と方程式">図形と方程式</a></li>
        <li><a href="https://aidendo-pilot.com/cat_parent_関数">関数</a></li>
        <li><a href="https://aidendo-pilot.com/cat_parent_最小二乗法">最小二乗法</a></li>
        <li><a href="https://aidendo-pilot.com/cat_parent_順列と組み合わせ">順列と組み合わせ</a></li>
        <li><a href="https://aidendo-pilot.com/cat_parent_巡回セールスマン問題">巡回セールスマン問題</a></li>
      </ul>
    </li>
    <li class="my_dropdown_list_parent">
      <a href="#">プラットフォーム</a>
      <ul class="my_dropdown_list_child">
        <li><a href="https://aidendo-pilot.com/cat_parent_さくらインターネット/">さくらインターネット</a></li>
        <li><a href="https://aidendo-pilot.com/cat_parent_Unix系OS/">Unix系OS</a></li>
      </ul>
    </li>
    <li class="my_dropdown_list_parent">
      <a href="#">プログラム言語</a>
      <ul class="my_dropdown_list_child">
        <li><a href="https://aidendo-pilot.com/プログラム言語について/">プログラム言語について</a></li>
        <li><a href="https://aidendo-pilot.com/cat_parent_html%e3%81%a8css/">HTMLとCSS</a></li>
        <li><a href="https://aidendo-pilot.com/cat_parent_php/">PHP</a></li>
        <li><a href="https://aidendo-pilot.com/cat_parent_オブジェクト指向/">オブジェクト指向</a></li>
        <li><a href="https://aidendo-pilot.com/cat_parent_python/">PYTHON</a></li>
      </ul>
    </li>
    <li class="my_dropdown_list_parent">
      <a href="#">その他</a>
      <ul class="my_dropdown_list_child">
        <li><a href="https://aidendo-pilot.com/cat_parent_エッセイ/">エッセイ</a></li>
        <li><a href="https://aidendo-pilot.com/cat_parent_アーカイブ/">アーカイブ</a></li>
        <li><a href="https://aidendo-pilot.com/ブログ記事の管理とtest/" target="_blank" rel="noopener">ブログ記事の管理とtest</a></li>
<!--        <li><a href="https://aidendo-pilot.com/cat_parent_satoru/">暁</a></li> -->
      </ul>
    </li>
  </ul>
</span>

CSS部

/* 0202 --- ドロップダウンリスト --->*/
.my-dropdown_list{
  width: auto;
}
.my-dropdown-list-parent{
  display:          inline-block;
  width:            15.0rem;
  height:           3.0rem;
  font-size:        1.5rem;
  font-weight:      normal;
  text-align:       center;
  background-color: #00FFFF;
  list-style:       square-button;
  border-style:     solid;
  border-radius:    1.0rem;
}
.my-dropdown-list-parent:hover{
  background-color: #FFFF00;
}
.my-dropdown-list-parent a{
  text-decoration: none;
}
.my-dropdown-list-child{
  display: none;
  width:   10.0rem;
}
.my-dropdown-list-parent:hover .my-dropdown-list-child{
  display:  block;
  position: absolute;
}
.my-dropdown-list-child li{
  display:  block;
  position: relative;
}
.my-dropdown-list-child li a{
  display:          block;
  position:         relative;
  list-style-type:  inside;
  margin:           -0.2rem 0 -0.4rem -3.0rem;
  width:            15.0rem;
  height:           2.5rem;
  font-size:        1.2rem;
  background-color: #00FF00;
  text-decoration:  none;
  list-style:       square-button;
  border-style:     solid;
  border-radius:    1.0rem;
}
.my-dropdown-list-child li a:hover{
  background-color:	#008000;
}
/*<--- 0202*/