- 締切済み
CSSのみでプルダウンメニューを作りたい
こんにちは。 WEB制作は全くの素人です。 CSSのみで下記のようなプルダウンメニューを作りたいのですが、 どうにもならず困っています。 http://c-brains.jp/blog/wsg/08/06/05-155929.php 現在使用中のCSS -------------------------------------- #header-menu { height: 23px; background-color: #333333; margin: 0px; padding: 8px 0 0 15px; background: url(img/head_menu_back.gif); background-repeat: repeat-x; text-align: left; width: auto; } #header-menu ul { text-align: left; margin: 0px; padding: 0px } #header-menu li { color: #ffffff; display: inline; padding-left: 13px; padding-right: 8px; background: url(img/l_icon.gif) no-repeat; background-position: left center; } #header-menu a { color: #ffffff; text-decoration: none; } #header-menu a:hover { color: #cccccc; } ------------------------------- 現在使用中のhtml -------------------------------- <div id="header-menu"> <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> </div> ------------------------------------------------ 上記の各項目に追記しプルダウン式のリストにしたいです。 (カーソルを上にのせるとリストが開っく感じのものを希望します。) 恐れ入りますが、どなたかご教授いただきたくお願い致します。
- みんなの回答 (1)
- 専門家の回答
みんなの回答
- DrFell
- ベストアンサー率55% (305/551)
cssとhtmlをまったく理解できていないのにまねしたい場合は、自分の組み立てたものにあてはめるのではなく、まねしたい完成品を自分のしたい物に改良していきましょう。すこしずつ確かめながら、改良していきます。 まず、cssはそのまま使います。 先に、htmlを改良します。 まずは<ul id="pulldown-menu">以下をすべてコピペします。 次に、「シーブレイン」を「HOME」に変えます。「検索エンジン」は「会社情報」に…… 次に開かせたいリストを入れていきます。 <li><a href="http://c-brains.jp/">コーポレート</a></li> をhashishi77さんのリストにあわせます。 ………… 地味な作業ですががんばってくでださい。 ヒントは <ul><li></li></ul> が1つのリストタイプですが、その中にさらに、<ul><li></li></ul>が入り込んでいます。1つ目のリストが表に最初からでているリスト、入り込んでいるリストがマウスを乗せたときに出てくるリストとなっています。 次にcssで自分の分かるところから改良していきます。 バックグラウンドを青から灰色にとか高さを好みに変えて、ブラウザで試してみる。 うまくいけば、別名で保存して(保険)、次にできそうなところを変えてみる……と少しずつ理想にちかづけていけばいいと思います。 自分で分かるところが終わったら、プロパティでわからない場所を検索エンジンで調べてみてすこしづつ分かることを増やしていきます。それでもわからなかったら、今回のようにhtmlとcssをアップして教えてもらってください。 健闘を祈ります。
お礼
ご説明有難うございます。時間のあるときにcssを勉強しようと思います。本業ではなくてもマイナーチェンジとか自分でぱぱっとやりたいですもんね。