liを使ってfooterにナビゲーションを作成したい

Question

ページ事に表示が変わってしまい、困っています。
ご指摘宜しくお願い致します。

liごとに縦並びでfooter内でリンクを入れ、項目が変わればulタグを使って横に移動させてそこから縦並びにしたいです。
二列までは下のコードで出来たのですが、三列目からは列がかわらなくなりました。
以下のコード以外でも同様な事ができるならそちらでも構いません。
ご教授よろしくお願い致します。

	<div class="bottom">
<!--footer-->
	<footer>
		<ul class="footer-nav">
			<li><p><a href="*****.html">1</a></p></li>
		<ul class="footer-nav2">
			<li class="niretu"><p><a href="***.html">1</a></p></li>
			<li class="niretu"><p><a href="****.html">2</a></p></li>
			<li class="niretu"><p><a href="****.html">3</a></p></li>
			<li class="niretu"><p><a href="*****.html">4</a></p></li>
		<ul class="footre-nav2">
			<li class="niretu"><p><a href="*****.html">1</a></p></li>
		</ul>
	</ul>
</ul>
		<p class="tyosakuken">&copy; ************ All rights reserved</p>
	</footer>
	</div>

css

.bottom{
height:200px;
margin-top: 10px;
padding-top: 30px;
line-height: 20px;
background-color:#afeeee;
}
.footer-nav1{
list-style-type: none;
align-items: normal;
padding: 0 10px 5px 10px
}
.footer-nav2{
list-style-type: none;
align-items: normal;
padding: 0 10px 5px 10px;
}
.niretu{
padding-bottom: 10px;
list-style-type:none;
padding: 0 0px 5px 10px;
margin-bottom: 0px;
align-items:normal;
}

.footer-nav{
list-style-type:none;
align-items: start;
padding: 5px 15px 10px 15px;
margin-bottom: 10px;
flex-wrap: wrap;
display : -webkit-box; /* old Android /
display : -webkit-flex; / Safari etc. /
display : -ms-flexbox; / IE10 */
display : flex;

Comments

[miyabi_pudding]

HTMLの文法間違っているので、そこから直したら、直りそうですが。
ul要素の入れ子のさせ方が思いっきり間違っています。

現状の表示と、理想の表示状態のキャプチャ画像も入れていただけないでしょうか。

[let]

ページによって変わってしまっているので理想と表示をキャプチャ致しました。
ご教授お願い致します。

[Daregada]

ul要素の内容にul要素を「直接」書くことはできませんが、そこを理解していますか?

[let]

ご返信ありがとうございます。
そこは理解していたつもりですが、まだまだ甘かったようです。
ｐタグ不要との事ですが、コピーライトはどのように記載すればいいのでしょうか？
度々質問し、申し訳ありません。

[Daregada]

それは、「li要素の中のa要素をp要素の内容に書く必要はない」という意味です。Copyrightはそのままp要素で書けばいいと思うよ。

[let]

ありがとうございます。
早速作りなおしてみます。

[let]

何度も申し訳ございません。
大事なCSSを入れ忘れておりました。
教えていただいた通りにしました所二列目までは綺麗に表示されます。
cssの.footer-navを記載漏れしておりました。<ul>で入れ子にしたものをflexで横並びにしたいのです。
ややこしくなり、大変申し訳ありません。

[Daregada]

新たに追加された.footer-navを見ると、横ってのは、字下げして横にずらすという意味ではなく、横並びに表示するという意味になるね。それを見せずに正解が得られるわけないだろう?

[let]

もうしわけありません、きちんとコピーしたつもりでいました。

[Daregada]

footer-navと書いてあるところがfooter-nav1の間違いとして回答を書きましたが、後付けでfooter-navが追加されたことでfooter-nav1が使われていない状態になるけど、それは本当はどこに設定するつもりですか?

[let]

縦書き項目の整列とリストマークの削除ですね

[Daregada]

footer-nav1とfooter-nav2を区別して使う必要がないのでは?

Answer 1

ul要素の内容にはli要素だけを書き、さらにその中にul要素を書きます。あと、今回の使い方だとp要素は不要かな。クラス名のタイプミスも2箇所ありました。

<ul class="footer-nav1">
    <li><a href="*****.html">1</a></li>
    <li>
        <ul class="footer-nav2">
            <li class="niretu"><a href="***.html">1</a></li>
            <li class="niretu"><a href="****.html">2</a></li>
            <li class="niretu"><a href="****.html">3</a></li>
            <li class="niretu"><a href="*****.html">4</a></li>
            <li>
                <ul class="footer-nav2">
                    <li class="niretu"><a href="*****.html">1</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

補足分:
後から追加されたfooter-navクラスを使うと、「縦に項目が並ぶ箇条書きが横に並ぶナビゲーション」自体は作れる。
footer-nav1の内容にfooter-nav2を入れて、これと同じように横に並べるのは大変だな。

<ul class="footer-nav">
    <li><a href="*****.html">1</a></li>
    <li>
        <ul class="footer-nav1">
            <li class="niretu"><a href="***.html">1</a></li>
            <li class="niretu"><a href="****.html">2</a></li>
            <li class="niretu"><a href="****.html">3</a></li>
            <li class="niretu"><a href="*****.html">4</a></li>
        </ul>
    </li>
    <li>
        <ul class="footer-nav2">
            <li class="niretu"><a href="*****.html">5</a></li>
            <li class="niretu"><a href="*****.html">6</a></li>
            <li class="niretu"><a href="*****.html">7</a></li>
            <li class="niretu"><a href="*****.html">8</a></li>
        </ul>
    </li>
</ul>

Comments

[let]

無事にイメージ通りのものに仕上がりました。ありがとうございました。