...

View Full Version : Fancy Drop Down Menu Help



jimmyd
12-19-2010, 06:48 PM
Hey, have another question. I've made a basic website template, which I'm still working on, but I'd like to make it compatible with IE before I go any further.

I'm having trouble with the drop down menu that is located in the top right section on the site...in the banner.

It seems to work fine in FireFox (which is what I've built it for), Safari, and Chrome, but it will not work in Internet Explorer. Problem is....it doesn't hide the links, or "il" section. I was able to get it to do so, but then it would not let you select any of them...they would disappear as soon as you moved your mouse off of the top section, or "ul" i believe it's called.

Here is the website link http://pmportfolio.net/tester
and here is the CSS sheet for the menu http://pmportfolio.net/tester/dropdown.css

I'm sure I'm probably missing some things as well as having things I don't need. I'm lost.

Here is the code for the menu:


<div id="rgbar">
<div id="container">

<div id="specialtext">
<div id="gameselector">
<div class="menu">
<ul>

<li><a href="#">Drop Down Links
<ins>

<table cellspacing="0" cellpadding="0"><tr><td>
<ul>
<li><a href="#" target='_blank'>&nbsp;First One</a></li>
<li><a href="#" target='_blank'>&nbsp;Second One</a></li>
<li><a href="#" target='_blank'>&nbsp;Third One</a></li>
<li><a href="#" target='_blank'>&nbsp;Fourth One</a></li>
</ul>

</td></tr></table>
</ins></a> </li>
</ul>
</div>
</div>
</div>
</div>



and here is the CSS


/* #rgbar
{
position:absolute;
top:8px;
left:0px;
width:1180px;
height:80px;
border:0px;
display:block;
font-size:10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
padding:0px;
margin:0px;
*/

/* SPECIAL TEXT FORMATION */
#rgbar #container #specialtext
{
width:190px;
text-align:center;
font-size:10px;
color:#FFFFFF;
padding:4px 0px 0px 0px; font-weight: bold;
}
#rgbar ins
{
text-decoration:none;
}
#rgbar a,
#rgbar a:link,
#rgbar a:visited,
#rgbar a:active,
#rgbar a:hover
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color: #ccc
}

/* remove all the bullets, borders and padding from the default list styling */
#rgbar #container #specialtext #gameselector .menu ul
{
padding:0;
margin:0;
list-style-type:none;
}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
#rgbar #container #specialtext #gameselector .menu li
{
float:left;
width:175px;
position:relative;
z-index:100; left:5;
}
/* style the links for the top level */
#rgbar #container #specialtext #gameselector .menu a,
#rgbar #container #specialtext #gameselector .menu a:visited
{
display:block;
text-align:left;
font-size:10px;
text-decoration:none;
color:#000000;
width:169px;
height:16px;
padding-left:4px;
line-height:16px;
background-color: #c8c8c8; background-image: url("images/dropbg.png"); border: 1px solid #000000;

-moz-border-radius-topright: 2px; /* mozilla border radius */
-webkit-border-radius-topright: 2px; /* safari and chrome border radius */
border-radius-topright: 2px; /* opera border radius */

-moz-border-radius-topleft: 2px; /* mozilla border radius */
-webkit-border-radius-topleft: 2px; /* safari and chrome border radius */
border-radius-topleft: 2px; /* opera border radius */
}
/* a hack so that IE5.5 faulty box model is corrected */
* html #rgbar #container #specialtext #gameselector .menu a,
* html #rgbar #container #specialtext #gameselector .menu a:visited
{
width:175px;
/* QUIRKS MODE */
/* w\idth:175px; */
/* VALID MODE */
w\idth:173px;
}
/* IE 6 to OPERA Switch */
html > body #rgbar #container #specialtext #gameselector .menu ul ul
{
p\osition:relative;
d\isplay:none;
top: 18px; left:-5;
}
/* style the table so that it takes no ppart in the layout - required for IE to work */
#rgbar #container #specialtext #gameselector .menu table
{
position:absolute;
top:0;
left:0;
border-collapse:collapse;
}

/* style the second level links */
#rgbar #container #specialtext #gameselector .menu ul ul a,
#rgbar #container #specialtext #gameselector .menu ul ul a:visited
{
text-align:left;
background:#222;
color:#bbb;
height:auto;
line-height:12px;
padding:3px;
width:167px;
border:1px solid #000000;
border-width:0 1px 1px 1px;
-moz-box-shadow: inset 0 0 1em rgba(0, 0, 0, 0.8);
-webkit-box-shadow: inset 0 0 1em #000000;
box-shadow: inset 0 0 1em #000000;

-moz-border-radius: 0px; /* mozilla border radius */
-webkit-border-radius: 0px; /* safari and chrome border radius */
border-radius: 0px; /* opera border radius */
}

#rgbar #container #specialtext #gameselector .menu ul ul li.last,
#rgbar #container #specialtext #gameselector .menu ul ul li.last:visited
{
text-align:left;
background:#000000;
color:#bbb;
height:auto;
line-height:12px;
padding:0;
width:171px;
w\idth:173px;
border:1px solid #555;
border-width:0 1px 1px 1px;
b\order-width:0 1px 1px 1px;
}
#rgbar #container #specialtext #gameselector .menu ul ul li.last a,
#rgbar #container #specialtext #gameselector .menu ul ul li.last:visited a:visited
{
border: 0px;
width: 173px;
w\idth: 166px;
}

/* yet another hack for IE5.5 */
* html #rgbar #container #specialtext #gameselector .menu ul ul a,
* html #rgbar #container #specialtext #gameselector .menu ul ul a:visited
{
width:175px;
/* QUIRKS MODE */
/* w\idth:175px; */
/* VALID MODE */
w\idth:167px;
}
/* style the top level hover */
#rgbar #container #specialtext #gameselector .menu ul a:hover
{
color:#000000;
background-color: #c8c8c8;
}
#rgbar #container #specialtext #gameselector .menu ul ul a:hover
{
color:#FFF;
background:#2a78c6;
}
#rgbar #container #specialtext #gameselector .menu :hover > a,
#rgbar #container #specialtext #gameselector .menu ul ul :hover > a
{
color:#c8c8c8;
background:#222;
}
/* make the second level visible when hover on first level list OR link */
#rgbar #container #specialtext #gameselector .menu ul li:hover ul,
#rgbar #container #specialtext #gameselector .menu ul a:hover ul
{
visibility:visible;
}
/* IE 6 to OPERA Switch */
html > body #rgbar #container #specialtext #gameselector .menu ul li:hover ul,
html > body #rgbar #container #specialtext #gameselector .menu ul a:hover ul
{
d\isplay:block;
}




I'm ready to give up and just find another one online somewhere that will work.

DrDOS
12-19-2010, 07:31 PM
To make it work with IE the very first thing you need is a doctype statement consistent with your page coding. Don't even start a page without having the doctype statement in place.

jimmyd
12-19-2010, 07:39 PM
I don't know much about those. I added one yesterday and it messed up other parts of the layout. Centered everything for some reason, made my onmouseover text affects no longer work, and my pagination buttons no longer have a background color.
Are there different ones, and if so how do you know which to use?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum