Gray semi transparent div covering links in dropdown menu

Whenever the website is loaded in mobile everything initially loads fine. However, once the user clicks the nav menu and it drops down, all inks are about 80% covered by a semi transparent dark gray div. The links are still clickable, but it definitely makes for a crappy mobile user experience.

I’m currently using the theme “Responsive” in WordPress. THe problem may be caused by some CSS I added/edited a few months back to align nav items center of their container. Granted, I ran through “inspect element”, disabled everything I could and still couldn’t get the div to go away.

Since I’m still not sure where exactly this problem stems from, here’s code related to the classes/main suspects “menu” and “main-nav”:

.js .main-nav {
    clear: both;
    position: relative;
    margin: 0 auto;
    background-color: #585858;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#585858), to(#3d3d3d));
    background-image: -webkit-linear-gradient(top, #585858, #3d3d3d);
    background-image: -moz-linear-gradient(top, #585858, #3d3d3d);
    background-image: -ms-linear-gradient(top, #585858, #3d3d3d);
    background-image: -o-linear-gradient(top, #585858, #3d3d3d);
    background-image: linear-gradient(top, #585858, #3d3d3d);

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#585858, endColorstr=#3d3d3d);
}

.js .main-nav .menu {
    display: none;
    position: absolute;
    z-index: 1000;
    top: 30px;
    width: 100%;
}

.js .main-nav .menu ul {
    margin-top: 1px;
}

.js .main-nav .menu li {
    float: none;
    border: none;
    background-color: #fff;
}

.js .main-nav .menu li a {
    height: 45px;
    padding: 0 15px;
    border: none;
    border-bottom: 1px solid #f5f5f5;
    color: #444;
    text-shadow: none;
    font-size: 13px;
    font-weight: normal;
    line-height: 45px;
    text-align: left;
    cursor: pointer;
}

.js .main-nav .menu li.current_page_item,
.js .menu .current_page_item a,
.js .menu .current-menu-item a {
    background-color: #f5f5f5;
}

.js .main-nav .menu li li:hover {
    background: none !important;
}

.js .main-nav .menu li li a {
    position: relative;
    padding: 0 10px 0 30px;
}

.js .main-nav .menu li li li a {
    position: relative;
    padding: 0 10px 0 40px;
}

.js .main-nav .menu li a:hover,
.js .main-nav .menu li li a:hover {
    background-color: #f5f5f5 !important;
    background-image: none;

    filter: none;
}

.js .main-nav .menu li li a::before {
    position: absolute;
    top: 0;
    left: 20px;
    content: "2013";
}

.js .main-nav .menu li li li a::before {
    position: absolute;
    top: 0;
    left: 20px;
    content: "2013";
}

.js .main-nav .menu li li li a::after {
    position: absolute;
    top: 0;
    left: 30px;
    content: "2013";
}

.js .main-nav .menu li ul {
    visibility: visible;
    position: static;
    background-color: #fff;
}

.js .main-nav .menu ul {
    min-width: 0;
}

.js .main-nav #responsive_current_menu_item {
    display: block;
    padding: 5px 40px 5px 10px;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

.js .main-nav a#responsive_menu_button {
    display: block;
    position: absolute;
    top: 0;
    left: 100%;
    width: 23px;
    height: 30px;
    margin-left: -30px;
    background: url("../images/select-icons.png") 0 5px no-repeat;
    cursor: pointer;
}

.js .main-nav a#responsive_menu_button.responsive-toggle-open {
    background: url("../images/select-icons.png") 0 -46px no-repeat;
}

Screenshot: http://i58.tinypic.com/23vlxmv.png

URL: http://www.medallionenergy.com

Please let me know if any additional info will be needed. Thanks!