Creating a menu in page

So this is odd and beyond me. I tried to create a menu within the page and it is not laying out or functioning correctly. On firefox it’s fine. But the other browsers the link to the word is above the text. So when you hover over the text there is no pointer. Go a little above the text and you get the pointer. Same with the behavior of the sub-menu under portfolio. You can see the menu here.

Also, when the sub-menu drops it expands the border-right, I rather it doesn’t.

Here’s what I have in the page.

<div id="adam_menu">
<ul class="clear">
	<li><a href="http://jah-inc.com/clients/adamshane">PORTFOLIO</a>
<ul class="clear">
	<li><a href="http://jah-inc.com/clients/adamshane/beauty">BEAUTY</a></li>
	<li><a href="http://jah-inc.com/clients/adamshane/culinary">CULINARY</a></li>
	<li><a href="http://jah-inc.com/clients/adamshane/illustrative">ILLUSTRATIVE</a></li>
	<li><a href="http://jah-inc.com/clients/adamshane/portraiture">PORTRAITURE</a></li>
</ul>
</li>
	<li><a href="http://jah-inc.com/clients/adamshane/info">INFO</a></li>
	<li><a href="http://jah-inc.com/clients/adamshane/contact">CONTACT</a></li>
</ul>
</div>

And this is the CSS

/** ADAMS MENU */
#adam_menu ul{
    list-style: none;
    margin: 10px 0 0 0;
    padding: 0;
    background: transparent none repeat scroll 0 0;
    color: #747474;
     cursor: pointer;
}
/** ALL LI */
#adam_menu ul li{
    border-right: 1px solid #000000;
    padding: 5px 15px;
    position: relative;
}
/** FIRST LEVEL LI */
#adam_menu>ul>li{
    float: left;
}
#adam_menu li ul{
    display: none;
    position: relative;
    top:18px;
    left: 0;
    width: 200px;
}
#adam_menu li:hover ul{
    display: block;
}
#adam_menu li li{
    background: #8c8c8c none repeat scroll 0 0;
    border-right: medium none;
    color: #fff;
}
#adam_menu li li:hover{
    background: #f0f0f0;
    color: #8c8c8c;
}
.clear{
    _zoom:0;
}
.clear:after{
    content: "";
    clear: both;
    display: block;
}