<a> in header: only part of it works?

My site is being developed on WordPress and the Thematic theme framework, and I'm having an issue inside the header. When you hover over my name in the header, it should all be a link to the homepage.

However, that's not the case. Between the 开发者_开发问答A and N in "Jonathan," the randomly stops working. Is there any way I can fix this? Thanks!

Your menu links are too wide - their containing box overlaps your logo.

Lower it's width, and you should be good to go.

Details:

...wp-content/themes/thematic/library/layouts/2c-r-fixed.css

in that CSS file, the .menu has a width of 940px;

Edit:

Along with lowering it's width, increase .menu-home-container's margin-left (currently around 30? - I forget) to ~200px

try the changes below, i deleted some of the codes, i hope i did not forget anything.

.menu-home-container {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 0.8em;
    font-weight: bold;
    text-align: right;
    text-shadow: 0 -1px 0 black;
    }
#navigation {
  float: right;
}
.menu {
    line-height: 44px;
    margin: 0;
    }

The problem is your ul.menu.

It is overlapping your name.

EDIT

On closer inspection, it is a float:left; in your #blog-title that is tripping you up. Change it to display:inline-block; and all should be good.

#blog-title {
    display: inline-block;
}

This keeps it in the document flow