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

質問

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

John_Papa · ベストアンサー

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

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" />
で呼び出します。

お礼

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