-menu-L5-
-HTML-
<body> <ul> <li><a href="#">ホーム</a></li> <li><a href="#">新着情報</a></li> <li><a href="#">会社概要</a></li> <li><a href="#">サービス</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </body>
-CSS-
* { margin: 0; padding: 0; } body { background: url(images/Bg-icon100.jpg); } ul { width: 270px; margin: 20px; padding: 5px; background: white; list-style: none; } ul li:nth-of-type(odd) { background: gold; } ul li:nth-of-type(even) { background: tomato; } ul li:not(:last-of-type) { margin-bottom: 5px; } a { display: block; padding: 20px 0; text-indent: 120px; text-decoration: none; color: brown; position: relative; } a:before { content: ""; display: inline-block; width: 60px; height: 54px; background: url(images/flowericon.png) no-repeat; position: absolute; top: 1px; left: 50px; } li:nth-of-type(odd) a:hover { background: rgba(184,134,11,0.9)/*darkgoldenrod*/; color: white; } li:nth-of-type(even) a:hover { background: rgba(220,20,60,0.9)/*crimson*/; color: white; }