Below is from my .css and my navigation bar (I cant recall the name of this type navigation item off hand). However, It works well in IE, however does not show the background color, or text in Firefox (for the subitems, it does show the initial navigation bar). It just seems to show the border with a transparent background. When I do hover over the sub-item, I can in fact see the way I want.
Any help is appreciated. Thx in advance
//////////////
Below is from my .css
#navlist
{
padding: 0 1px 1px;
font: bold 10px Verdana, sans-serif;
background: gray;
width: 127px
}
#navlist li
{
list-style: none;
margin: 0;
border-top: 1px solid gray;
text-align: left;
}
#navlist li a
{
display: block;
padding: 0.25em 0.5em 0.25em 0.8em;
border-left: .25em solid #c0c0c0;
background: #585858
text-decoration: none;
}
img {
border: none;
}
#navlist li a:link { color: #ffffff;}
#navlist li a:visited { color: #ffffff;}
#navlist li a:hover {
border-color: #000066;
color: #ffffff;
background: #c00000;
}
ul li {position: relative;
}
li ul {position: absolute;
left: 125px;
top: 0;
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #ff0000;
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
font-size: 10px;
}
ul {margin: 0;
padding: 0;
list-style: none;
width: 125px;
border-bottom: 1px solid #ccc;
}
li:hover ul { display: block; }
/////////////////////
Below is from my navbar.htm.
<ul id="navlist">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"test.php"
onmouseOver="if(document.all)document.getElementById('ul2').style.display='block'"
onmouseOut="if(document.all)document.getElementById('ul2').style.display='none'">Minors 6/7</a>
<ul id="ul2" onmouseOver="if(document.all)this.style.display='block'"
onmouseOut="if(document.all)this.style.display='none'">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"test.php?test_val=1">TEST 1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"test.php?test_val=2">TEST 2</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"test.php?test_val=3">TEST 3</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"test.php?test_val=4">TEST 4</a></li>
</ul>
</li>
</ul>document.all is an IE thing. It doesn't work in compliant browsers. So get rid of document.all. I use functions, and this might work better for you
function the_old_switcheroo(strVar)
{
x=document.getElementById(strVar);
if(x.style.display=='block')
x.style.display='none';
else
x.style.display='block';
}
<a href=http://www.webdeveloper.com/forum/archive/index.php/"test.php"
onmouseover="the_old_switcheroo('ul2')"
onmouseout ="the_old_switcheroo('ul2')">TEST1</a>
<ul id="ul2">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"test.php?test_val=1">TEST 1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"test.php?test_val=2">TEST 2</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"test.php?test_val=3">TEST 3</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"test.php?test_val=4">TEST 4</a></li>
</ul>
</li>
</ul>The JavaScript code there was intended to only be used by IE, because other browsers support :hover on more element types than just <a>.
That menu is basically an inelegant version of the Suckerfish menu system.
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/dropdowns/">http://www.alistapart.com/articles/dropdowns/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/horizdropdowns/">http://www.alistapart.com/articles/horizdropdowns/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.htmldog.com/articles/suckerfish/dropdowns/">http://www.htmldog.com/articles/suckerfish/dropdowns/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/hybrid/">http://www.alistapart.com/articles/hybrid/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.csscreator.com/menu/multimenu.php">http://www.csscreator.com/menu/multimenu.php</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.positioniseverything.net/css-flyout.html">http://www.positioniseverything.net/css-flyout.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.positioniseverything.net/css-dropdowns.html">http://www.positioniseverything.net/css-dropdowns.html</a><!-- m -->
He really is asking a CSS question. Though it's not clear to me what he wants the menu to look like.
Any help is appreciated. Thx in advance
//////////////
Below is from my .css
#navlist
{
padding: 0 1px 1px;
font: bold 10px Verdana, sans-serif;
background: gray;
width: 127px
}
#navlist li
{
list-style: none;
margin: 0;
border-top: 1px solid gray;
text-align: left;
}
#navlist li a
{
display: block;
padding: 0.25em 0.5em 0.25em 0.8em;
border-left: .25em solid #c0c0c0;
background: #585858
text-decoration: none;
}
img {
border: none;
}
#navlist li a:link { color: #ffffff;}
#navlist li a:visited { color: #ffffff;}
#navlist li a:hover {
border-color: #000066;
color: #ffffff;
background: #c00000;
}
ul li {position: relative;
}
li ul {position: absolute;
left: 125px;
top: 0;
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #ff0000;
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
font-size: 10px;
}
ul {margin: 0;
padding: 0;
list-style: none;
width: 125px;
border-bottom: 1px solid #ccc;
}
li:hover ul { display: block; }
/////////////////////
Below is from my navbar.htm.
<ul id="navlist">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"test.php"
onmouseOver="if(document.all)document.getElementById('ul2').style.display='block'"
onmouseOut="if(document.all)document.getElementById('ul2').style.display='none'">Minors 6/7</a>
<ul id="ul2" onmouseOver="if(document.all)this.style.display='block'"
onmouseOut="if(document.all)this.style.display='none'">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"test.php?test_val=1">TEST 1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"test.php?test_val=2">TEST 2</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"test.php?test_val=3">TEST 3</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"test.php?test_val=4">TEST 4</a></li>
</ul>
</li>
</ul>document.all is an IE thing. It doesn't work in compliant browsers. So get rid of document.all. I use functions, and this might work better for you
function the_old_switcheroo(strVar)
{
x=document.getElementById(strVar);
if(x.style.display=='block')
x.style.display='none';
else
x.style.display='block';
}
<a href=http://www.webdeveloper.com/forum/archive/index.php/"test.php"
onmouseover="the_old_switcheroo('ul2')"
onmouseout ="the_old_switcheroo('ul2')">TEST1</a>
<ul id="ul2">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"test.php?test_val=1">TEST 1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"test.php?test_val=2">TEST 2</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"test.php?test_val=3">TEST 3</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"test.php?test_val=4">TEST 4</a></li>
</ul>
</li>
</ul>The JavaScript code there was intended to only be used by IE, because other browsers support :hover on more element types than just <a>.
That menu is basically an inelegant version of the Suckerfish menu system.
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/dropdowns/">http://www.alistapart.com/articles/dropdowns/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/horizdropdowns/">http://www.alistapart.com/articles/horizdropdowns/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.htmldog.com/articles/suckerfish/dropdowns/">http://www.htmldog.com/articles/suckerfish/dropdowns/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/hybrid/">http://www.alistapart.com/articles/hybrid/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.csscreator.com/menu/multimenu.php">http://www.csscreator.com/menu/multimenu.php</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.positioniseverything.net/css-flyout.html">http://www.positioniseverything.net/css-flyout.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.positioniseverything.net/css-dropdowns.html">http://www.positioniseverything.net/css-dropdowns.html</a><!-- m -->
He really is asking a CSS question. Though it's not clear to me what he wants the menu to look like.