Sent by Anderson David - Brentwood on 8 September 2004 17:05
I have a simple drop-down list that looks like this:
<body>
<div id="dropdown">
<ul class="level1">
<li><a href="#">Text</a></li>
<li><a href="#">Business forms</a></li>
<li><a href="#">Clinical forms</a></li>
<li><a href="#">text</a></li>
<li class="submenu"><a href="#">Business</a>
<ul class="level2">
<li><a href="#">Customer Service
Guidelines</a></li>
<li><a href="#">Handling Patient
Questions</a></li>
<li><a href="#">Handling
Complaints</a></li>
<li><a href="#">Handling Account
Questions</a></li>
</ul></li>
</ul>
</div>
</body>
I am using the CSS styles that Eric describes in his "More" book in chapter
6. This file works perfectly when it's at the root level but the pop-up
stops working when I place the file at a lower level. And, yes, I have
changed the link for the stylesheet. Here is the pertainent part of the
stylesheet. It seems that this rule has stopped working (div#dropdown
ul.level1 li.submenu:hover ul.level2) but I don't know why.
#dropdown{
/*background: #FDD; */
}
div#dropdown ul{
background: #EFEFEF;
border: 1px solid Gray;
float: left;
margin: 0 0 0 150px;
padding: 0;
width: 200px;
}
div#dropdown>ul a{
width: auto;
}
div#dropdown ul ul{
display: none;
margin: 0;
position: absolute;
top: -1px;
left: 200px;
}
div#dropdown ul.level1 li.submenu:hover ul.level2{
display: block;
visibility: visible;
background: Aqua;
}
div#dropdown li{
border-bottom: 1px solid #ccc;
position: relative;
list-style: none;
margin: 0;
}
div#dropdown li a{
display: block;
padding: 0.25em 0 0.25em 0.5em;
text-decoration: none;
width: 110px;
}
div#dropdown li:hover{
/*background: #EBB;*/
background: Aqua;
}
div#dropdown li.submenu{
background: url(../images/icon-submenu.gif) 95% 50% no-repeat;
}
div#dropdown li.submenu:hover{
/*background: #EDD;*/
background: Aqua;
/*background: url(images/icon-submenu.gif) 95% 50% no-repeat;*/
}
David Anderson
Senior Web Developer
615.373.7405
[EMAIL-REMOVED]
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
