• 締切
  • すぐに回答を!

CSSのみでプルダウンメニューを作りたい

  • 質問No.6399764
  • 閲覧数214
  • ありがとう数3
  • 気になる数0
  • 回答数1
  • コメント数0

お礼率 100% (6/6)

こんにちは。

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件)

  • 回答No.1

ベストアンサー率 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をアップして教えてもらってください。

健闘を祈ります。
お礼コメント
hashishi77

お礼率 100% (6/6)

ご説明有難うございます。時間のあるときにcssを勉強しようと思います。本業ではなくてもマイナーチェンジとか自分でぱぱっとやりたいですもんね。
投稿日時:2010/12/23 09:44
結果を報告する
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,600万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A

その他の関連するQ&Aをキーワードで探す

ピックアップ

ページ先頭へ