アコーディオンメニューで子メニューがちらつく現象について

パソコン版ナビゲーションとスマホ版ナビゲーションの両方に複数のアコーディオンメニューを実装しております。
ieとedgeで表示した場合のみ、子メニューがちらつきます。

複数あるアコーディオンうちの一つ目を表示させた際にはちらつかず、通常通りの動作で表示されます。
一つを表示させた状態で、そのまま別の分類をホバーしたときに、一瞬子メニューがちらついてからスライドダウンされます。
つまりホバーが外れたメニューがスライドアップしているときに、別の子メニューのスライドダウンが動いている際にちらつくようなイメージです。
GoogleChromeとFirefoxでも確認しましたがこの現象は起きませんでした。
ソースは以下の通りです。

HTML
1<ul>
2	<li class="nav1" id="parent">
3		<span>
4			分類1
5		</span>
6		<ul id="sub" style="display: none;">
7			<li><a href="#">メニュー1</a></li>
8			<li><a href="#">メニュー2</a></li>
9			<li><a href="#">メニュー3</a></li>
10		</ul>
11	</li>
12	<li class="nav2" id="parent">
13		<span>
14			分類2
15		</span>
16		<ul id="sub" style="display: none;">
17			<li><a href="#">メニュー1</a></li>
18			<li><a href="#">メニュー2</a></li>
19			<li><a href="#">メニュー3</a></li>
20			<li><a href="#">メニュー4</a></li>
21		</ul>
22	</li>
23	<li class="nav3" id="parent">
24		<span>
25			分類３
26		</span>
27		<ul id="sub" style="display: none;">
28			<li><a href="#">メニュー1</a></li>
29			<li><a href="#">メニュー2</a></li>
30			<li><a href="#">メニュー3</a></li>
31			<li><a href="#">メニュー4</a></li>
32			<li><a href="#">メニュー5</a></li>
33		</ul>
34	</li>
35</ul>

javaScript
1$(function() {
2	'use strict';
3	
4	// 子メニューを隠す
5	$('ul#sub').hide();
6
7	// 親メニューホバー処理
8	$('ul#pc_menu>li#parent').hover(
9		// ホバーされたとき
10		function(){
11			$(this).children('ul').stop().slideToggle();
12		}
13	);
14});

css
1li#parent {
2	position: relative;
3}
4ul#sub{
5	position: absolute;
6	display: none;
7}
8ul#sub li {
9	background-color: #E4EECC;
10	border: none;
11	text-align: center;
12	width: 100%;
13}
14ul#sub li:hover {
15	background: #8CC11F;
16}
17ul#sub li:last-child {
18	border-bottom: 1px solid #fff;
19}
20ul#sub li a span{
21	display: inline;
22	color: #FFA216;
23	font-size: 10px;
24}
25ul#sub li a {
26	display: block;
27	padding: 8px 0;
28	text-align: center;
29	border-bottom: 1px solid #fff;
30}