• ベストアンサー
  • すぐに回答を!

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

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

お礼率 100% (6/6)

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>
------------------------------------------------
上記の各項目に追記しプルダウン式のリストにしたいです。
(カーソルを上にのせるとリストが開っく感じのものを希望します。)

恐れ入りますが、どなたかご教授いただきたくお願い致します。

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

  • 回答No.1
  • ベストアンサー

ベストアンサー率 61% (1046/1709)

他カテゴリのカテゴリマスター
リンク先に公開されているソースをそのまま利用してみれば良いのではないでしょうか。
色やサイズ変更は、それが成功した後で変更すれば良いと思います。

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

お礼率 100% (6/6)

ご説明誠に有難うございます。希望するものがほぼできました!
あとはマイナーチェンジしていきます。
投稿日時:2010/12/23 09:45
結果を報告する
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
AIエージェント「あい」

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

関連するQ&A

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

ピックアップ

ページ先頭へ