1
メガメニューにエフェクトを追加しようとしています。 （それは[Health]タブの下にあります）、左側のリンクにカーソルを合わせると、右側のセクションが表示されます。他のスタックオーバーフローの例を見ると、私は：hover + divを使ってdivディスプレイを作ると、それはうまくいくはずですが、なんらかの理由でそうでないことがわかりました。いくつかの援助は非常に高く評価されるでしょう！メガメニュー表示div on hover
@import url("http://fonts.googleapis.com/css?family=Roboto");
/* mini reset */
.nav,
.nav a,
.nav ul,
.nav li,
.nav div,
.nav form,
.nav input {
\t border: none;
\t margin: 0;
\t outline: none;
\t 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 {
\t cursor: default;
\t display: inline-block;
\t position: relative;
\t z-index: 500;
}
/* menu list */
.nav > li {
\t display: block;
\t 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"] {
\t background: #0a64a2 url(../img/search-icon.png) no-repeat center center;
\t border-radius: 0 3px 3px 0;
\t cursor: pointer;
\t display: block;
\t float: left;
\t height: 54px;
\t padding: 0 25px;
\t -webkit-transition: all .3s ease;
\t transition: all .3s ease;
\t 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;
\t transition: all .3s ease .15s;
\t visibility: hidden;
\t width: 100%;
}
.nav > li:hover > div {
\t opacity: 1;
\t overflow: visible;
\t visibility: visible;
}
/* menu content styles */
.nav .nav-column {
\t float: left;
\t padding: 2.5%;
\t width: 25%;
}
.nav .nav-column h3 {
\t color: #372f2b;
\t font-size: 14px;
\t font-weight: bold;
\t line-height: 18px;
\t margin: 20px 0 10px 0;
\t text-transform: uppercase;
}
.nav .nav-column h3.orange {
color: #ff722b;
}
.nav .nav-column li a {
\t color: #888;
\t display: block;
\t font-weight: bold;
\t line-height: 26px;
}
.nav .nav-column li a:hover {
color: #8cbd34;
}
.nav a:hover > .menuheader {
\t color: #8cbd3a;
}
.nav a p {
\t color: black;
\t font-weight: normal;
}
.menuheader {
\t font-weight: bold !important;
\t margin-bottom: 0px;
\t margin-top: 5px;
\t font-size: 1.2em;
\t line-height: 18px;
}
.nav-column.info {
\t width: 75%;
}
.nav-column.info a {
\t display: none !important;
}
.healthlink1:hover + .healthinfo1 {
\t display: block !important;
}<link href="https://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.min.css" rel="stylesheet"/>
<div class="menu-wrapper">
<ul class="nav">
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">Health</a>
<div>
<div class="nav-column left">
<ul>
<li class="healthlinks">
<a href="#" class="healthlink1">Asthma</a>
<a href="#" class="healthlink2">Birth Defects</a>
<a href="#">Cancer</a>
<a href="#">Carbon Monoxide Poisoning</a>
<a href="#">COPD</a>
<a href="#">Heart Attacks</a>
<a href="#">Heat Related Illness</a>
<a href="#">Lead Poisoning</a>
<a href="#">Oral Health</a>
<a href="#">Reproductive Outcomes</a>
</li>
</ul>
</div><!-- /nav-column -->
<div class="nav-column info left">
<ul>
<li>
<a href="#" class="healthinfo1">Asthma info</a>
<a href="#" class="healthinfo2">Birth Defects info</a>
<a href="#">Cancer info</a>
<a href="#">Carbon Monoxide Poisoning info</a>
<a href="#">COPD info</a>
<a href="#">Heart Attacks info</a>
<a href="#">Heat Related Illness info</a>
<a href="#">Lead Poisoning info</a>
<a href="#">Oral Health info</a>
<a href="#">Reproductive Outcomes info</a>
</li>
</ul>
</div><!-- /nav-column -->
</div>
</li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
</div>
しかし、右サイドのすべてが、上に乗っているリンクの情報の代わりに表示されています – Felicyia