Issues with Dropdown Menu
-
For reasons unknown to me, the dropdown menu on the website isn’t working properly. I am a novice and have had no luck.
Website: http://www.sfsusepal.org
If you notice the drop down menu drops even if the mouse isn’t hovering over the main menu titles. Can anyone help me with this? It’s an issue with some pages that have links near the top.
This is the section of the stylesheet I think corresponds to it.
/*DROP DOWN MENU*/
.topmenu {
background-image: url(“images/navbg.png”);
background-repeat: no-repeat;
margin: 0;
padding: 5px 0 0;
position: absolute;
z-index:50;
top: 100px;
right: 0;
left: 0;
width: 1050px;
height: 50px;
clear: both }
ul.dropdown li a {
color: #58595b;
text-decoration: none }
ul.dropdown li a:hover {
color: #fff }
/*
LEVEL ONE
*/
ul.dropdown {
font-size: 18px;
font-family: Arial, sans-serif, Helvetica;
font-weight: bold;
line-height: 37px;
text-align: center;
letter-spacing: -0.02em;
margin: 0;
padding: 0 0 0 20px;
position: relative;
width: 100%;
height: 37px }ul.dropdown li {
background: transparent;
margin: 0 0 0 10px;
padding: 0;
float: left;
zoom: 1 }
ul.dropdown a:hover {
color: #fff;
text-decoration: none }
ul.dropdown a:active {
color: #1a5a32 }
ul.dropdown li a {
color: #fff;
padding: 6px 12px }
ul.dropdown li:last-child a {
border-right: medium none }
/* Doesn’t work in IE */
ul.dropdown li.hover, ul.dropdown li:hover {
color: #58595b;
background-color: rgba(193,221,151,.9);
position: relative }
ul.dropdown li:hover, ul.dropdown li:hover a, ul.dropdown li:hover a {
color: #fff }
ul.dropdown li.hover a, ul.dropdown li ul a, ul.dropdown li:hover ul a {
color: #fff }
ul.dropdown li.hover a, ul.dropdown li ul a, ul.dropdown li:hover ul a {
color: #58595b }
ul.dropdown li ul li a:hover {
color: #fff }
ul.dropdown li.current_page_item a, ul.dropdown li.current_page_ancestor a {
color: #1a5a32 }
ul.dropdown li.menu-item-12 a {
color: #fff }
ul.dropdown li ul li.current_page_item a {
font-weight: bold;}
/*
LEVEL TWO
*/
ul.dropdown ul {
font-size: 14px;
font-family: Georgia, serif;
line-height: 14px;
background-color: rgba(193,221,151,.95);
text-align: center;
text-transform: none;
letter-spacing: 0;
visibility: hidden;
padding-bottom: 0;
position: relative;
top: 100%;
left: 0;
width: 159.8px;
border-top: 1px solid #9DC95A;
border-right: none;
border-bottom: none;
border-left: none }
ul.dropdown ul li {
color: #fff !important;
font-weight: normal;
margin: 0;
padding: 0;
float: none;
border-bottom: 1px solid #9DC95A }
ul.dropdown ul li.last-child {
border-bottom: none }
/* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a {
display: inline-block;
padding: 3px 12px 4px;
width: 151px;
border-right: medium none }
/*
LEVEL THREE
*/
ul.dropdown ul ul {
top: 0;
left: 50% }
ul.dropdown li:hover > ul {
visibility: visible }
The topic ‘Issues with Dropdown Menu’ is closed to new replies.