Change your HTML to this:
<div id="bar">
<div class="width">
· <a href="http://itsdoom.com" target="new" style="target-name: new; target-new: tab;">website</a> · <a href="/rss">rss</a> ·
<div id="tituli">
<a href="http://everycornerlurksdoom.tumblr.com">DOOM</a>
</div><!-- #tituli -->
</div><!-- .width -->
</div><!-- #bar -->
EDIT** Let me know if this is what you're after:
$(document).ready(function(){
$('.width').slideDown();
hovered = false;
$(window).scroll(function() {
if ($(window).scrollTop() >= 10 && hovered === false){
$( ".width" ).slideUp();
} else if (hovered === true) {
$('.width').show();
} else {
$('.width').slideDown();
}
});
$("#bar").mouseenter(function (e){
if ($('.width').is(':visible') && hovered === false) {
e.preventDefault();
hovered = true;
} else {
$(".width").slideDown("slow");
hovered = true;
}
});
$("#bar").mouseleave(function (e){
if ($(window).scrollTop() >= 10) {
$(".width").slideUp("slow");
hovered = false;
} else {
e.preventDefault();
hovered = false;
}
});
});
Here's a newer-er-er fiddle: http://jsfiddle.net/4CdFP/28/
Hope that helps.