Estou usando um submenu para exibir uma div de um arquivo html externo em uma div no arquivo master.html.

Examinei pelo menos 20 exemplos de coisas relacionadas semelhantes, mas durante toda a minha vida não consigo fazer meu código funcionar e, infelizmente, sei por que não sei como resolver o problema.

Então, eu tenho um submenu definido em css:

#subnav ul li#subone a:hover{color:#ffffff; background-color: #1e3435;}

Eu tenho master.html com o html para o submenu

<div id="subnav" >
    <ul>
        <li id="subone"><a href="#">About</a></li>
        <li id="subtwo"><a href="home.html">Home</a></li>

</div>

E eu estou usando esse código javascript com o jquery.js incluído no cabeçalho:

<script src="jquery.js"></script>
<script type="text/javascript">
$(function(){
    $(".subnav ul li a") .click(function(e){
        e.preventDefault()
        $('#content2').load( 'abc.html' );
    });
});
</script>

Eu sei que algo está errado aqui, mas não consigo entender direito, qualquer ajuda seria muito apreciada.