- 締切済み
ブログのメニューバーをヘッダー画像の下に
seesaaブログでメニューバーをTOP画像の下に表示したいのですがわけがわからないんです。 どなたか教えて下さらないでしょうか？ ちなみに設置はなんとかできました。 http://error911.seesaa.net/ CSSは ul#menu { margin:0; padding:0; list-style-type:none; width:auto; position:relative; display:block; height:36px; font-size:12px; font-weight:bold; text-transform:lowercase; background:transparent url("http://error911.up.seesaa.net/image/bg.jpg?20090326204938") repeat-x top left; font-family:"Trebuchet MS",Helvetica,Arial,Verdana,sans-serif; border-bottom:1px solid #000000; border-top:1px solid #000000; } ul#menu li { display:block; float:left; margin:0; pading:0; } ul#menu li a { display:block; float:left; color:#999999; text-decoration:none; font-weight:bold; padding:12px 20px 0 20px; height:24px; } ul#menu li a:hover { color:#FFFFFF; background:transparent url("images/over.jpg") no-repeat top right; } です。お願いします。
- maoreoreo
- お礼率33% (1/3)
- ブログ
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- mananyann
- ベストアンサー率46% (69/148)
ソース、拝見しました。 単純にタイトル画像よりも下にメニューバーのタグを持ってくのではダメですか？ もしくは、メニュータグをテーブルで作成して、 タイトル画像の下に設置。 <head>と<body>の間にメニューバーがあるので <body>の一番上に配置してみて下さい。 このソースやＣＳＳは全てご自分で作られたものですか？
関連するQ&A
- Firefoxだとメニューバーが崩れてしまいます。
movable typeでなんとかここまできました。 http://www.mamyu.jp これをFirefoxでみますと、メニューの部分だけ大幅に崩れてしまいます。 スタイルシートの問題だと思うのですが、 その部分は、 #nav { margin-left: 0; padding-left: 0; list-style-type: none; border-top: 0px solid #999999; border-right: 1px solid #999999; border-bottom: 1pxsolid #999999; background-image: url(images/beansmenu01.gif); background-repeat: repeat-x; background-position: bottom; height:25px; width: 849px; float: left; } #nav a { font-size: 12px; font-weight: bold; color: #0000CC; text-decoration: none; background-repeat: no-repeat; background-position: left top; display: block; height: 25px; width: 121px; padding-top: 6px; padding-right: 0px; padding-bottom: 0px; padding-left: 20px; } #nav a:hover { color:#cc3300; background-repeat: no-repeat; } #nav li { float: left; width: 121; } としており、 テンプレート部分は、 <ul id="nav"> <li><a href="http://www.mamyu.jp/">ＴＯＰ</a></li> <li><a href="http://www.mamyu.jp/000">ブログ</a></li> <li><a href="http://www.mamyu.jp/001">政治信条</a></li> <li><a href="http://www.mamyu.jp/002">プロフィール</a></li> <li><a href="http://www.mamyu.jp/003">政治家養成塾</a></li> <li><a href="http://www.mamyu.jp/007">競馬場問題</a></li> <li><a href="http://www.j-beans.jp">ホームページ</a></li> </ul> としております。 これでどうしてFirefoxだと大きく崩れてしまうのか。崩れない方法はないものかわからないままです。それぞれのメニューバーの左側にでる○印がなんとも邪魔なのです。。。。
- ベストアンサー
- オープンソース
- メニューバーが消えて困っています。
メニューバーの下に画像を挿入すると、メニューバーが消えてしまいます。 また文章を挿入しようとすると、メニューバーの下から文章が続かず、中盤からはじまってしまいます。 すいませんが原因がわかりません。下記にHTMLコード・CSSコードを記載したので、すいませんがわかる方がおりましたら、教えてください。 HTML；<!DOCTYPE html> <html> <link rel="stylesheet" type="text/css" href="test.css"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>What is HTML?</title> </head> <body> <div id="header-top"> <div id="menu1"> <ul id="down1"> <li><a href="#" class="pic"><img src="house.png" width="20" height="20"></a></li> <li><a href="#" class="pic"><img src="house.png" width="20" height="20"></a></li> <li><a href="#" class="pic"><img src="house.png" width="20" height="20"></a></li> </ul> </div> </div> <ul id="dropmenu"> <li><a href="#">Home</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">About US</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">Buy</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">Q&A</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">Contact</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> </ul> <p class="test">Hello</p> ← 問題の箇所、中盤から始まる。 CSS： /*As for header */ #header-top{ width: 100%; position: fixed; top: 0; left: 0; background: linear-gradient(90deg, #05a 10%, #21b3b2 90%); height: 60px; } } #header-in{ width: 997px; margin: 0 auto; } /*As for header top of website */ #menu1 ul{ margin-left: 1000px; margin-top: 10px; padding :0; list-style: none; } #menu1 li{ padding: 0; margin: 0; float: left; } #menu1 li a{ background: url(最初の画像のアドレス) no-repeat left center; padding: 2px 0px 3px 18px; color: #555; width: 100px; margin: 1px 0px; text-decoration: none; border-bottom: 1px dotted #666666; font-size: 18px; } #menu1 li a:hover{ background: url(入れ替わる画像のアドレス) no-repeat left center; } /* drop menuw */ #dropmenu{ list-style-type: none; width: 800px; height: 10px; margin: 30px auto 300px; padding: 0; background: #8a9b0f; border-bottom: 5px solid #535d09; border-radius: 3px 3px 0 0; } #dropmenu li{ position: relative; width: 20%; float: left; margin: 0; padding: 0; text-align: center; } #dropmenu li a{ display: block; margin: 0; padding: 15px 0 11px; color: #fff; font-size: 14px; font-weight: bold; line-height: 1; text-decoration: none; } #dropmenu li ul{ list-style: none; position: absolute; top: 100%; left: 0; margin: 0; padding: 0; border-radius: 0 0 3px 3px; } #dropmenu li:last-child ul{ left: -100%; width: 100% } #dropmenu li ul li{ overflow: hidden; width: 200%; height: 0; color: #ff33ff; -moz-transition: .2s; -webkit-transition: .2s; -o-transition: .2s; -ms-transition: .2s; transition: .2s; } #dropmenu li ul li a{ padding: 13px 15px; background: #ff33ff; text-align: left; font-size: 12px; font-weight: normal; } #dropmenu li:hover > a{ background: none; color: #ff33ff; } #dropmenu > li:hover > a{ border-radius: 3px 3px 0 0; } #dropmenu li:hover ul li{ overflow: visible; height: 38px; border-top: 1px solid #7c8c0e; border-bottom: 1px solid #616d0b; } #dropmenu li:hover ul li:first-child{ border-top: 0; } #dropmenu li:hover ul li:last-child{ border-bottom: 0; } #dropmenu li:hover ul li:last-child a{ border-radius: 0 0 3px 3px; } #top-pic{ } #test{ float: right; }
- ベストアンサー
- CSS
- 画像を使ったドロップダウンメニュー
ホームページのメニューボタンにドロップダウンを使おうと思っています。 色々ネットから調べて自分で試したのですが、 オンマウスで画像を変えたりと、少し複雑な為、うまく表示できません。 文字数の関係上スタイルシートのコードだけしか貼れませんが、 よろしくお願いいたします。 /* ナビゲーション */ #navi_continer { position: relative; z-index:100; width: 400px; height:110px; } #navi { position: absolute; width: 100px; background-image: url(./img/menu/03a.jpg); height: 110px; } #navi ul { margin: 0; padding: 0; list-style: none; } #navi li { color: #fffff; float: left; width: 100px; margin: 0; } #navi li a { font-size: 14px; color: #ffffff; display: block; width: 100%; padding: 3px 0; text-align: center; font-weight: bold; text-decoration: none; background-image: none; } #navi li a:hover { color: #ffffff; background-image: url(./img/menu/03b.jpg); height: 110px; width: 100px; } /* サブメニュー */ #navi ul.sub { background: #eeeeee; } #navi ul.sub li { float: none; } #navi ul.sub li a { color: #666666; background: none; font-size: 12px; font-weight: normal; padding: 3px 0; border-top:1px solid #000099; } #navi ul.sub li a:hover { color: #ffffff; background-color: #ff9900; } #navi ul li.navi_menu ul { display: none; } #navi ul li.navi_menu_on ul { display: block; } #navi li.navi_menu{ border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; } #navi li.navi_menu_on{ border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; }button { background-image: url(%E3%83%94%E3%82%AF%E3%83%81%E3%83%A3%201.jpg); }
- 締切済み
- Java
- html,cssプルダウンメニューについて教えてください。
html,cssプルダウンメニューについて教えてください。 現在html,cssのみでプルダウンメニューを作成しているのです、解決のできない問題点が あり困っています。どなたか知識のある方、教えていただけると嬉しいです。 [問題点] オンマウスでプルダウンメニュー表示時、その表示分だけ、親要素の<div>の 高さが広がってしまい、それに伴いそれ以下のページ内要素全て下にずれてきます。 (分かりにく表現で申し訳ありません） 出来れば、プルダウンメニューが表示されても、親要素の高さは変わらず、以下のタグ要素の 上に重なって表示させたいと思っています。 対処法がお分かりになる方、教えて頂けると幸いです。 [html] <div id="main_menu"> <div id="navi"> <ul> <li class="navi_menu" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#"><IMG src="img/main_menu04.gif"></a> <ul class="sub"> <li><a href="#">サブメニュー 1</a></li> <li><a href="#">サブメニュー 2</a></li> </ul> </li> <li class="navi_menu1" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#"><IMG src="img/main_menu05.gif"></a> <ul class="sub"> <li class="navi_menu1"><a href="#">サブメニュー 1</a></li> <li class="navi_menu1"><a href="#">サブメニュー 2</a></li> </ul> </li> </ul> </div> </div> [css] #navi { width:993; margin:0 auto; border:0px solid red; padding:0px 39px 0px 0px; } #navi ul { margin: 0; padding: 0; list-style: none; } #navi li { float: left; margin: 0; width:120px; } #navi li.navi_menu1{ float: left; margin: 0; width:140px; } #navi li a { font-size: 14px; color: #ffffff; display: block; width: 100%; padding: 0px 0; text-align: center; font-weight: bold; text-decoration: none; background-color: #3399ff; } #navi li a:hover { color: #ffffff; background-color: #3366cc; } #navi ul.sub { background: #eeeeee; } #navi ul.sub li { padding:5px 0px 0px 0px; float: none; height:25; } #navi ul.sub li.navi_menu1 { float: none; height:25; width:180; } #navi ul.sub li a { color: #666666; background: none; font-size: 12px; font-weight: normal; padding:0px 0; border-top:0px solid #000099; } #navi ul.sub li a:hover { color: #ffffff; background-color: #ff9900; } #navi ul li.navi_menu ul { display: none; } #navi ul li.navi_menu_on ul { display: block; } #navi li.navi_menu{ border:0px solid #000099; } #navi li.navi_menu_on{ border:0px solid #000099;}
- ベストアンサー
- その他([技術者向] コンピューター)
- スタイルシートでのメニュー作成で
今回初めてテーブルを使わずスタイルシートでナビゲーションを作成しているのですが 下記の方法ではメニュー内のテキストが左に寄ってしまいます。 出来ればすっかり左寄せではなく、左に10px程空間を入れたいのですがどのようにすれば良いでしょうか。 CSS内の#menuに「margin-left:10px」としても反映されません。 ■■ CSS ■■ #menu {margin: 12px; padding: 0px; width: 180px; border-top: 1px solid #080240; border-right: 1px solid #080240; border-left: 1px solid #080240; font-size: 100%; } #menu ul {margin: 0px; padding: 0px; list-style: none; } #menu li {margin: 0px; padding: 0px; } ■■ HTML ■■ <ul> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> </ul> アドバイスいただけると助かります。 どうぞ宜しくお願い致します。
- ベストアンサー
- HTML
- display:inlineで横並びにしたメニュー
のa:とa:hoverをbackground-imgでロールオーバーさせたいんですが、画像を大きく調整できません。line-heightとheightをいじってみましたが画像そのものの高さは変わりません。サイドメニューを作った時はDL,DT,DDでdisplay:blockでうまく出来ました。下記に現状のHTMLとCSSを記述しますのでよろしくおねがいします。 html側 <div id="banner_menu"> <ul> <li><a href="#">あいうえお</a></li> <li><a href="#">かきくけこ</a></li> <li><a href="#">さしすせそ</a></li> <li><a href="#">たちつてと</a></li> <li><a href="#">なにぬねの</a></li> <li><a href="#">はひふへほ</a></li> </ul> </div> CSS側 #banner_menu { clear: both; margin: 0px; padding: 7px 0 5px 15px; border-top: solid 1px #999; border-bottom: solid 1px #999; width: auto; margin-left: auto; margin-right: auto; background-color: #ffffff; } #banner_menu ul { text-align: left; padding-bottom: 1px; margin: 0px; } #banner_menu li { color: #ffffff; display: inline; padding-left: 7px; padding-right: 5px; border-left: solid 1px #999; width: 120px; } #banner_menu a { color: #4d4d4d; font-weight: normal; background-color: none; text-decoration: none; font-size: 12px; background: url(var_gry120x48.gif) no-repeat center center; line-height:20px; height: 20px; } #banner_menu a:hover { color: indianred; font-weight: normal; background: url(var_gry120x48_2.gif) no-repeat centert bottom; }
- ベストアンサー
- ブログ
- <li>タグでメニューを作った場合
横並びでサブメニューがあるメニューを以下の様に作成しました HTMLは <ul> <li><a href="">トップページ</a></li> <li><a href="">メニュー2</a> <ul class="sub-menu"> <li><a href="">メニュー2のサブメニュー</a></li> <li><a href="">メニュー2の長いんだよサブメニュー</a></li> <li><a href="">メニュー2のサブメニュー</a></li> </ul> </li> <li><a href="">メニュー3</a></li> <li><a href="">メニュー4</a></li> <li><a href="">メニュー5</a></li> <li><a href="">メニュー6</a></li> <li><a href="">メニュー7</a></li> </ul> CSSは ul{ float:right; font-size:95%; padding-bottom:20px; } ul ul{padding-bottom:0;width:auto;} ul li{ display:inline-block; vertical-align:text-top; text-align:left; padding:5px 0; margin-left:15px; background:url(../images/arrow.png) no-repeat 0 9px; } ul li a{ display:block; padding:0 0 0 12px; overflow:hidden; } ul li li{ display:block; padding:0; margin-left:5px; background:url(../images/arrow2.png) no-repeat 0 6px; } これですと添付画像の左のようになってしまいます。 サブメニューの長さに関係なく、右のようにメニューを詰めることは可能ですか
- ベストアンサー
- CSS
- ドロップダウンメニュー
ドロップダウンメニュについてお伺いします。下記、サンプルがWebにあったのですが メニュー1、メニュー2、メニュー3をマウスオーバーした時に選択肢が表示されます。 しかしながら横に最大3個未満の場合、余分なスペースができてしまいます。 この余分なスペースを出さないで存在する選択肢の分だけ表示表示させるようなことは できるのでしょうか。 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> #header-wrapper { height: 60px; } #header { height: 60px; } #site-title { padding: 10px 0 0 0; } h5 { margin-top: 20px; } #main { clear: left; margin: 20px auto; padding: 5px 20px; width: 900px; } h3 { font-size: 20px; } #sample ul { list-style:none; } #menu li { position: relative; float: left; margin: 0; padding: 5px; width: 200px; height: 20px; border: solid 1px #ccc; font-weight: bold; } #menu li:hover { color: #fff; background: #333; } #menu li ul { display: none; position: absolute; top: 30px; left: -1px; padding: 5px; width: 600px; background: #eee; border: solid 1px #ccc; } #menu li ul li { float:left; margin: 0; padding: 0; width: 200px; border: none; } #menu li ul li a { display: inline-block; width: 200px; height: 20px; } #menu li ul li a:hover { background: #999; color: #fff; } </style> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.7");</script> <script type="text/javascript"> $(function() { $("#menu li").hover(function() { $(this).children('ul').show(); //$('#menu li ul').css('width', '200px'); }, function() { $(this).children('ul').hide(); }); }); </script> </head> <body class="archive date col-2-right fixed loggedin browser-chrome"> <div id="page"> <div id="main"> <div id="sample"> <ul id="menu"> <li id="menu1">メニュー1 <ul> <li><a href="#">サブメニュー1-1</a></li> </ul> </li> <li id="menu2">メニュー2 <ul> <li><a href="#">サブメニュー2-1</a></li> <li><a href="#">サブメニュー2-2</a></li> </ul> </li> <li id="menu3">メニュー3 <ul> <li><a href="#">サブメニュー3-1</a></li> <li><a href="#">サブメニュー3-2</a></li> <li><a href="#">サブメニュー3-3</a></li> <li><a href="#">サブメニュー3-4</a></li> </ul> </li> </ul> </div> </div><!--main--> </div><!--page--> </body> </html>
- 締切済み
- CSS
- ドロップダウンの残像
どなたか教えていただけないでしょうか。 ドロップダウンメニューを設置した所、一部のメニューで残像が残ります。 【css】 ul.menu { width: 960px; position: relative; list-style:none; float:left; margin:0; padding:0; text-align: left; } ul.menu * { margin:0; padding:0; } ul.menu a { display:block; color:#fff; text-decoration:none; font-weight: bold; } ul.menu li.a { position: relative; float:left; } ul.menu ul { position:absolute; top:50px; left: 4px; background: url(../images/navi/bg.png) repeat; display:none; opacity:0; list-style:none; border: 1px solid #ccc; } ul.menu ul li { position:relative; border-top:none; width:150px; margin:0; border-top: 1px solid #bad7dd; } ul.menu ul li a { display:block; padding:3px 7px 5px; background: url(../images/navi/bg.png) repeat; } ul.menu ul li a:hover { background-color:#c5c5c5; } ul.menu ul li:first-child a:after{ content: ''; position: absolute; left: 30px; top: -8px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #444; } ul.menu ul ul { left:160px; top:-1px; } ul.menu .menulink { width:160px; } ul.menu .topline { border-top:1px solid #aaa; } 【html】 <ul class="menu" id="menu"> <li class="a"><a href="#" class="menulink"><img src="image" class="btn" width="160" height="50" /></a></li> <li class="a"><a href="#" class="menulink"><img src="image" class="btn" width="160" height="50" /></a> <ul> <li><a href="#">test</a></li> </ul> </li> <li class="a"><a href="#" class="menulink"><img src="image" class="btn" width="160" height="50" /></a> <ul> <li><a href="#">test</a></li> </ul> </li> <li class="a"><a href="#" class="menulink"><img src="image" class="btn" width="160" height="50" /></a> <ul> <li><a href="#">test</a></li> </ul> </li> <li class="a"><a href="#" class="menulink"><img src="image" class="btn" width="160" height="50" /></a> <ul> <li><a href="#">test</a></li> </ul> </li> <li class="a"><a href="#" class="menulink"><img src="image" class="btn" width="160" height="50" /></a></li> </ul> png画像を使って背景透過をしています。 htmlとかcssは勉強中です…宜しくお願いします。
- ベストアンサー
- HTML
- 階層型ドロップダウンメニューのサブ項目CSSの背景色の指定について
メニューバーにサブ項目を作り、hover,active,時のbackground-colorを指定したいのですが、うまくいきません。 ◆http://haradesignroom.jp/0909menu_bar/0909renewal/kaisoumenu/index.html Web制作関連の雑誌に出ていたフォーマットを元に上記のメニューバーを作りました。 第一階層には背景画像を配し、hover,activeのときに別画像を設定しました。 ６項目のうち、サブメニューがある（商品情報など）にマウスをおくと、グレーの背景色のサブメニューが表示されるまでは良いのですが、サブメニュー各項目にマウスを置くと、第一階層のhoverの画像が表示されてしまいます。またサブメニューの下欄の項目が表示されません。 サブメニューがhover、active状態のときに、さらに別色（＃FFCCCC）で指定したいのですが、CSSの書き方がわかりません。 どなたかご教示お願いいたします。 【CSS】 * { margin: 0; padding: 0; } body { font-family: Helvetica, Sans-Serif; font-size: 12px; padding-bottom: 15px; } #page-wrap { width: 800px; margin-top: 25px; margin-right: auto; margin-bottom: 25px; margin-left: auto; } a { text-decoration: none; } ul { list-style: none; background-repeat: repeat-x; } p { margin: 15px 0; } /* LEVEL ONE*/ ul.dropdown { position: relative; border-top-width: medium; border-right-width: medium; border-bottom-width: medium; border-left-width: medium; border-top-style: none; border-right-style: none; border-left-style: none; } ul.dropdown li { font-weight: bold; float: left; background-image: url(../images/menu_bk.jpg); height: 40px; border-right-width: 1px; border-right-style: solid; border-right-color: #CCCC99; border-left-width: 1px; border-left-style: solid; border-left-color: #FFFFFF; } ul.dropdown a:hover { color: #993333; background-image: url(../images/menu_on_bk.jpg); } ul.dropdown a:active { color: #993333; background-image: url(../images/menu_on_bk.jpg); } ul.dropdown li a { display: block; color: #666666; border-right-style: none; border-left-style: none; padding-top: 20px; padding-right: 30px; padding-bottom: 4px; padding-left: 30px; border-top-style: none; border-bottom-style: none; } ul.dropdown li:last-child a { border-right: none; } /* Doesn't work in IE */ ul.dropdown li:first-child a { border-left: none; } /* Doesn't work in IE */ ul.dropdown li.hover, ul.dropdown li:hover { color: #666666; position: relative; background-color: #D2D2D2; } ul.dropdown li.hover a { color: #993333; } /* LEVEL TWO */ ul.dropdown ul { width: 220px; visibility: hidden; position: absolute; top: 100%; left: 0; } ul.dropdown ul li { font-weight: normal; color: #FFFFFF; border-bottom: 1px solid #ccc; float: none; background-repeat: repeat-x; background-image: url(../images/transparent02.jpg); float:none; } /* IE 6 & 7 Needs Inline Block */ ul.dropdown ul li a { border-right: none; width: 100%; display: inline-block; color: #FFFFFF; } /* LEVEL THREE*/ ul.dropdown ul ul { left: 100%; top: 0; } ul.dropdown li:hover > ul { visibility: visible; color: #FFFFFF; } ◆ 長々申し訳ありませんが、どなたかよろしく お願いいたします。◆
- 締切済み
- インターネットビジネス
お礼
いろいろ弄っていたらできました。 一番最初の回答うれしかったです。
補足
回答ありがとうございます！！ このソースとCSSは海外のサイトのサンプルを弄ったものです。 <body>の上に設置したのですがまだ動きません＞＜ <body> <ul id="menu"> <li><a href="http://error911.seesaa.net/" target="_self" title="Top">Top</a></li> <li><a href="http://error911.seesaa.net/category/6292296-1.html" target="_self" title="Tools">Tools</a></li> <li><a href="http://error911.seesaa.net/category/6291579-1.html" target="_self" title="Yotube">Yotube</a></li> <li><a href="http://error911.seesaa.net/category/6295563-1.html" target="_self" title="Music">Music</a></li> <li><a href="http://error911.seesaa.net/category/6291564-1.html" target="_self" title="Diary">Diary</a></li> </ul> CSSはそのままです。