ドロップダウンの子メニューサイズ変更について

前提・実現したいこと

ドロップダウンメニューを作成していますがうまくいきません。
CSSで背景画像を横に並べて表示しています。
親メニューは下部がドロップシャドウ人っているので子メニューで同じものを使うと
縦に隙間があいたような感じになってしまいます。
これを解決するため、子メニュー用に別の画像を作成し表示しようとしましたがうまくいきませんうまくいきませんでした。
無駄が多く見にくいと思いますがご教示いただけますと幸いです。

#html

<div id="indexmenu">
<ul>
<li class="short"><a href="#">あああ</a></li>
<li><a href="#">いいい</a></li>
<li><a href="#">ううう</a></li>
<li class="long"><a href="#">えええ</a></li>
<li class="short parent"><a href="#">おおお</a>
<ul class="child">
<li><a href="">かかか</a></li>
<li><a href="">ききき</a></li>
</ul></li>
</ul>
</div>

#css

#indexmenu ul{
padding:0;
margin:0;
list-style:none;
z-index:0;/*メニューの一部がメインビジュアルの上に表示されてしまうため重なり順を1番目に*/
}

#indexmenu ul li{
	float:left;
	}

#indexmenu a{
text-decoration:none;
display:inline-block;
width:140px;
height:71px;
line-height:71px;
color:#FFFFFF;
font-weight:bold;
background:url(../images/index_menu.gif) repeat-x;
font-size:14px;
text-align:center;}

#indexmenu li.short a{
	width:120px;
	}

#indexmenu li.long a{
	width:180px;
	}

#indexmenu a:hover{
color:#663300;
background:url(../images/index_menu_o.gif) repeat-x;}

.parent{
    position: relative;
	}

ul.child {
    visibility: hidden;
    width: 100%;
    position: absolute;
    top: 71x;
    left: 0px;
}	

.parent:hover .child {
    visibility: visible;
}

.child a{
	color:#663300;
	background:url(../images/index_menu_child.gif) repeat-x;
	}

.child a:hover{
	color:#663300;
	background:url(../images/index_menu_child_o.gif) repeat-x;
	}

試したこと

昨日からいろいろなページをみて試しましたがうまくいきません。

補足情報（FW/ツールのバージョンなど）

index_menu.gifとindex_menu_o.gifは高さ71pxです。
index_menu_child.gifとindex_menu_child_o.gifは高さ60pxで作成しました。

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

回答1件

ベストアンサー

詳細度が負けているため、反映されていないのでは。

CSS
1#indexmenu .child a{
2    color:#663300;
3    background:url(https://placehold.jp/12/99cc99/339933/150x100.png?text=index_menu_child.gif) repeat-x;
4    }
5
6#indexmenu .child a:hover{
7    color:#663300;
8    background:url(https://placehold.jp/12/99cc99/339933/150x100.png?text=index_menu_child_o.gif) repeat-x;
9    }
10```**動くサンプル：**[https://jsfiddle.net/vLt35srh/](https://jsfiddle.net/vLt35srh/)
11
12---
13
14【エンジニアはもう一度CSSとちゃんと向き合ってみよう - 詳細度編 - Qiita】
15[https://qiita.com/izumin5210/items/8ae78cb4f4bd325bccb4](https://qiita.com/izumin5210/items/8ae78cb4f4bd325bccb4)
16
17
18【初心者向け！Chromeの検証機能（デベロッパーツール）の使い方】
19[https://saruwakakun.com/html-css/basic/chrome-dev-tool](https://saruwakakun.com/html-css/basic/chrome-dev-tool)
20
21【ChromeデベロッパーツールでCSSをチェックする方法 | なんでものびるWEB】
22[https://nandemo-nobiru.com/2944/](https://nandemo-nobiru.com/2944/)