mega menu display div on hover - css

Question

i'm trying to add an effect to a mega menu. (it's under the health tab) when you hover over a link on the left, a section on the right is supposed to appear. looking at other stack overflow examples i found that if i used a:hover + div to make the div display, that should work, but for some reason it isn't. some assistance would be greatly appreciated!
#import url("http://fonts.googleapis.com/css?family=Roboto");
/* mini reset */
.nav,
.nav a,
.nav ul,
.nav li,
.nav div,
.nav form,
.nav input {
border: none;
margin: 0;
outline: none;
padding: 0;
}
.nav a {
text-decoration: none;
}
.nav li {
list-style: none;
}
/* menu container */
.nav,
input {
font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
}
.nav {
cursor: default;
display: inline-block;
position: relative;
z-index: 500;
}
/* menu list */
.nav > li {
display: block;
float: left;
}
/* menu links */
.nav > li > a {
background: #0a64a2;
border-left: 1px solid #0f8ee2 !important;
display: block;
color: #fcfcfc;
font-weight: bold;
height: 54px;
line-height: 54px;
padding: 0 20px;
position: relative;
text-shadow: 0 0 1px rgba(0,0,0,.35);
-webkit-transition: all .3s ease;
transition: all .3s ease;
z-index: 510;
}
.nav > li:hover > a {
background: #8cbd3a;
}
.nav > li:first-child > a {
border-left: none;
border-radius: 3px 0 0 3px;
}
/* search form */
.nav > li.nav-search > form {
border-left: 1px solid #0f8ee2;
height: 54px;
position: relative;
width: inherit;
z-index: 510;
}
.nav > li.nav-search input[type="text"] {
background: #0a64a2;
display: block;
font-weight: bold;
font-size: 14px;
float: left;
height: 54px;
line-height: 24px;
padding: 15px 0 !important;
text-shadow: 0 0 1px rgba(0,0,0,.35);
-webkit-transition: all .3s ease 1s;
transition: all .3s ease 1s;
width: 1px;
color: #ebebeb;
}
.nav > li.nav-search input[type="text"]:focus {
color: #fcfcfc;
border:none;
box-shadow: none;
}
.nav > li.nav-search input[type="text"]:focus,
.nav > li.nav-search:hover input[type="text"] {
padding: 15px 20px !important;
-webkit-transition: all .3s ease .1s;
transition: all .3s ease .1s;
min-width: 110px;
width: 60%;
color: #ebebeb;
}
.nav > li.nav-search input[type="submit"] {
background: #0a64a2 url(../img/search-icon.png) no-repeat center center;
border-radius: 0 3px 3px 0;
cursor: pointer;
display: block;
float: left;
height: 54px;
padding: 0 25px;
-webkit-transition: all .3s ease;
transition: all .3s ease;
width: 20px;
}
.nav > li.nav-search input[type="submit"]:hover {
background-color: #4b4441;
}
/* menu dropdown */
.nav > li > div {
background: #fff;
border: 1px solid #ddd;
border-radius: 0 0 3px 3px;
position: absolute;
display: block;
left: 0;
opacity: 0;
overflow: hidden;
top: 50px;
-webkit-transition: all .3s ease .15s;
transition: all .3s ease .15s;
visibility: hidden;
width: 100%;
}
.nav > li:hover > div {
opacity: 1;
overflow: visible;
visibility: visible;
}
/* menu content styles */
.nav .nav-column {
float: left;
padding: 2.5%;
width: 25%;
}
.nav .nav-column h3 {
color: #372f2b;
font-size: 14px;
font-weight: bold;
line-height: 18px;
margin: 20px 0 10px 0;
text-transform: uppercase;
}
.nav .nav-column h3.orange {
color: #ff722b;
}
.nav .nav-column li a {
color: #888;
display: block;
font-weight: bold;
line-height: 26px;
}
.nav .nav-column li a:hover {
color: #8cbd34;
}
.nav a:hover > .menuheader {
color: #8cbd3a;
}
.nav a p {
color: black;
font-weight: normal;
}
.menuheader {
font-weight: bold !important;
margin-bottom: 0px;
margin-top: 5px;
font-size: 1.2em;
line-height: 18px;
}
.nav-column.info {
width: 75%;
}
.nav-column.info a {
display: none !important;
}
.healthlink1:hover + .healthinfo1 {
display: block !important;
}
<link href="https://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.min.css" rel="stylesheet"/>
<div class="menu-wrapper">
<ul class="nav">
<li>item</li>
<li>item</li>
<li>Health
<div>
<div class="nav-column left">
<ul>
<li class="healthlinks">
Asthma
Birth Defects
Cancer
Carbon Monoxide Poisoning
COPD
Heart Attacks
Heat Related Illness
Lead Poisoning
Oral Health
Reproductive Outcomes
</li>
</ul>
</div><!-- /nav-column -->
<div class="nav-column info left">
<ul>
<li>
Asthma info
Birth Defects info
Cancer info
Carbon Monoxide Poisoning info
COPD info
Heart Attacks info
Heat Related Illness info
Lead Poisoning info
Oral Health info
Reproductive Outcomes info
</li>
</ul>
</div><!-- /nav-column -->
</div>
</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>

Answer 1

.nav-column.info a {
display: none !important;
}
Issue with display: none !important;
Just remove it from css style and right div will be displayed.
https://jsfiddle.net/cyhog5ra/

Answer 2

ok so i found foundation 6 and it does exactly what i needed so to help anyone else who has this problem here's something that works!`
$(document).ready(function() {
$(document).foundation();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/css/foundation.css">
<div class = "row collapse">
<div class = "medium-3 columns">
<ul class = "tabs vertical" data-tabs id = "tabs_example">
<li class = "tabs-title is-active">text 1</li>
<li class = "tabs-title">text 2</li>
<li class = "tabs-title">text 3</li>
<li class = "tabs-title">text 4</li>
<li class = "tabs-title">text 5</li>
</ul>
</div>
<div class = "medium-9 columns">
<div class = "tabs-content vertical" data-tabs-content = "tabs_example">
<div class = "tabs-panel is-active" id = "tab1">
<p>First text</p>
</div>
<div class = "tabs-panel" id = "tab2">
<p>Second text</p>
</div>
<div class = "tabs-panel" id = "tab3">
<p>Third text</p>
</div>
<div class = "tabs-panel" id = "tab4">
<p>Fourth text</p>
</div>
<div class = "tabs-panel" id = "tab5">
<p>Five text</p>
</div>
</div>
</div>
`