rmaclennan
22 Mar 2011, 06:58 PM
Hey Guys,
I have made this menu using HTML and CSS to use in a WordPress theme header for a website I am making. It works fine with Firefox and Chrome but no matter what I do I can't seem to get the menu to stay shown when I scroll down to try to select an item from the sub-menu. When you hover over the item it will show the sub-menus fine, its only when you move your mouse down to select something it disappears again.
I am not very skilled with CSS so I am wondering if there is maybe some code I am missing to make this work in IE.. any help would be much appreciated.
The website is http://www.abettermortgage4u.com if you would like to take a look in IE to see what I'm talking about, and my menu code is below:
------------------------------------------------------------------
<style type="text/css">
<!--
ul.topmenu, ul.topmenu ul {
display: block;
margin: 10px;
padding: 10px;
background-color: #04214b;
}
ul.topmenu li {
display: inline;
list-style: none;
position: relative;
margin: 0px;
padding : 0px 15px 0px 0px;
}
-->
</style>
<style type="text/css">
<!--
ul.topmenu li ul {
display: block;
position: absolute;
left: 0;
top: 1em;
visibility: hidden;
width: 13em;
z-index: 1000;
background-color : #04214b;
border-top: 0;
}
-->
</style>
<style type="text/css">
<!--
ul.topmenu a {
color : #FFFFFF;
font-weight: bold;
font-size: 14px;
} ul.topmenu li ul li {
margin: 0 0 0 -1.5em;
padding: 0;
display: block;
width: 100%;
margin : 0px 0px 5px 0px;
background-color : #04214b;
color : #FFFFFF;
}
ul.topmenu li ul li a {
display: block;
margin: 0;
padding: 0 0 20 5%;
width: 100%;
width: 95%;
color : #FFFFFF;
}
ul.topmenu li.submenu:hover { padding-bottom: 30em; } ul.topmenu li.submenu:hover ul { left: 0; visibility: visible; } ul.topmenu li.submenu:hover ul li { margin-bottom: 0px; } ul.topmenu li.submenu:hover ul li:hover { background-color: #032f5f; } -->
</style>
<ul class="topmenu">
<li><a href="http://www.abettermortgage4u.com/home/">Home</a></li>
<li class="submenu"><a href="http://www.abettermortgage4u.com/mortgage-solutions/">Mortgage Solutions</a>
<ul>
<li><a href="http://www.abettermortgage4u.com/right-mortgage/">Right Mortgage</a></li>
<li><a href="http://www.abettermortgage4u.com/smart-mortgage/">Smart Mortgage</a></li>
<li><a href="http://www.abettermortgage4u.com/mortgage-refinancing/">Mortgage Refinancing</a></li>
<li><a href="http://www.abettermortgage4u.com/purchase-a-home-or-condo/">Purchase A Home Or Condo</a></li>
<li><a href="http://www.abettermortgage4u.com/mortgage-renewals">Renew Your Mortgage</a></li>
</ul>
</li>
<li><a href="http://www.abettermortgage4u.com/mortgage-rates/">Mortgage Rates</a></li>
<li><a href="http://www.abettermortgage4u.com/mortgage-calculators/">Mortgage Calculators</a></li>
<li class="submenu"><a href="http://www.abettermortgage4u.com/mortgage-resources/">Education & Resources</a>
<ul>
<li><a href="http://www.abettermortgage4u.com/credit-fundamentals/">Credit Fundamentals</a></li>
<li><a href="http://www.abettermortgage4u.com/your-mortgage-matters/">Your Mortgage Matter$</a></li>
</ul>
</li>
<li class="submenu"><a href="http://www.abettermortgage4u.com/about-us/">About Us</a>
<ul>
<li><a href="http://www.abettermortgage4u.com/testimonials/">Testimonials</a></li>
<li><a href="http://www.abettermortgage4u.com/privacy-policy/">Privacy Policy</a></li>
</ul>
</li>
<li><a href="http://www.abettermortgage4u.com/contact-us/">Contact Us</a></li>
</ul>
----------------------------------------------------------------------
Thanks for anyone who can help!!
Ryan MacLennan
I have made this menu using HTML and CSS to use in a WordPress theme header for a website I am making. It works fine with Firefox and Chrome but no matter what I do I can't seem to get the menu to stay shown when I scroll down to try to select an item from the sub-menu. When you hover over the item it will show the sub-menus fine, its only when you move your mouse down to select something it disappears again.
I am not very skilled with CSS so I am wondering if there is maybe some code I am missing to make this work in IE.. any help would be much appreciated.
The website is http://www.abettermortgage4u.com if you would like to take a look in IE to see what I'm talking about, and my menu code is below:
------------------------------------------------------------------
<style type="text/css">
<!--
ul.topmenu, ul.topmenu ul {
display: block;
margin: 10px;
padding: 10px;
background-color: #04214b;
}
ul.topmenu li {
display: inline;
list-style: none;
position: relative;
margin: 0px;
padding : 0px 15px 0px 0px;
}
-->
</style>
<style type="text/css">
<!--
ul.topmenu li ul {
display: block;
position: absolute;
left: 0;
top: 1em;
visibility: hidden;
width: 13em;
z-index: 1000;
background-color : #04214b;
border-top: 0;
}
-->
</style>
<style type="text/css">
<!--
ul.topmenu a {
color : #FFFFFF;
font-weight: bold;
font-size: 14px;
} ul.topmenu li ul li {
margin: 0 0 0 -1.5em;
padding: 0;
display: block;
width: 100%;
margin : 0px 0px 5px 0px;
background-color : #04214b;
color : #FFFFFF;
}
ul.topmenu li ul li a {
display: block;
margin: 0;
padding: 0 0 20 5%;
width: 100%;
width: 95%;
color : #FFFFFF;
}
ul.topmenu li.submenu:hover { padding-bottom: 30em; } ul.topmenu li.submenu:hover ul { left: 0; visibility: visible; } ul.topmenu li.submenu:hover ul li { margin-bottom: 0px; } ul.topmenu li.submenu:hover ul li:hover { background-color: #032f5f; } -->
</style>
<ul class="topmenu">
<li><a href="http://www.abettermortgage4u.com/home/">Home</a></li>
<li class="submenu"><a href="http://www.abettermortgage4u.com/mortgage-solutions/">Mortgage Solutions</a>
<ul>
<li><a href="http://www.abettermortgage4u.com/right-mortgage/">Right Mortgage</a></li>
<li><a href="http://www.abettermortgage4u.com/smart-mortgage/">Smart Mortgage</a></li>
<li><a href="http://www.abettermortgage4u.com/mortgage-refinancing/">Mortgage Refinancing</a></li>
<li><a href="http://www.abettermortgage4u.com/purchase-a-home-or-condo/">Purchase A Home Or Condo</a></li>
<li><a href="http://www.abettermortgage4u.com/mortgage-renewals">Renew Your Mortgage</a></li>
</ul>
</li>
<li><a href="http://www.abettermortgage4u.com/mortgage-rates/">Mortgage Rates</a></li>
<li><a href="http://www.abettermortgage4u.com/mortgage-calculators/">Mortgage Calculators</a></li>
<li class="submenu"><a href="http://www.abettermortgage4u.com/mortgage-resources/">Education & Resources</a>
<ul>
<li><a href="http://www.abettermortgage4u.com/credit-fundamentals/">Credit Fundamentals</a></li>
<li><a href="http://www.abettermortgage4u.com/your-mortgage-matters/">Your Mortgage Matter$</a></li>
</ul>
</li>
<li class="submenu"><a href="http://www.abettermortgage4u.com/about-us/">About Us</a>
<ul>
<li><a href="http://www.abettermortgage4u.com/testimonials/">Testimonials</a></li>
<li><a href="http://www.abettermortgage4u.com/privacy-policy/">Privacy Policy</a></li>
</ul>
</li>
<li><a href="http://www.abettermortgage4u.com/contact-us/">Contact Us</a></li>
</ul>
----------------------------------------------------------------------
Thanks for anyone who can help!!
Ryan MacLennan