SafariとiPhoneでハンバーガーメニューが開かない

Question

ハンバーガーメニューを作成し、Google ChromeやAndroidでは正常に動作しますが、SafariとiPhoneで閲覧した際、ハンバーガーメニューをタップしても反応が全くありません。
恐れ入りますが、ご教示頂けますと幸いです。
HTMLとCSSで作り、コードは以下の通りとなります。

<div id="ham-menu">
	<div><a href="#sn">サービス内容</a></div>
	<div><a href="#tc">特徴</a></div>
	<div><a href="#cs">コース紹介</a></div>
	<div><a href="#rp">料金プラン</a></div>
	<div><a href="#js">実績紹介</a></div>
	<div><a href="#ss">資料請求／お問い合わせ</a></div>
</div>

div#ham-menu{
	display: block;
	position: fixed;
	top: 0;
	background-color: #ffffff; /*メニュー背景色*/
    box-sizing: border-box;
    height: 100%;
    padding: 10px 40px; /*メニュー内部上下左右余白*/
    right: -260px; /*メニュー横幅①と合わせる*/
    -webkit-transition: transform 0.3s linear 0s;
    transition: transform 0.3s linear 0s; /*0.3s は変化するのにかかる時間*/
    width: 260px; /*メニュー横幅①*/
	z-index: 1000;
}
div#ham-menu::before {
	background-color: #ffffff; /*ボタン部分背景色*/
	color: #333; /*アイコン（フォント）色*/
	content: "≡"; /*メニューアイコン*/
	display: block;
	font-size: 50px; /*アイコン（フォント）サイズ*/
	height: 50px;
	line-height: 50px; /*縦位置中央化*/
	position: absolute;
	right: 100%;
	text-align: center;
	top: 0px;
	width: 50px;
}
div#menu-background {
	background-color: #333; /*黒背景部分背景色*/
	display: none;
	height: 100%;
	opacity: 0;
	position: fixed;
	right: 0;
	top: 0;
	transition: all 0.3s linear 0s; /*0.3s は変化するのにかかる時間*/
	width: 100%;
	z-index: -1;
}
div#ham-menu:hover {
	-webkit-transform: translate3d(-250px);
    transform: translate(-250px); /*メニュー横幅①と合わせる*/
}
#ham-menu:hover + #menu-background {
    opacity: 0.5; /*黒背景部分透過度*/
    z-index: 999;
    display: block;
}
div#ham-menu a{
	text-decoration: none;
	color: #808080;
}

ネットで色々調べ、ontouchstartをham-menuの中に入れてみましたが変わりませんでした。

何卒宜しくお願い致します。

Answer 1

引き続き色々と調べながら試してみましたが、HTMLとCSSではうまくいかずjQueryを使ったところ正常に動作しました。
お騒がせ致しました。閲覧して頂いた方々には、感謝いたします。
ありがとうございました。