I'm implementing a menu in the middle of a web page (note: this is not a top navigation menu).

So this is the default state:
[![enter image description here](https://i.stack.imgur.com/3arql.png)](https://i.stack.imgur.com/3arql.png)

And people can click on other menu items to view different content.
[![enter image description here](https://i.stack.imgur.com/vGILN.png)](https://i.stack.imgur.com/vGILN.png)

I tried writing the following code for one menu item and it is working... but is there an elegant solution that works for every menu item?

```
<script> 
    $(function() {
      $("#menu3").click(function(){
          $(this).css({
            'text-decoration':'underline',
            'font-family':'Gotham-Medium'
          });
          $("#content1").hide();
          $("#content3").show();          
      });
    }); 
</script>

  <nav class="menu">
    <ul>
      <li><div id="menu1">menu1</div></li>
      <li><div id="menu2">menu2</div></li>
      <li><div id="menu3">menu3</div></li>
      <li><div id="menu4">menu4</div></li>
    </ul>
  </nav>

```

Also, I wrote the following code for menu item hover state. Very strangely, things work with this code:

```
<script> 
    $(function() {
      $("#menu3").mouseenter(function(){
          $(this).css({
            'text-decoration':'underline',
            'font-family':'Gotham-Medium'
          }); 
      });
    }); 
</script>

```

BUT once I add the mouseleave code.... things stop working (including mouseenter enter state, so nothing happens when you hover over menu). Not sure what's going on or how to fix it. Thanks in advance.

```
<script> 
    $(function() {
      $("#menu3").mouseenter(function(){
          $(this).css({
            'text-decoration':'underline',
            'font-family':'Gotham-Medium'
          }); 
      $("#menu3").mouseleave(function(){
          $(this).css({
            'text-decoration':'none',
            'font-family':'Gotham-Medium'
          }); 
      });
    }); 
</script>

```