Problemas con Slider tapa el menú cuando se ve en móviles (smartphones)

Hola tengo 2 problemas:

1. Cuando navego mi Web en un celular/móvil/smartphone se ve mal porque el SLIDER tapa al MENÚ ocupando todo el cuadro.

2. El MENÚ DESPLEGABLE no se puede navegar porque aparece debajo del SLIDER.

*Ya cambié valores en CSS de la z-index del MENÚ a 999

——————————————-
Aquí el código del SLIDER CSS:

/* Revolution Slider
———————————————————————-*/
.sliderr {
width: 100%;
position: relative;
}
/* Nivo Slider
———————————————————————-*/
.nivoSlider {
position:relative;
width:100%;
height:auto;
overflow: hidden;
box-shadow: none !important
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
max-width: none;
}
.nivo-main-image {
display: block !important;
position: relative !important;
width: 100% !important;
}

/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
background:white;
-ms-filter: «progid:DXImageTransform.Microsoft.Alpha(Opacity=0)»;
opacity:0;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
top:0;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
overflow:hidden;
}
.nivo-box img { display:block; }

/* Caption styles */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
width:100%;
z-index:8;
padding: 10px 20px;
-ms-filter: «progid:DXImageTransform.Microsoft.Alpha(Opacity=80)»;
opacity: 0.8;
overflow: hidden;
display: none;
-moz-opacity: 0.8;
filter:alpha(opacity=0.8);
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3…) */
.nivo-controlNav {
text-align:center;
padding: 15px 0;
}
.nivo-controlNav a {
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}

.flex-direction-nav a:hover {background-color: transparent !important;}

/* Flex Slider
———————————————————————-*/
.wpb_gallery_slides.flexslider {
border: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
-webkit-border-radius: none !important;
-moz-border-radius: none !important;
border-radius: none !important;
}
.wpb_gallery_slides .flex-control-nav li {
padding: 0 !important;
}

.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}

/* FlexSlider Necessary Styles */
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {display: block; width: 100%}
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: «.»; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}

/* If you are not using another script, such as Modernizr, make sure you
* include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}

—————————————–
*No sé si copié demás.

Este es el del MENÚ CSS

/* Superfish
———————————————————————-*/
.sf-menu, .sf-menu * {
margin: 0;
padding: 0;
list-style: none;
z-index: 999;
}
.sf-menu {
line-height: 1.0;
float: right;
padding: 0;
position: relative;
margin: 38px 0;
}
.sf-menu ul {
position: absolute;
top: -999em;
width: 200px;
}
.sf-menu ul li {
width: 100%;
margin: 0;
padding: 10px 0;
}
.sf-menu li li.current a {
background: none !important
}
.sf-menu li:hover { visibility: inherit }
.sf-menu li {
float: left;
position: relative;
margin: 0 0 0 14px;
padding: 0
}
.sf-menu li li {
border-top-width: 1px;
border-top-style: solid;
border-bottom-width: 1px;
border-bottom-style: solid;
margin:0;
padding: 0;
-moz-transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease
}
.sf-menu li li:first-child {border-top: 0}
.sf-menu li li:last-child {border-bottom: 1px solid transparent}
.sf-menu li li li:first-child {border-top: 1px solid transparent}
.sf-menu li li a {
padding: 8px 15px;
line-height: 20px;
color: #fff;
text-transform: none;
letter-spacing: 0;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.sf-menu i {
margin-right: 8px
}
.sf-menu a {
display: block;
position: relative;
color: #000;
text-transform: uppercase;
font-size: 12px;
font-weight: 400;
padding: 10px 16px;
margin: 0;
border-radius: 6px;
border: 1px solid transparent;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.sf-menu li li a {
margin: 0;
border:0
}
.sf-menu > li:hover > a, .sf-menu > li > a:hover {
color: #fff !important;
border-width: 1px;
border-style: solid;
}
#menu > li > a:hover, #menu > li > a:active, .sf-menu > li.current_page_item > a, .sf-menu > li.current_page_item > a:visited,
.sf-menu > li.current-menu-parent > a {
color: #fff !important;
}
.sfHover:hover > a {
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.sf-menu li .current-menu-parent > a {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
border: none;
}
.sf-menu > li.current-menu-parent > a {
color: #fff;
border-width: 1px;
border-style: solid;
}

.sf-menu li li:hover > a, .sf-menu li li > a:hover, .sf-menu li li.current > a {
color: #fff;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
}
.sf-menu li li a {
font-size: 12px;
font-weight: normal;
margin-bottom: 0;
}
.sf-menu li li:first-child {
border-top-left-radius: 0;
border-top-right-radius: 6px;
}
.sf-menu li li:last-child {
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
}
.sfHover:hover {
border-bottom-right-radius: 0 !important
}
.sfHover > .sf-with-ul {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
left: 0px;
z-index: 999;
top: 34px;
padding: 0;
}
.sf-menu li:hover ul li ul,
.sf-menu li.sfHover ul li ul,
.sf-menu li:hover ul li ul li ul,
.sf-menu li.sfHover ul li ul li ul {
left: 200px;
z-index: 999;
top: -1px !important
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
left: 200px;
top: -1px !important;
padding: 0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
left: 200px;
top: 0;
}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
outline: 0;
}

/*** arrows **/
.sf-menu a.sf-with-ul {padding-right: 30px;min-width: 1px}
.sf-sub-indicator {
position: absolute;
display: block;
overflow: hidden;
}
a > .sf-sub-indicator {
position: absolute;
right: 8%;
top: 12px;
font-size: 8px;
}
li li a .sf-sub-indicator {
top: 10px;
right: 1%;

———————————————

Todo en un mismo fichero Style.css

Espero alguien me pueda ayudar. Muchas gracias