ホームページのメニューボタンにドロップダウンを使おうと思っています。
色々ネットから調べて自分で試したのですが、
オンマウスで画像を変えたりと、少し複雑な為、うまく表示できません。
文字数の関係上スタイルシートのコードだけしか貼れませんが、
よろしくお願いいたします。
/* ナビゲーション */
#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);
}
A 回答 (1件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
> ドロップダウンを使おうと思っています。
メニューにマウスカーソルを当てたら
サブメニューが出てくるというものをイメージしたらいいのかしら。
スタイルシートからするとそんな感じを受けたわ。
> オンマウスで画像を変えたりと、少し複雑な為
複雑な場合はシンプルに考えればいいのよ。
例えば、車というものを作ることを考えたらすごく大変だわ。
でも、車を構成する部品ひとつひとつを見ていくと
意外とシンプルな構造をしていたりするもの。
StepByStepでひとつひとつ作っていけば
いつかは車を組み立てることができるわ。
> うまく表示できません。
ここが重要なんだけど、どう「うまく」いかないのか教えて欲しいわ。
もちろん「目的」が達成できない、という意味でしょうけど。
私たちがお手伝いするためには「目的」と「現状」を把握できるのが
何よりの近道だわ。
とりあえず、与えられたスタイルシートではさっぱりわからないわ。
もっと具体的な情報が欲しいわよ。
フリーのサーバかなんかにそのメニューのHTMLをアップしてもらえると
結構助かるけど難しいかしら。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ワードにコピペ、画像が表示さ...
-
htmlの文字が縦書きになる
-
HTML属性での「""」 「''」違い
-
【ヒトの神秘】美男美女から何...
-
画像イメージの上下左右、欲し...
-
<table>の高さ固定。情報増加時...
-
どこをテーブルで作るべきか、d...
-
html の divとtable の役割
-
htmlのolやulなどlistにtitleや...
-
widthやheightの数値に単位(px...
-
<ul>~</ul>が二つ続くと間に改...
-
表示倍率を変えるとレイアウト...
-
div領域をウインドウサイズに合...
-
複数行にまたがる括弧を表示し...
-
リストを2つに分割して、それぞ...
-
pythonでのカーソル移動がずれる
-
ulタグやliタグの中でbrタグ...
-
C言語線形リストの問題です
-
超音波で洗脳。
-
CSSでborderの長さを指定、また...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ワードにコピペ、画像が表示さ...
-
Firefoxだとメニューバーが崩れ...
-
リストの画像をくっつけたい!
-
箇条書きで表される点がずれる...
-
CSSのposition指定で親要素の背...
-
htmlの文字が縦書きになる
-
【ヒトの神秘】美男美女から何...
-
htmlのolやulなどlistにtitleや...
-
<h1>、<h2>と<p><div>の行間を...
-
HTML属性での「""」 「''」違い
-
超音波で洗脳。
-
widthやheightの数値に単位(px...
-
ボタンをセル内一杯に表示させ...
-
div要素が重なってします
-
リストマーカーをボックス内に...
-
質問1.
-
<div id="container">の使いか...
-
リンクを知らせる手のマークが...
-
画像イメージの上下左右、欲し...
-
複数のボタンを等間隔に、かつ...
おすすめ情報