|
pcguy -> Unordered List (UL) Question (5/14/2009 12:18:22)
|
I have an UL within a UL...which should show the nested UL with indenting....my problem is, it does not indent the nested UL, nor can I get it to show a different image... here is my Code, and CSS for the DIV in which both UL's are in:
<div id="SubNavBar">
<ul>
<li><a href="http://webdev/">HOME</a><br>
<br>
</li>
<li><a href="about.asp">About Us</a></li>
<li><a href="accreditation.asp">Accreditation</a></li>
<li><a href="history.asp">History</a></li>
<li><span style="background-color:#FF0"><a href="iron.asp">Iron Sponsor</a></span><ul id="SubNavBarDROP"><li>KidsZone</li><li>Senior Nights</li></ul></li>
<li><a href="mission-statement.asp">Mission Statement</a></li>
<li><a href="links-of-interest.asp">Links of Interest</a></li>
<li><a href="network.asp">Network</a></li>
<li><a href="pharmacy.asp">Pharmacy</a><br /><br /></li>
<li><a href="javascript:history.go(-1);">PREVIOUS PAGE</a></li>
</ul>
</div>
-------------------------------------
#SubNavBar {
background-color:#FFF;
color:#000;
width:100%;
font-size:12px;
padding:5px 0px;
text-align:left;
}
#SubNavBar ul {
list-style:none inside url(http://webdev/images/submenu_bullet.gif);
}
#SubNavBarDROP {
list-style-image:url(http://webdev/images/submenuDROP_bullet.gif);
}
#SubNavBar li {
padding:0px 0px;
}
#SubNavBar a:link {
color:#00F;
}
#SubNavBar a:visited {
color:#00F;
}
#SubNavBar a:hover {
color:#A50031;
text-decoration:none;
}
#SubNavBar a:active {
color:#000;
}
-----------------------------------------
Any ideas? I need the nested UL to show the different image. Currently, it shows the submenu_bullet.gif image for both UL's.
Thanks for any help.
|
|
|
|
