Responsive virker fint på mobil, men ikke optimalt på tablet

Hej Eksperter,

Jeg har fået opsat en responsive hjemmeside.
Og den virker egentlig fint nok, ihvertfald på computer og mobiltelefoner.

Det eneste problem jeg har er, at når jeg ser siden på en tablet, for eksempel Ipad, så rykker menuen sig ned, overover indholdet af siden.
Det er meningen at den bare skal blive eller switche over til hvordan det ser ud på mobil, altså dvs. de tre linjer som indikerer det er en menu.

Jeg håber i kan hjælpe mig med at finde problemet og enten fortælle hvordan jeg får menuen til at blive der, eller hvad jeg skal ændre i koden for at få menuen til at ændres til mobilversionen med de 3 streger.

I kan også se fejlen hvis i går ind på siden og begynder at trække i browservinduet for at lave det lidt mindre.
Siden er på: www.artcirklen.dk

Her er CSS koden som er knyttet til menuen.

På forhånd tak.

/* =Menu
-------------------------------------------------------------- */

/*** Structure ***/
#access {
    display: block;
    margin: 1.5em 0 0 35px;
    padding: 1.625em 0;
    float: right;
    line-height: 1.725;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
#access ul,
#access ul * {
    margin: 0;
    padding: 0;
    list-style: none;
}
#access ul ul {
    position: absolute;
    top: -999em;
    width: 13em; /* left offset of submenus need to match (see below) */
}
#access ul ul li {
    width: 100%;
}
#access ul li:hover {
    visibility: inherit; /* fixes IE7 'sticky bug' */
}
#access ul li {
    display: inline-block;
    position: relative;
    margin-left: 14px;
}
#access ul li li {
    margin: 0;
}
#access ul a {
    display: block;
    position: relative;

    -webkit-transition: color ease .2s;
    -moz-transition: color ease .2s;
    -o-transition: color ease .2s;
    -ms-transition: color ease .2s;
}
#access ul li:hover ul,
#access ul li.sfHover ul {
    left: 0;
    top: 30px; /* match top ul list item height */
    z-index: 2;
}
#access ul li:hover li ul,
#access ul li.sfHover li ul {
    top: -999em;
}
#access ul li li:hover ul,
#access ul li li.sfHover ul {
    left: 16.5em; /* match ul width */
    top: 0;
}
#access ul li li:hover li ul,
#access ul li li.sfHover li ul {
    top: -999em;
}
#access ul li li li:hover ul,
#access ul li li li.sfHover ul {
    left: 10em; /* match ul width */
    top: 0;
}

/*** Style ***/
.menu {
    max-width: 1441px;
    margin: 0 auto;
}
#access ul {
    font-size: 13px;
    text-align: left;
    text-transform: uppercase;
}
#access ul a {
    text-decoration: none;
    padding: 0;
}
#access ul a  { /* visited pseudo selector so IE6 applies text colour*/
    color: #919191;
}
#access ul li ul {
    background: white;
    padding: 0.8em 1em 0.8em 1em;
    border: 1px solid #ababab;
}
#access ul li li {
    background: none;
    text-align: left;
    text-transform: uppercase;
    padding: 6px 0;
}
#access ul li li li {
    background: none;
}
#access ul li a:hover,
#access ul li.sfHover > a,
#access ul .current-menu-item > a,
#access ul .current_page_item > a {
    color: #ffffff;
    outline: 0;
}
#access ul .menu-item-object-custom.current_page_item > a {
    color: #ffffff;
}
#access ul .menu-item-object-custom.current-menu-item  a:hover,
#access ul .menu-item-object-custom.current_page_item  a:hover {
    color: #cccccc;
}
#access ul li li:hover,
#access ul li li.sfHover,
#access ul li li.current-menu-item,
#access ul li li.current_page_item {
    background: none;
    box-shadow: none;
    border-radius: 0;
}
#access ul li li a:hover,
#access ul li li.sfHover > a,
#access ul li .current-menu-item > a,
#access ul li .current_page_item > a {
    color: #ff7260;
}
#access ul li li a {
    font-size: 13px;
    font-weight: normal;
    padding: 0;

    -webkit-transition: all ease .2s;
    -moz-transition: all ease .2s;
    -o-transition: all ease .2s;
    -ms-transition: all ease .2s;
}
/*** Arrows **/
#access ul a.sf-with-ul {
    padding-right: 0.8em;
    min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
    position: absolute;
    display: block;
    right: 0;
    top: 1.05em;
    overflow: hidden;
    text-indent: -999em;
    width: 0;
    height: 0;
    border-width: 3px;
    border-style: solid;
    border-color: transparent;
    border-top: 4px solid #111;
    font-family: Arial !important;
    font-size: 11px !important;
    font-style: normal !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    color: white !important;
}
li li .sf-sub-indicator {
    width: 0;
    height: 0;
    right: .75em;
    text-indent: -999em;
    border-width: 3px 0 3px 5px;
    border-color: transparent transparent transparent #111;
}
a > .sf-sub-indicator {  /* give all except IE6 the correct values */
    top: 0.95em;
}
li li a > .sf-sub-indicator {  /* give all except IE6 the correct values */
    top: 0.75em;
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
    border-top-color: #ff7260;
}

/* point right for anchors in subs */
#access ul ul .sf-sub-indicator {
    border-top-color: #ff7260;
}
#access ul ul a > .sf-sub-indicator {
    background-position:  0 0;
    border-right-color: #ff7260;
    border-top-color: transparent;
    -webkit-transition: border-color ease .2s;
    -moz-transition: border-color ease .2s;
    -o-transition: border-color ease .2s;
    -ms-transition: border-color ease .2s;
}
/* apply hovers to modern browsers */
#access ul ul a:focus > .sf-sub-indicator,
#access ul ul a:hover > .sf-sub-indicator,
#access ul ul a:active > .sf-sub-indicator,
#access ul ul li:hover > a > .sf-sub-indicator,
#access ul ul li.sfHover > a > .sf-sub-indicator {
    border-left-color: #ff7260;
}


/* =Menu for mobile devises
-------------------------------------------------------------- */
#access-mobile {
    display: none;
    margin: 0 auto;
    text-align: left;
}
#mega-menu-dropdown {
    cursor: pointer;
    display: none;
    text-decoration: none;
    line-height: 4.425;
    padding: 0;
    float: right;
    margin:0.5em 0 0 0;
}
#mega-menu-dropdown span {
    float: right;
    color: #fff;
    font-size: 16px;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
}
#mega-menu-dropdown i {
    color: #fff;
    font-size: 16px;
    margin: 9px 0 0;
    vertical-align: 5%;
}
#access-mobile > div {
    background: #0c2d38;
    margin: 0;
}
#access-mobile ul {
    margin: 0;
    list-style: none;
    background: #0c2d38;
    margin: 0 auto;
    display: none;
    padding: 0 20px;
    clear: both;
    position: relative;
    z-index: 1000;
}
#access-mobile ul ul {
    display: block;
    margin: 0;
    padding: 0 0 0 14px;
}
#access-mobile li {
    border-top: 1px solid #163a46;
    display: block;
    float: none;
    margin: 0;
    padding: 0;
}
#access-mobile li:first-of-type {
    border: none;
}
#access-mobile li a {
    border: none;
    color: #919191;
    display: block;
    line-height: 3.25em;
    text-decoration: none;
    font-weight: normal;
    padding: 4px 0;
    font-size: 14px;
}
#access-mobile li li {
    border: none;
}
#access-mobile li li a {
    font-size: 12px;
}
#access-mobile .current_page_item a {
    color: #ffffff;
}
#access-mobile li a:active,
#access-mobile li a:hover {
    color: #ffffff;
}

/* Search Form */
#branding #searchform {
    float: right;
    padding: 1.325em 0;
}
#branding #s {
    float: right;
    padding: 4px 0 4px 28px;
    border-radius: 0;
    box-shadow: none;

    -webkit-transition: width .2s linear;
    -moz-transition: width .2s linear;
    -ms-transition: width .2s linear;
    -o-transition: width .2s linear;
}
#branding #s:focus {
    width: 132px;
}
#branding #searchsubmit {
    display: none;
}