JSFiddle - React, Tailwind, and code Playground

by KURO KUMO

HTML

<div id="navigation">
	<ol>
		<li><a href="news_list.php"><strong>お知らせ</strong></a></li>
        <li><a href="careers.php"><strong>採用情報</strong></a>
        	<ol>
				<li><a href="job_list.php?career=1">   社員（新卒）の方の募集一覧</a></li>
				<li><a href="job_list.php?career=2">   社員（既卒）の方の募集一覧</a></li>
				<li><a href="job_list.php?career=3">   契約社員の方の募集一覧</a></li>
				<li><a href="job_list.php?career=4">   パート・アルバイトの方の募集一覧</a></li>
				<li><a href="job_list.php?career=5">   障がい者の方の募集一覧</a></li>
			</ol>
        </li>
	</ol>
</div>

CSS

#navigation ol li ol li{
    list-style-image: url("http://dummyimage.com/30/ffffff/ffff00.png&text=▷");
    padding:5px 0 5px 10px;
}
#navigation {
    width:80%;
    font-family:Georgia, Times, serif;
    font-size:15px;
}
#navigation ol {
    
}
#navigation ol li {
    list-style-image: url("http://dummyimage.com/30/ffffff/ff0000.png&text=▷");
    padding:5px 0 5px 10px;
}
#navigation ol li a {
    display:block;
    text-decoration:none;
    color:#000000;
    background-color:#FFFFFF;
    line-height:30px;
    border-bottom-style:solid;
    border-bottom-width:1px;
    border-bottom-color:#CCCCCC;
    padding-left:10px;
    cursor:pointer;
}
#navigation ol li a:hover {
    color:#FFFFFF;
    background-image:url(../images/hover.png);
    background-repeat:repeat-x;
}
#navigation ol li a strong {
    margin-right:10px;
}