• Locked
No replies
Tue, 2011-10-18 18:31
marktheman
marktheman's picture
Offline
newbie
Last seen: 10 years 13 weeks ago
Timezone: GMT+1
Joined: 2011-08-01
Posts: 2
Points: 4

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="">&lt;</a>
	        <span name="selectGuestBookEntries" id="selectGuestBookEntries">
		1 of 212&ensp;<img src="images/dropDownBox.jpg" width="12" height="13"/></span>
		<a href="">&gt;</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 id
selectGuestBookEntries 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.

Top
Tags: