Tue, 2011-10-18 18:31
Hi,
I'm trying to create a css only drop-down menu like the ones in html. Here is my code for trying to do so.
/* setting dealing with selecting particular guest book entries */
#menuSelectGuestEntries { position: relative; margin-top: 10px; padding-left: 466px; } #menuSelectGuestEntries form { color: #000; font-family: Arial, Helvetica, sans-serif; font-size: 2.12em; } #menuSelectGuestEntries .guestBookPages{ visibility:hidden; } #menuSelectGuestEntries .guestBookPages:hover{ visibility:visible; } #selectGuestBookEntries { border: solid 1px grey; background-color: white; padding-right; 5px; width: 70px; font-size: 13px; height: 16px; overflow: auto; } #menuSelectGuestEntries ul.guestBookPages { position: absolute; color: black; background-color: white; font-size: 20px; top: 1px; left: 517px; list-style-type: none; padding-left:0; padding-right: 0; margin-left: 0; width: 66px; border: solid 1px grey; border-top: none; } ul.guestBookPages a { display: block; text-decoration: none; width: 70px; zoom: 1; } ul.guestBookPages a:hover { background-color: #104E8B; font-weight: bold; width: 66px; } html code <div id="menuSelectGuestEntries"> <form action=""> Page: <a href=""><</a> <span name="selectGuestBookEntries" id="selectGuestBookEntries"> 1 of 212 <img src="images/dropDownBox.jpg" width="12" height="13"/></span> <a href="">></a> <ul class="guestBookPages"> <li><a href="">1 of 212</a></li> <li><a href="">2 of 212</a></li> <li><a href="">3 of 212</a></li> <li><a href="">4 of 212</a></li> <li><a href="">5 of 212</a></li> </ul> </form> </div>
What I've tried to do is make the form with id
#menuSelectGuestEntries
relative positioned is it looks like the first option of a drop-down menu. Then what I was hoping for was to have the drop-down list named #menuSelectGuestEntries
absolutely positioned so when someone hovered over the span with idselectGuestBookEntries
which contains the first entry all the entries in list guestBookPages
would become visible. I'm trying to avoid the Javascript methods of doing this if possible, not a big fan. Any ideas of code I could use in the above scenario to make the listing in the id guestBookPages
visible using the hover tag somewhere? Any help greatly appreciated.