-Menu-L2-
-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; } ul { width: 270px; margin: 20px; padding: 10px 5px; background: gray; list-style: none; } ul li { background: goldenrod; text-align: center; } ul li:not(:last-of-type) { margin-bottom: 10px; } a { display: block; padding: 15px 0; border: solid 3px transparent; border-top-color: gold; border-left-color: gold; border-right-color: black; border-bottom-color: black; text-decoration: none; color: darkslategray; } a:hover { background: rgba(184,134,11,0.9)/*darkgoldenrod*/; border-top-color: black; border-left-color: black; border-right-color: gold; border-bottom-color: gold; color: white; }