jquery hide is hiding all the ids

In my click function after the user clicks on a button I am trying to hide the menu div. However, the background image for the header div which is the parent of menu is hiding. Not really sure what I am doing wrong.

Here is my code

 <!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>JQuery PortFolio</title>
    <link rel="stylesheet/less" type="text/css" href="styles.less" >
    <script src="less.js" type="text/javascript"></script>
    <script type="text/javascript"  src="jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $('button').hover(function(){
            var id = $(this).attr('id');
            var id = id +'.jpg';
            $('#header').css('background-image', 'url('+id+')');
            }, function(){
             $('#header').css('background-image', 'none');  
        });

        $('button').click(function(){
            var id = $(this).attr('id');
            var id = id +'.jpg';
            $('#header').css('background-image', 'url('+id+')');
            $('#menu').hide();
        });
    });
    </script>
</head>
<body>
    <div id="header">
        <div id="menu">
            <h1>Pick an Arena</h1>
            <button id="dojo">Dojo</button>
            <button id="calvinandhobbes">
            Calving and Hobbes </button>
            <button id="snow">Snow</button>
            <button id="matrix">Matrix </button>
            <button id="forest">Forest</button>
            <button id="beach">Beach</button>
        </div>
    </div>
</body>
</html>

Here is my css file(It is actually in less)

*{
    margin: 0;
    padding: 0;
    outline: 1px dotted red;


    img:hover{
        cursor: pointer;
    }

    div#header {
        width: 100%;
        height: 800px;
        background-color: black;
        padding-top: 10px;
        background-size: 100% 100%;
        background-repeat: no-repeat;

        div#menu{
            width: 500px;
            height: 300px;
            background-color: grey;
            margin: 0px auto;
            margin-top: 200px;


            h1{
                color: white;
                text-align: center;
            }

            button{
                height: 30px;
                width: 200px;
                margin: 20px;
            }

        }
    }


}