I am using a flyout menu on this page: http://www.orientalhealthsolutions.com/
The center navigation has two flyout links: The one for Immune System is the problematic one. When you mouse over Immune System the sub menu flies out, but it is only active over the first two items. If you try and mouse over Food Sensitivity it may or may not be accessible.
I did the code for it the same way I did for Women’s Health which works correctly.
Here is the HTML:
<ul id="nav-one" class="dropmenu">
<li id="brain"><a href="{site_url}conditions-treated/brain-and-memory-neurological"><img class="gold-dot" src="/photos/gold-dot.png" alt="" /> Brain & Memory</a></li>
<li id="digestive"><a href="/conditions-treated/digestive-gut-disorder"><img class="gold-dot" src="/photos/gold-dot.png" alt="" /> Digestive Disorders</a></li>
<li id="diabetes"><a href="/conditions-treated/diabetes-blood-sugar-disorder"><img class="gold-dot" src="/photos/gold-dot.png" alt="" /> Diabetes & Blood Sugar</a></li>
<li id="immune"><a href="#"><img class="gold-dot" src="/photos/gold-dot.png" alt="" /> Immune System</a>
<ul>
<li><a href="/conditions-treated/immune-auto-immune-disorders">Autoimmune</a></li>
<li><a href="/conditions-treated/immune-allergies">Allergies</a></li>
<li><a href="/conditions-treated/immune-food-sensitivities">Food Sensitivity</a></li>
</ul>
</li>
<li id="fertility"><a href="/conditions-treated/fertility-Infertility-female-male"><img class="gold-dot" src="/photos/gold-dot.png" alt="" /> Fertility</a></li>
<li id="womens-health"><a href="/conditions-treated/"><img class="gold-dot" src="/photos/gold-dot.png" alt="" /> Women's Health</a>
<ul>
<li><a href="/conditions-treated/womens-health-PCOS-endometriosis-menstrual-disorder">Women’s health issues</a></li>
<li><a href="/conditions-treated/womens-health-menopause">Menopause</a></li>
<li><a href="/conditions-treated/womens-health-breast-pain-associated-with-lactation">Lactation breast pain</a></li>
</ul>
</li>
<li id="mens-health"><a href="/conditions-treated/andropause-male-menopause"><img class="gold-dot" src="/photos/gold-dot.png" alt="" /> Men's Health</a></li>
<li id="pain"><a href="/conditions-treated/pain-musculo-skeletal-pain"><img class="gold-dot" src="/photos/gold-dot.png" alt="" /> Pain</a></li>
<li id="cancer"><a href="/conditions-treated/cancer-side-effects-of-chemotherapy-radiation"><img class="gold-dot" src="/photos/gold-dot.png" alt="" /> Cancer</a></li>
</ul>
Here is the CSS:
ul#nav-one {
width: 240px;
height: 393px;
position: absolute;
top: 0;
left: 0;
z-index: 100;
}
ul#nav-one li#brain { position: absolute; top: 30px ; left: 110px;}
ul#nav-one li#digestive { position: absolute; top: 70px ; left: 65px; }
ul#nav-one li#diabetes { position: absolute; top: 110px ; left: 35px; }
ul#nav-one li#immune { position: absolute; top: 150px ; left: 19px; }
ul#nav-one li#fertility { position: absolute; top: 190px ; left: 12px; }
ul#nav-one li#womens-health { position: absolute; top: 230px ; left: 18px; }
ul#nav-one li#mens-health { position: absolute; top: 270px ; left: 35px; }
ul#nav-one li#pain { position: absolute; top: 310px ; left: 60px; }
ul#nav-one li#cancer { position: absolute; top: 350px ; left: 110px;}
ul#nav-one li#womens-health,
ul#nav-one li#immune { padding-right: 90px; }
ul#nav-one li a:link,
ul#nav-one li a:visited { color: #710006; text-decoration: none;}
ul#nav-one li a:hover { text-decoration: underline; }
ul#nav-one li#womens-health:hover { border-bottom: 1px solid #8a2d31; }
ul#nav-one li#womens-health a:hover { text-decoration: none; }
ul#nav-one li#womens-health ul li a:hover { text-decoration: underline; }
ul#nav-one li#immune:hover { border-bottom: 1px solid #8a2d31; }
ul#nav-one li#immune a:hover { text-decoration: none; }
ul#nav-one li#immune ul li a:hover { text-decoration: underline; }
ul.dropmenu {
float: left;
margin: 0px;
padding: 0px;
display: block;
position: relative;
}
.dropmenu li a, .dropmenu li{
display: block;
}
.dropmenu li{
list-style: none;
position: relative;
top: 1px;
margin-bottom: 1px;
}
.dropmenu li span {
display:block;
float:right;
height:10px;
position:absolute;
right:10px;
top:13px;
width:10px;
}
.dropmenu li a, .dropmenu li div {
display:block;
text-decoration:none;
width: 100%;
}
/* Submenu */
.dropmenu li ul {
display: none;
position: absolute;
width: 148px;
left: 150px;
top: 22px;
padding: 0px;
margin: 0px;
}
ul#nav-one li ul li { padding: 5px 0; }
.dropmenu li:hover > ul {
display: block;
margin-left: -6px;
height: 100px;
border: 1px solid #850006;
background: rgba(247,238,219,0.9);
}
.dropmenu li ul li, .dropmenu li ul li a {
float: none;
color: #0657AD;
text-transform: none;
text-indent: 10px;
display: block;
margin: 0;
padding: 0;
}
.dropmenu li ul li{
_display: inline;
}
.dropmenu li ul li a:link,
.dropmenu li ul li a:visited {
color: #850006;
display:block;
text-decoration:none;
}
.center_content { width: 100%; margin: 0; padding: 0; }
#placeholder { width: 170px; height: 300px; float: left; }
#topics { float: right; width: 82%; border-top: 1px solid #d4d8b5; }
.health-topic {
width: 32%;
float: left;
border-right: 1px solid #d3d8b2;
margin: 15px 10px 10px 0;
}
.health-topic.last { margin-right: 0; padding-right: 0; border-right: none; }
.health-topic h4 {
color: #6a0506;
font-size: 1.4em;
font-weight: normal;
margin-bottom: 0; text-shadow: #eaeaea 1px 1px 1px; }
.health-topic h4 {
text-align: center;
margin-top: 15px;
line-height: 1em;
margin-bottom: 5px;
padding-bottom: 0;
}
.health-topic p {
text-align: center;
line-height: 1em;
margin-bottom: 20px;
margin-top: 0;
padding-top: 0;
}
.health-topic img { max-width: 75%; margin: 0 auto; }
Any help making Food Sensitivity consistently touchable, will be appreciated.
Thanks.
The problem is caused by the
padding-right: 90px. When you reach Food Sensitivity you are now hovering over the padding of the next item so the menu drops out. An easy solution is to apply your padding on:hoverinstead.Just change this rule:
to