Annoying CSS problem

Hello,

Here is my CSS:

[CODE]#p7menubar li {
float: left;
width: 9em;
z-index:900;
}
#p7menubar li {position: fixed;}

/* hide from IE mac */
#p7menubar li {position: static; width: auto;}
/* end hiding from IE5 mac */

#p7menubar li ul, #p7menubar ul li {

}
#p7menubar ul li a {
display: block;
z-index:900;
padding: 0 56px 6px 56px;
height:15px;
border-top: 2px solid #0c2f47;
border-bottom: 1px solid #000;
line-height:20px;
text-decoration: none;
}
#p7menubar li ul {
border-bottom: 1px #000 solid;
border-left: 1px #000 solid;
border-right: 1px #000 solid;
z-index:900;
position: fixed;
display: none;
background: #212121;
background-repeat: repeat-x;
margin-top:31px;
line-height:14px;
}
#p7menubar li:hover a, #p7menubar a:focus,
#p7menubar a:active, #p7menubar li.p7hvr a {
display: block;
color: #fff9b8;
z-index:900;
background: #262626;
background-repeat: repeat-x;
}
#p7menubar li:hover ul, #p7menubar li.p7hvr ul {
display: block;
z-index:900;
}
#p7menubar li:hover ul a, #p7menubar li.p7hvr ul a {
color: #fff9b8;
background-color: transparent;
z-index:900;
}
#p7menubar ul a:hover {
background-color: #262626!important;
color: #FFFFFF !important;
z-index:900;
padding-top:-2px;

}
[/CODE]

And here’s the HTML:

[code=html] <ul id=”p7menubar”>
<li>
<a href=’home.html’ class=”trigger”>
<div class=’button first’>
<div class=’b left’><!– –></div>
<div class=’b right’><!– –></div>
<div class=’b content’>Home</div>
</div>
</a>
<ul>
<li><a href=”#” class=”sub”>Link 1</a></li>
<li><a href=”#” class=”sub”>Link 2</a></li>
</ul>
</li>
</ul>[/code]

The annoying problem is that it’s a drop down menu, Link 1 and Link 2 end up going horizontal instead of vertical whenever I close the a href, if I don’t add the </a> it works vertically as it should.

I’ve been trying for quite a while now and I just can’t figure it out, perhaps a set of fresh eyes can help.

Regards,
Karl

Also in #CSS _↴