hoverを使ってメニューを作りたい

![
写真のaboutにカーソルを合わせたの横に
「ゼルダの伝説について」という文を出したいです。

aboutを親要素としてrelativeを使ってaboutの横につけていたのですが
↓写真のようにaboutと文の距離が離れてしまうので他の方法を探しています

html

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <link rel="stylesheet" href="A.css" type="text/css">
</head>
<body style="cursor: pointer">
<h1 style="position: absolute; left: 60px; top: -90px"/>Z<span style="font-size:70%">ELDA</span></h1>
<span style="position: absolute; left: 160px; top: 50px;color:goldenrod;font-size:210%;font-family:times;">The Lezend Of</span>
<span style="position: absolute; left: 90px; top: 240px"><p class="menu">About</p></span>ゼルダの伝説について
</body>

css

h1{
  color: goldenrod;
  font-size:1100%;
  font-family: "ＭＳ 明朝",serif;
}
body{
  background-color: #000000
}
p.menu{
  color: #FF0000;
  font-size:260%;
  font-family:times;
  display:inline-block;
  width:0%;
  background-color: white;
  transition: all 300ms 0s ease;
}
p.menu:hover {
  display:inline-block;
  width:100%;
  color: black;
}
p.menuber{
  color:white;
  font-size:100%;
  font-family:times;
  position:relative;
  left:100%;
}

退会済みユーザー

2018/03/25 16:18

ソースコードを出してくれないと回答者はゼロからコードを書かなければなりません。

Akiraman

2018/03/25 16:23

すみません。付け忘れていました。

kei344

2018/03/25 16:26

「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを、具体的に記述されたほうが回答を得られやすいと思います。

kszk311

2018/03/25 16:39 編集

質問の内容と関係ないですが、構造が謎なのでつっこませていただきます。 1.なぜbodyの直下に「li」があるのか。 2.「font」タグは非推奨です（前の質問でも話されていたっぽいので、スルーでも良いです）。 3.「<span 〜〜〜 />」はおかしいので閉じてください。 →（「<span style="position: absolute; left: 90px; top: 240px"></span>」と言うことをしたいのかな…？）

Akiraman

2018/03/25 16:58

kazuさん　ご指摘ありがとうございます。修正しておきました。質問内容のコードのものも変えておきました。確認していただくとありがたいです。

Akiraman

2018/03/25 17:02

keiさん　変更してみましたが、良くなったでしょうか。

x_x

2018/03/26 01:14

「離れる」というのが再現できないので、コードに「ゼルダの伝説について」を追加してもらってもいいでしょうか？

kszk311

2018/03/26 02:04 編集

1点見逃していました、h1も<h1 /></h1>になっているので<h1></h1>としておいてください。それと、前の3番のspanの件は、中にpタグを入れるのならタグはdivになりますね。

yoshinavi

2018/03/26 04:49

CSS部分の記述の仕方についてですが、HTMLのタグ内で「style="○○○"」の部分は、id名やclass名を振ってCSSの外部ファイルに移動させる方が、今後の管理（修正等）がしやすくなると思いますし、「SEO」を意識する場合にも「HTML5」への対応が、しやすくなると思います。

Akiraman

2018/03/26 10:57

ｘ＿ｘさん　追加しました。これでよいでしょうか？

Akiraman

2018/03/26 10:58

kszkさん　ご指摘ありがとうございます。修正しておきました。

Akiraman

2018/03/26 10:59

yoshinaviさん　わかりました。そうしてみます。

yoshinavi

2018/03/27 01:39

デザインをホームページに反映させる方法のひとつに、パーツごとに箱（ブロック）に分ける考えがあります。例えば「ZELDA」の部分と「About」の部分にわけます。タイトル部分とメニュー部分との考え方です。恐らくですが、今の方法のままでいくと、CSSで意図するデザインが出来なくなるかもしれません。再度、HTMLから再構築を考慮してみては如何でしょうか？（個人的な感想です）

Akiraman

2018/03/27 17:43

わかりました。ご丁寧なご説明ありがとうございます。試してみます。

行動規範の内容に同意します

回答2件

手っ取り早いのはpの中にspanを設定して「ゼルダの伝説について」まで最初から記載することです

css
1.menu>span{display:none;}
2.menu:hover>span{display:inline;}

HTML
1<p class="menu">About<span>ゼルダの伝説について</span></p>

投稿2018/03/26 03:13

yambejp

総合スコア114839

Akiraman

2018/03/26 11:18

すみません。「＞」使う意味は何でしょうか。それとそのようにした場合座標の設定はどうすればいいのでしょうか？無知で申し訳ないです。

defghi1977

2018/03/26 11:37

無知を認識なさっているのであれば https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web のHTMLとCSSの記事に一通り目を通しておきましょう. 説明をする上でも、必要となる基礎的な語彙がありませんと説明しきれません(正直しんどい)ので.

Akiraman

2018/03/26 14:43

defghiさん　最後の三つ以外は読み終えました。内容を完全に理解できたとは断言できませんが、とてもためになったのは確かです。ありがとうございました。もっと早くにこのサイトを見つけたかったものです。後、このサイトを読んでも私がコメントした質問の解決にはなりませんよね？サイトを見終わった後も私が質問した内容のものの解決ができていません。もしサイトを見終わった後、「回答の内容が理解できるはず」ということならもう一度見直します。

defghi1977

2018/03/26 20:27

> 後、このサイトを読んでも私がコメントした質問の解決にはなりませんよね？はい, なりません. ですが, このことによりあなたのコードに含まれた”質問の内容以前の数々の問題点”の多くが解決されれば, 回答する側もどこに回答の焦点を絞りやすくなります. また, 回答するに当たっての技術的な用語を知っている前提であれば, より簡潔で判りやすい回答をすることが可能です.

Akiraman

2018/03/27 17:47

なるほど、その通りです。納得のいく説明ありがとうございます。

行動規範の内容に同意します

自己解決

<span style="position: absolute; left: 90px; top: 240px"><div class="menu">
を親要素にして
<span style="font-size:50%;color:black;">ゼルダの伝説について</span>
を子要素にしました。
ですが、これだけだと
![

hoverしたときに画像のようになってしまい横に配置することができませんでした。
ですので

<div class="mwnu">に　white-space:nowrap　←（これは改行させなくするもの）を追加することで解決しました。