Выпадающая кнопка по типу facebook'a

[Santiago]

Вот принялся делать выпадающую кнопку, подобно как на facebook'е “Account”. Это первый мой опыт, и как следовало ожидать, столкнулся с рядом проблем. Надеюсь на Вашу помощь!

Проблемы:
- Не могу избавиться от выделения на кнопке после клика мыши т.е. отменить a:hover, именно этой кнопки, после клика
- Установить другой цвет шрифта после клика мыши
- Чтобы меню закрывалось после клика мыши вне области подменю.
- Убрать странные явления в explorer'е (после нажатия на кнопку вместе с подменю «тянется» header)
- и можно как-нибудь объединить кнопку и подъменю?! (я думаю, что мой вариант с применением “margin” не самый лучший)
- и как сделать окантовку всего этого блока, как в facebook'e?

Вот мои скрипты:

HTML:

<ul id="navigation">
    <li><a href="profile.php">Profile</a></li>
    <li><a href="">Messages</a></li>
    <li><a href="search.php">Search</a></li>
    <li><a href="" class="menu_head">Settings</a></li>
        <ul class="menu_body">
            <div class="settingsChange">You can change your:</div>
            <li><a href="settings_personal.php">Personal</a></li>
            <li><a href="settings_photo.php">Photo</a></li>
            <li><a href="settings_password.php">Password</a></li>
            <li><a href="settings_email.php">E-mail</a></li>
        </ul>
  </ul>

jQuery:

$(document).ready(function () {
    $('.menu_head').click(function(){
	$('.menu_head').toggleClass('menuHeadWhite');
    $('.menu_body').toggle();
    return false
    });
    });

CSS:

#navigation {
	text-align: right;  
	font-weight: bold; 
	font-size: small;
	float:right;
	width:auto;
	margin: 18px 130px 0 0;
	height:30px;
} 
#navigation li {
	line-height: 30px;
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	display: inline; 
	list-style-type: none; 
}
#navigation a {
	color: #FFF;
	text-decoration: none; 
	letter-spacing: 1px;
	padding:10px;
}
#navigation a:hover  {
	background-color:#5959b0;
    outline-style: none;
    outline-width: medium;
	}
ul, li{
	margin-top:2px; 
	padding:0; 
	list-style:none; 
}
.menu_body {
	margin-left:167px;
	text-align:left;
	background: #FFF;
	display:none; 
	width:144px;
	border-right:1px solid #998675;
	border-bottom:1px solid #998675;
	border-left:1px solid #998675;
}
#navigation .menu_body li {
	line-height: 5px;
	font-size: 10px;
	font-family: Arial, Helvetica, sans-serif; 
}
#navigation .menu_body a{
	color:#66c; 
	text-decoration:none; 
	padding:10px; 
	display:block;
}
#navigation .menu_body a:hover  {
	color:#FFF;
	background-color: #66c;
    outline-style: none;
    outline-width: medium;
}
.menuHeadWhite {
	background-color: #FFF;
	}
.settingsChange { 
	font-size: 10px;
	font-family: Arial, Helvetica, sans-serif;
	color:#999999;
	padding:10px;
	width:auto;
	}