PDA

View Full Version : CSS issue in Joomla dropdown menu.



rod6
Jul 21st, 2009, 05:16 AM
I know there have been many threads for this, but I couldn't solve the issue for one week, so decided to post here. The code works well in IE8, Chrome, and FireFox3, but not IE7.

When I mouseover in IE7, the menu appear under the next tab section and disppear when I try to click it.

Here is the css:

/*dropdown*/

#pillmenu li ul {
position: absolute;
display:none;
}
#pillmenu li:hover ul{
display:block;
background:none;
height:auto;
border-color:#BBBBBB;
border-style:solid;
border-width:1px 1px 2px;
x-index:100;

}
#pillmenu li:hover, #pillmenu li.hover {
position: relative;
}

#pillmenu li ul li{
background:#fff;
opacity:.85;
filter: alpha(opacity=85);
-moz-opacity: 0.85;
clear:both;

}
#pillmenu li ul li a{
background:none;
width:155px;
color:#15317E;
padding-top:6px;
padding-right:2px;
font-size:14px;

}
#pillmenu li ul li a:hover{
color:#B8B8B8;
background:white;
decoration:underline;
position:static;
left:-999em;
}

.pill_m {
margin: 0 auto;
padding: 0;
background: url(../images/topmenu_bg.png) top center no-repeat;
margin-top:20px;
width: 900px;
height: 62px;
}

#pillmenu {
float:left;
height:30px;
margin-left:245px;
margin-top:2px;
}

#pillmenu ul {
float: left;
margin: 0;
padding: 0px 0px 0px 0px;
list-style: none;
color:#15317E;
margin-top:19px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
#pillmenu ul:hover {
float: left;
margin: 0;
padding: 0px 0px 0px 0px;
list-style: none;
color:#B8B8B8;
margin-top:19px;
}

#pillmenu li a#active_menu-nav {
text-decoration: underline;
color:#B8B8B8;
}

#pillmenu li a {
background:transparent url(../images/nav_top_level_arrow.gif) no-repeat scroll 86% 50%;
font-size:18px;
font-family:georgia;
font-weight:bold;
color:#15317E;
float: left;
line-height: 18px;
padding: 0px 32px 0px 14px;
text-decoration: none;

}

#pillmenu li a:hover {
color:#B8B8B8;
text-decoration: underline;
}
#pillmenu li {
float:left;
margin: 0;
float:left;
margin:0pt;
padding:0pt;
position:relative;
}

Does anyone know how to solve this? It should be simple.

abduraooft
Jul 21st, 2009, 09:46 AM
Does anyone know how to solve this? It should be simple. Could you post a link to your page?

rod6
Jul 21st, 2009, 02:51 PM
www.dez.titiv.net

The site consists with Magento and Joomla1.5, but they are separated The Magento side has been fixed, but I got no luck with Joomla1.5 side.. :confused: The third tab from right is for Joomla and the others are for Magento page.

The default top menu module is used for this. Any suggestion??

abduraooft
Jul 21st, 2009, 03:10 PM
Try

#pillmenu li ul {/*template.css (line 156)*/
display:none;
left:0;
position:absolute;
}

PS: The drop down is not working in IE6.

rod6
Jul 21st, 2009, 06:02 PM
Yes, sir! That did a big trick!

I'll give an upgrade message for IE6 users. They might go away, but it's just 14% of the internet users. (;_ ;