JavaScriptを使ったレスポンシブ対応メニュー

HTMLページで、レスポンシブに対応したナビメニューを作ろうとしています。
デスクトップサイズではマウスホバーによるメニュー開閉、スマートフォンサイズでは開閉のためのボタンが現れ、それを押すことでメニューを表示する予定です。

そのまま作るとスマートフォンサイズのときにメニューを閉じた後、デスクトップサイズまで画面を広げるとメニューは消えたままなので操作できなくなってしまいます。
逆にデスクトップでホバーアウトでメニューを閉じるとスマートフォンサイズではメニューが閉じたままになります。

メディアクエリで !important を使うと開閉ができなくなってしまうので、ウィンドウのリサイズイベントをJavascript で拾ってブレークポイントで表示/非表示を切り替えるなどあるかと思いますが、こういったケースではどのようにするのが一般的なのでしょうか？

HTML
1<!DOCTYPE html>
2<html>
3
4<head>
5    <meta charset="utf-8">
6    <title></title>
7    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
8    <style rel="stylesheet">
9    #menu {
10        background-color: aliceblue;
11        display: block;
12        position: relative;
13        height: 30px;
14        line-height: 30px;
15        width:300px;
16    }
17
18    #menu ul {
19        display: block;
20        margin: 0;
21        width: 100%;
22        position: absolute;
23        left: 0;
24        top: 30px;
25    }
26    
27    #menu-button {
28        display: inline;
29    }
30
31    @media (min-width: 768px) {
32        #menu ul {
33            display: none;
34        }
35
36        #menu-button {
37            display: none;
38        }
39    }
40    </style>
41</head>
42
43<body>
44    <p><button id="menu-button">Menu</button></p>
45    <div id="menu">
46        <div>MENU</div>
47        <ul>
48            <li>menu 1</li>
49            <li>menu 2</li>
50            <li>menu 3</li>
51        </ul>
52    </div>
53    <script>
54        $(function () {
55            $('#menu').hover(function(){
56                if (window.matchMedia('(min-width: 768px)').matches) {
57                    $('#menu ul').slideDown('fast');
58                }
59            }, function(){
60                if (window.matchMedia('(min-width: 768px)').matches) {
61                    $('#menu ul').slideUp('fast');
62                }
63            });
64
65            $('#menu-button').on('click', function(){
66                $('#menu').toggle();
67            });
68        });
69    </script>
70</body>
71</html>