むねんー ふりグリ -ふうりんかざんがグリグリ描きます

ふりグリ -ふうりんかざんがグリグリ描きます Top > スポンサー広告 > むねんーふりグリ -ふうりんかざんがグリグリ描きます Top > 企画モノ > むねんー

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
--/--/--(--) スポンサー広告

むねんー


gooブログにはいつもイライラさせられてばっかりだなもう!!
という訳で今日も仕事の合間にCSSをチマチマいじってましたけど、
どうやら上部フレームを跨いでのプルダウンメニューを成立させる手段がなさそうなので
今回はプルダウンメニューを諦めることにします…。IE6だと動かないらしいしね。

でも頑張って作ったのに勿体無いのでいちおう両方のソースを公開しておきます。ご利用はご自由に。
タイトルバナーとフュージョンしてますんでちょっち注意。あと無駄な部分も多いかも (^^;

*CSS*
a:link {color:#333333;}
a:visited {color:#800080;}
a:active {color:#800080;}

body {background-color:#ffffff;color:#000000;margin:0px;}
body {background-image:url(images/side.png);background-position:left;background-repeat:repeat-y;}

@media screen {
.titl_p {display:none;}
}

/* === headder === */

p.jump {position:absolute;width:0px;height:0px;overflow:hidden;}

.head {width:100%;height: 4em;background-image:url(bg-image.png);background-repeat:no-repeat;
background-color:dodgerblue;margin:0px;padding:0px;}
td.sform {color:#000000;font-size:x-small;text-align:right;vertical-align:bottom;padding-right:10px;}
.head input {margin-left:5px;padding-left:0px;}

/* === pulldown-menu === */

ul.menu {
position: relative;
display: inline-block;
list-style: none;
font-size: normal;
font-weight: normal;
height: 25px;
width: 100%;
color: #000000;
background: dodgerblue;
margin: 0;
margin-top: 0;
padding: 0;
text-align: center;
}
ul.menu li {
position: relative;
display: block;
font-size: 100%;
line-height: 25px;
white-space: nowrap;
float: left;
color: #000000;
background: dodgerblue;
font-weight: bold;
border: none;
margin: 0;
padding: 0;
}
ul.menu a {
position: relative;
display: block;
text-decoration: none;
font-size: 100%;
line-height: 25px;
color: #FFF;
background: #dodgerblue;
margin: 0;
width: 10em;
}
ul.menu a:visited {
color: #FFF;
background: #dodgerblue;
}

ul.menu ul {
position: relative;
display: none;
list-style: none;
height: 2em;
color: #skyblue;
background: #dodgerblue;
margin: 0;
padding: 0;
}

ul.menu > li {
}
ul.menu > li li {
clear: left;
border-top: none;
width: 10em;
height: 2em;
font-weight: normal;
}
ul.menu > li li a {
background: #3399FF;
padding: 0;
}

ul.menu li:hover > a {
color: #skyblue;
background: #87cefa;
}
ul.menu li:hover > ul {
display: inline-block;
position: absolute;
top: 100%;
}
ul.menu li a:hover {
color: #dodgerblue;
background: #87cefa;
}
ul.menu li li:hover ul {
top: 0px;
left: 100%;
}


*html* ※preタグが機能しないので<を全角にしてあります。 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<HTML lang=ja xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head><title>ふりグリ-ふうりんかざんがグリグリ描きます</TITLE>
<meta content="text/html; charset=shift_jis" http-equiv=Content-Type>
<link rel="stylesheet" type="text/css" href="default.css" / media="all" />
<link rel="shortcut icon" href="favicon.ico"><LINK href="mail.html" rev=made>
</head>

<html>

<table class="head" summary="ヘッダー(レイアウト用)">
<tbody>
<tr>
<TD class=head1><a href="index.html"><img src="title.png" align="right" alt="ふりグリ" width="210" height="38" border="0"></a></td>
</tr>
</tbody></table>

<!-- ↓プルダウンメニュー↓ -->
<ul class="menu">
<li><a href="#">TOP</a>
<li><a href="#">ABOUT</a>
<li><a href="#">MUGEN</a>
<ul>
<li><a href="#">CHARACTER</a>
<ul>
<li><a href="#">SPY-DAMA</a></li>
<li><a href="#">FC Meirin</a></li>
<li><a href="#">Kikuchi Makoto</a></li>
<li><a href="#">FC Ryo</a></li>
</ul>
</li>
<li><a href="#">STAGE</a>
<ul>
<li><a href="#">Shibuya Toycamera</a></li>
</ul>
</li>
</ul>
</li>

<li><a href="#">MAKING</a>
<ul>
<li><a href="#">COMIC</a>
<ul>
<li><a href="#">PARODY</a></li>
<li><a href="#">ILLUST</a></li>
</ul>
</li>
<li><a href="#">GAME</a>
<ul>
<li><a href="#">PARODY</a></li>
<li><a href="#">ILLUST</a></li>
</ul>
</li>
<li><a href="#">SFX</a>
<ul>
<li><a href="#">PARODY</a></li>
<li><a href="#">ILLUST</a></li>
</ul>
</li>
<li><a href="#">OTHER</a>
<ul>
<li><a href="#">PARODY</a></li>
<li><a href="#">ILLUST</a></li>
</ul>
</li>
</ul>
</li>

<li><a href="#">LINK</a>
<ul>
<li><a href="#">FRIENDSHIP</a>
<ul>
<li><a href="#">GAME</a></li>
<li><a href="#">ILLUST</a></li>
</ul>
</li>
<li><a href="#">TWITTER</a></li>
<li><a href="#">PIXIV</a></li>
</li>
</li>

</ul>
<!-- ↑プルダウンメニュー↑ -->

</html>

あと、別にホムペ制作自体は諦めてませんよ。じっくり取り組んでいきますー

コメントの投稿














管理者にだけ表示を許可する


ふりグリって?

Twitter

最新記事

カテゴリ

過去記事

コメント

スポンサードリンク

検索フォーム

RSSリンクの表示

リンク

ブロとも申請フォーム

QRコード

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。