Estoy usando un submenú para mostrar un div de un archivo html externo en un div en el archivo master.html.

He revisado al menos 20 ejemplos de cosas relacionadas similares, pero no puedo hacer que mi código funcione y, desafortunadamente, sé por qué no sé cómo resolver el problema.

Entonces tengo un submenú definido en css:

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

Tengo master.html con el html para el submenú

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

</div>

Y estoy usando este código javascript con jquery.js incluido en el encabezado:

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

Sé que algo está mal aquí, pero no puedo entenderlo, cualquier ayuda sería muy apreciada.