By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
446,177 Members | 1,129 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 446,177 IT Pros & Developers. It's quick & easy.

Drop Down help

P: n/a
Hey there, I have been piecing this menu system together from a couple
of different sources and can almost see the end the of the tunnel.

This is based on the Suckerfish Dropdowns which then incorporates an
iframe to allow the menu to be over the form. (See links)

http://www.htmldog.com/articles/suckerfish/dropdowns/
http://homepage.mac.com/igstudio/des...ls-iframe.html

These are the issues that I am having -

1. my top menu (Percoidei, Anabantoidei) has the rollover change the
background from white to maroon, I cannot get the text to change from
black to white on the rollover

2. I have a fixed width for the drop down menus, I would like to have
this expand to be just the width (plus some padding) of the longest
text.

below is the code for my page -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>
<title>Untitled Document</title>
<style type="text/css">
body {
margin: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}

/** Nav Dropdowns **/
#nav{
padding: 0 0 0 10px;
margin: 0;
list-style: none;
float: left;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #294D84;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999999;
}

#nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
float: left;
width: 110px;
}
#nav li { /* main list items */
float: left;
padding: 0 9px 0 8px;
}
#nav li a{ /* main list items */
text-decoration: none;
color:#000000;
display: block;
padding: 3px 7px 4px 7px;
}
#nav li a:hover, li.iehover a { /* main list items */
text-decoration: none;
color:#FFFFFF;
background-color: #9C2021;
display: block;
padding: 3px 7px 4px 7px;
}
#nav ul li { /* sunmenu list items */
position: relative;
float: left;
width: 139px;
padding: 0;
}
#nav li ul { /* second-level lists */
position: absolute;
left: -1000px;
margin-left: 0px;
margin-top: 0px;
}
#nav li ul ul { /* third-and-above-level lists */
left: -1000px;
}
#nav ul li a {
display: block;
text-decoration: none;
padding: 5px 7px 6px 7px;
background-color:#CCCCCC;
}
#nav ul li a:hover {
background-color: #9C2021;
padding: 5px 7px 6px 7px;
color: #FFFFFF;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul,
#nav li.iehover ul ul, #nav li.iehover ul ul ul, #nav li.iehover ul ul
ul ul {
left: -1000px;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li
li li li:hover ul, #nav li.iehover ul, #nav li li.iehover ul, #nav li
li li.iehover ul, #nav li li li li.iehover ul { /* lists nested under
hovered list items */
left: auto;
background-color:#CCCCCC;
width: 139px;
border-style: solid;
border-color: #999999;
border-width: 1px;
}

/** Support for the "nav_menu.js" **/
#nav iframe {
position: absolute;
left: 0;
top: 0;
z-index: 0;
filter: progid:DXImageTransform.Microsoft.Alpha(style=0,op acity=0);
margin-left: -1px;
}
/** end **/

</style>
<script type="text/javascript">
ieHover = function() {
var ieLIs = document.getElementById('nav').getElementsByTagNam e('li');
for (var i=0; i<ieLIs.length; i++) if (ieLIs[i]) {
ieLIs[i].onmouseover=function() {

var ieUL = this.getElementsByTagName('ul')[0];
if (ieUL) {
var ieMat = document.createElement('iframe');
ieMat.style.width=ieUL.offsetWidth + 2 + "px";
ieMat.style.height=ieUL.offsetHeight + 2 + "px";
ieUL.insertBefore(ieMat,ieUL.firstChild);
ieUL.style.zIndex="99";
}

this.className+=" iehover";
}
ieLIs[i].onmouseout=function() {
this.className=this.className.replace(' iehover', '');
}
}
}

if (window.attachEvent) window.attachEvent('onload', ieHover);
</script>
</head>
<body>
<ul id="nav">
<li><a href="#">Percoidei</a>
<ul>
<li><a href="#">Remoras</a></li>
<li><a href="#">Tilefishes</a></li>
<li><a href="#">Bluefishes</a></li>
<li><a href="#">Tigerfishes</a></li>
</ul>
</li>
<li><a href="#">Anabantoidei</a>
<ul>
<li><a href="#">Climbing perches</a></li>
<li><a href="#">Labyrinthfishes</a></li>
<li><a href="#">Kissing gouramis</a></li>
<li><a href="#">Pike-heads</a></li>
<li><a href="#">Giant gouramis</a></li>
</ul>
</li>
</ul>
<br />
<br />
<br />
<br />
<p></p>
<form>
<select>
<option>This is a &lt;select&gt; form element...</option>
<option>Normal browsers would have no problem rendering it within
document stacking order...</option>
<option>IE, however, would display it through any other HTML
element, positioned over it.</option>
</select>
</form>
<p></p>
</body>
</html>
Your help is greatly appreciated.
Dan

Feb 16 '06 #1
Share this Question
Share on Google+
5 Replies


P: n/a
Help would be nice here!
Dan

Feb 17 '06 #2

P: n/a
Fig
On Fri, 17 Feb 2006 17:20:10 -0000, <ds*******@gmail.com> wrote:
Help would be nice here!
Dan


Dan,
Most respondants to this group will not cut & past your code from your
post. Get it on a web server and post again with a link.
http://www.spartanicus.utvinternet.i...s_help_you.htm

--
Fig
Feb 17 '06 #3

P: n/a
ds*******@gmail.com wrote:
Help would be nice here!


FYI, this is a discussion group, not a help desk.

Maybe no one has responded because they aren't very interested in your
particular dilemma. It is also very possible that, since you're posting
from google groups, you're being killfiled right off the bat. ;)

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
Feb 17 '06 #4

P: n/a
Wow, sorry about that, I had no idea. I thought post to google groups
was posting to google groups.

Any suggestion on where I can go to get help in this instance.

Thanks,
Dan

Feb 17 '06 #5

P: n/a
idano wrote:
Wow, sorry about that, I had no idea. I thought post to google groups
was posting to google groups.
This is Usenet.
http://en.wikipedia.org/wiki/Usenet

Google Groups is merely a web-based interface to it, and a poor one at
that. Get a newsreader and sign up. Your ISP may even have free access.
Any suggestion on where I can go to get help in this instance.


If it's about stylesheets, this is a good place, here in
comp.infosystems.www.authoring.stylesheets

alt.html is a good newsgroup as well.

And, as Fig said, put your page on your web server first and post the
URL. Try validation, too.
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/validator-uri.html

--
-bts
-Warning: I brake for lawn deer
Feb 17 '06 #6

This discussion thread is closed

Replies have been disabled for this discussion.