• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:CSSのみでプルダウンメニューを作りたい)

CSSのみでプルダウンメニューを作成する方法

このQ&Aのポイント
  • WEB制作初心者の方でもCSSのみで簡単にプルダウンメニューを作成する方法をご紹介します。カーソルを上にのせるとリストが開く動作を実現できます。
  • CSSを使用してプルダウンメニューを作成する方法として、簡単なコード例とともに解説します。初心者の方でも理解しやすいように説明しています。
  • プルダウンメニューの作成方法について詳しく解説します。CSSのみを使用して、カーソルを上にのせるとリストが開くプルダウンメニューを作成する手順をご紹介します。

質問者が選んだベストアンサー

  • ベストアンサー
  • John_Papa
  • ベストアンサー率61% (1186/1936)
回答No.1

リンク先に公開されているソースをそのまま利用してみれば良いのではないでしょうか。 色やサイズ変更は、それが成功した後で変更すれば良いと思います。 HTMLソースの方は、リンク先の書式どおり <div id="header-menu"> <ul id="pulldown-menu"> <li><a href="#">MENU</a> <ul> <li><a href="index.html">HOME</a></li> <li><a href="profile1.html">会社情報</a></li> <li><a href="service1.html">サービス</a></li> <li><a href="ethic1.html">企業理念</a></li> <li><a href="contact1.html">お問合わせ</a></li> <li><a href="job1.html">採用情報</a></li> <li><a href="indexeng.html">English</a></li> </ul> </li> </ul> </div> CSSの方は、ulタグのリストマークとパディング除去を加えて ul#pulldown-menu { list-style-type:none; padding:0; } ul#pulldown-menu a { color: #FFFFFF; text-decoration: none; } ul#pulldown-menu a:link, ul#pulldown-menu a:visited { background-color: #3366FF; } ul#pulldown-menu a:hover, ul#pulldown-menu a:active { background-color: #FF9933; } ul#pulldown-menu li { float: left; position: relative; margin: 0 0.5em !important; width: 9em; height: 2em; font-weight: bold !important; line-height: 2em !important; } ul#pulldown-menu li a { display: block; width: 9em; height: 2em; text-align: center; } ul#pulldown-menu li ul { list-style-type:none; display: none; padding:0; } ul#pulldown-menu li:hover ul { display: block; position: absolute; z-index: 100; } ul#pulldown-menu li ul li { float: none; margin: 0 !important; font-weight: normal !important; margine-left:0; } これは、HTMLに記述すると機能しませんので、必ずCSSファイルにして <link rel="stylesheet" href="○○.css" type="text/css" /> で呼び出します。

hashishi77
質問者

お礼

ご説明誠に有難うございます。希望するものがほぼできました! あとはマイナーチェンジしていきます。

すると、全ての回答が全文表示されます。

専門家に質問してみよう