ドロップダウンメニューで下の階層があることを示す目印を付けたい

Question

現在CSSのみでドロップダウンメニューを作成しておりまして、第三階層まで作ることになりました。
サンプルとしてこちらのサイトを参考にさせていただいています。
上記サンプルの完成ページ

現在私が作成中のドロップダウンメニューも第三階層が存在するのは一部なのですが、
「一番上のメニューにマウスオーバーした時に」、第三階層があることを示す矢印を、
第二階層の右横に表示したいと考えています。
現在は見本ページのように第三階層がある項目の末尾に「＞＞」をテキスト入力していますが、
これは止めてCSSで判断して矢印を表示したいと思います。

<ul class="ddmenu">
		<li><a href="#">HOME</a></li>
		<li><a href="#">ニュース</a>
			<ul>
				<li><a href="#">新製品 &raquo;</a>
					<ul>
						<li><a href="#">ハードウェア</a></li>
						<li><a href="#">ソフトウェア</a></li>
					</ul>
				</li>
				<li><a href="#">新サービス</a></li>
				<li><a href="#">弊社について</a></li>
			</ul>
		</li>
		<li><a href="#">製品・技術</a>
			<ul>
				<li><a href="#">ハードウェア &raquo;</a>
					<ul>
						<li><a href="#">法人向け</a></li>
						<li><a href="#">個人向け</a></li>
					</ul>
				</li>
				<li><a href="#">ソフトウェア &raquo;</a>
					<ul>
						<li><a href="#">for Windows</a></li>
						<li><a href="#">for Mac</a></li>
						<li><a href="#">for Android</a></li>
						<li><a href="#">for iOS</a></li>
						<li><a href="#">その他</a></li>
					</ul>
				</li>
				<li><a href="#">ウェブサービス</a></li>
			</ul>
		</li>
		<li><a href="#">会社情報</a>
			<ul>
				<li><a href="#">会社概要 &raquo;</a>
					<ul>
						<li><a href="#">グループ概要</a></li>
						<li><a href="#">本社概要</a></li>
					</ul>
				</li>
				<li><a href="#">社長挨拶</a></li>
				<li><a href="#">沿革</a></li>
				<li><a href="#">所在地 &raquo;</a>
					<ul>
						<li><a href="#">本社</a></li>
						<li><a href="#">支社</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li><a href="#">お問い合わせ</a>
			<ul class="sub">
				<li><a href="#">よくあるご質問 &raquo;</a>
					<ul>
						<li><a href="#">サービスに関して</a></li>
						<li><a href="#">弊社に関して</a></li>
						<li><a href="#">その他</a></li>
					</ul>
				</li>
				<li>
					<a href="#">お問い合わせ先 &raquo;</a>
					<ul>
						<li><a href="#">大阪本社</a></li>
						<li><a href="#">支社 &raquo;</a>
						<ul>
							<li><a href="#">神戸支社</a></li>
							<li><a href="#">京都営業所</a></li>
							<li><a href="#">奈良営業所</a></li>
						</ul>
					</li>
					</ul>
				</li>
			</ul>
		</li>
	</ul>

		/* -------------------- */
		/* ▼メニューバーの装飾 */
		/* -------------------- */
		ul.ddmenu {
			margin: 0px;					/* メニューバー外側の余白(ゼロ) */
			padding: 0px 0px 0px 15px;		/* メニューバー内側の余白(左に15px) */
			background-color: #cc0000;		/* バーの背景色(濃い赤色) */
		}

		/* -------------------------- */
		/* ▼メインメニュー項目の装飾 */
		/* -------------------------- */
		ul.ddmenu li {
			width: 125px;			/* メニュー項目の横幅(125px) */
			display: inline-block;	/* ★横並びに配置する */
			list-style-type: none;	/* ★リストの先頭記号を消す */
			position: relative;		/* ★サブメニュー表示の基準位置にする */
		}
		ul.ddmenu a {
			background-color: #cc0000;	/* メニュー項目の背景色(濃い赤色) */
			color: white;				/* メニュー項目の文字色(白色) */
			line-height: 40px;			/* メニュー項目のリンクの高さ(40px) */
			text-align: center;			/* メインメニューの文字列の配置(中央寄せ) */
			text-decoration: none;		/* メニュー項目の装飾(下線を消す) */
			font-weight: bold;			/* 太字にする */
			display: block;				/* ★項目内全域をリンク可能にする */
		}
		ul.ddmenu a:hover {
			background-color: #ffdddd;	/* メニュー項目にマウスが載ったときの背景色(淡いピンク) */
			color: #dd0000;				/* メニュー項目にマウスが載ったときの文字色(濃い赤色) */
		}

		/* ---------------------------------- */
		/* ▼サブメニューがある場合に開く処理 */	/* ※サブメニューが2階層以上ある場合の記述 */
		/* ---------------------------------- */
		ul.ddmenu li:hover > ul {
			display: block;			/* ★マウスポインタが載っている項目の内部にあるリストを表示する */
		}

		/* -------------------- */
		/* ▼サブメニューの装飾 */
		/* -------------------- */
		ul.ddmenu ul {
			margin: 0px;			/* ★サブメニュー外側の余白(ゼロ) */
			padding: 0px;			/* ★サブメニュー内側の余白(ゼロ) */
			display: none;			/* ★標準では非表示にする */
			position: absolute;		/* ★絶対配置にする */
		}

		/* ------------------------ */
		/* ▼サブメニュー項目の装飾 */
		/* ------------------------ */
		ul.ddmenu ul li {
			width: 135px;					/* サブメニュー1項目の横幅(135px) */
			border-top: 1px solid pink;		/* 項目上側の枠線(ピンク色で1pxの実線) */
		}
		ul.ddmenu ul li a {
			line-height: 35px;		/* サブメニュー1項目の高さ(35px) */
			text-align: left;		/* 文字列の配置(左寄せ) */
			padding-left: 5px;		/* 文字列前方の余白(5px) */
			font-weight: normal;	/* 太字にはしない */
		}
		ul.ddmenu ul li a:hover {
			background-color: #ffff80;	/* サブメニュー項目にマウスが載ったときの背景色(淡い黄色) */
			color: #005500;				/* サブメニュー項目にマウスが載ったときの文字色(濃い緑色) */
		}

		/* -------------------------------------------------------- */
		/* ▼サブメニューの内側にあるサブメニュー(孫メニュー)の装飾 */	/* ※サブメニューの中のサブメニューは「下」ではなく「横(右)」に表示します。 */
		/* -------------------------------------------------------- */
		ul.ddmenu ul ul {
			margin: 0px;			/* ★サブメニュー外側の余白(ゼロ) */
			padding: 0px;			/* ★サブメニュー内側の余白(ゼロ) */
			display: none;			/* ★標準では非表示にする */
			position: absolute;		/* ★絶対配置にする */
			top: -1px;				/* 1pxだけ上方向にずらす(※上に1pxの枠線を引いている場合) */
			left: 100%;				/* ★基準位置からの距離を親ボックスの幅100％にする */
			border-left: 1px solid pink;	/* 左側に引く枠線(ピンク色で1pxの実線) */
		}

ul.ddmenu li:last-child ul li ul {
    left: -100%;
}

ul.ddmenu li ul li ul:before {
    position: absolute;
    content: "";
    top: 16px;
    left: -20px;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-left-color: #000000;
}

ul.ddmenu li ul li:hover ul:before {
    border-left-color: #000000;
}

ul.ddmenu li:last-child ul li ul:before {
    position: absolute;
    content: "";
    top: 16px;
    left: 100%;
    margin-left: -20px;
    border: 5px solid transparent;
    border-right-color: #000000;
}

ul.ddmenu ul li:last-child ul li:hover ul:before {
    border-right-color: #000000;
}

自分なりに調べて試してみたのですが、第二階層にマウスオーバーすると矢印は表示されますが、
その上の第一階層にマウスオーバーした時に、第二階層に矢印を表示する、という目的に
達することができません。

色々試してみたのですがCSSの知識が足りず実現できなくて焦っております。
何か有用なアドバイスがありましたらどうか頂けないでしょうか。
どうぞよろしくお願いいたします。

Answer 1

黒矢印はul.ddmenu li ul li ul:beforeで定義されていて、要は最下層のメニューにくっついています。
この部分を1つ親に移動すればある程度は何とかなりそうに思います。（beforeはafterに変えたほうがいいですね。）
ただ「このメニュー矢印をつける」という区別が必要なので別途クラスを振ってやる必要があると思います。

例えばこんな感じ。
※hoverをある程度調整する必要はありそう

<li class="drop"><a href="#">新製品</a>
  <ul>
    <li><a href="#">ハードウェア</a></li>
    <li><a href="#">ソフトウェア</a></li>
  </ul>
</li>

ul.ddmenu li ul li.drop:after {
    position: absolute;
    content: "";
    top: 12px;
    right: 10px;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-left-color: #000000;
}

第1階層hover

第2階層hover

Comments

[ponyski]

矢印表示用に別途クラスを設定する必要ありとのことで、お教えいただいたCSSを追加し、
第三階層を持つ親要素に矢印表示用のクラスを設定しました。
適用してみたところ、第一階層にマウスオーバーした時にも矢印が表示されました。
大変助かりました！
早速のアドバイス本当にありがとうございます。

[m.ts10806]

解決したようで何よりです。