ขอแนวทางการเขียนเมนู Arrow กรณีคลิกแล้วเปลี่ยนรูปทรงครับ

.header-nav {
		position:relative;
		top:0;
		left:0;
		display:none;
		line-height:1;
		width:100%;
		box-shadow:0px 0px 2px #888;
	}
ul.mobilemenu li.level0 {
		padding:4px 0;
		border-bottom:solid #eee 1px;
		width: 100%;
		display: inline-block;
		position:relative;
	}

                float:right;
		display: inline-block;
		border-left:12px solid #999;
		border-bottom:6px solid transparent;
		border-top:6px solid transparent;
		position:absolute;
		top:8px;
		right:0;

                float:right;
		display: inline-block;
		border-top:12px solid #999;
		border-left:6px solid transparent;
		border-right:6px solid transparent;
		position:absolute;
		top:8px;
		right:0;

<script>
if ($('.header-nav').css({'display':'block'})
{
                'float':'right',
		'display':' inline-block',
		'border-top':'12px solid #999',
		'border-left':'6px solid transparent',
		'border-right':'6px solid transparent',
		'position':'absolute',
		'top':'8px',
		'right':'0'
}
else
{
                'float':'right',
		'display':' inline-block',
		'border-left':'12px solid #999',
		'border-top':'6px solid transparent',
		'border-bottom':'6px solid transparent',
		'position':'absolute',
		'top':'8px',
		'right':'0'
}
)
</script>