Hello there,
I've been working on a page that uses CSS to create rollovers for our site. You can see this page at <!-- m --><a class="postlink" href="http://www.douglas-county.com/Test_Folder/test.asp">http://www.douglas-county.com/Test_Folder/test.asp</a><!-- m --> (I've also posted the stylesheet at the end of this post)
Anyway, I have 2 main questions:
How can I make the rollover affect work horizontally? I tried the ProjectSeven code, but it didn't work for some reason. My second question is how can I create a sub-menu off of the sub-button? I have my navigation set up this way using JavaScript, and you can see it at <!-- m --><a class="postlink" href="http://www.douglas-county.com/">http://www.douglas-county.com/</a><!-- m -->
Is there a way to accomplish this type of menu in CSS? I tried using the <ul><li> method within CSS to create sub-menus, but it only worked for one level. Any & all help is appreciated. Thanks.
KWilliams
<STYLE type=text/css>
/*Link Values*/
a:link {
border-bottom : 1px dotted blue; text-decoration:none;
}
a:link:hover {
border-bottom : none; color:red;
}
/*Form Values*/
#formButton {
background-color: #cccccc;
color: black;
font-size: 8pt;
font-family: arial;
font-weight: bold;
width: 70px;
height: 20px;
padding: 0px 0px;
margin: 1px;
text-align: center;
}
/*Vertical Rollovers*/
#popup a, #popup a:visited {
color: #000000;
font-size:10px;
font-family:arial;
font-weight:bold;
text-decoration: none;
border:1px outset #330066;
background-color: #ffffcc;
display: block;
width: 120px;
height: 10px;
padding: 3px 5px;
margin: 1px;
}
#popup a span {display: none;}
#popup a:hover {
background-color: #330066;
color: #ffffff;
height: auto;
}
#popup a:hover span{
display: block;
position: absolute;
top: auto;
left: 135px;
width: 150px;
margin: 0px;
color: #000;
background: #fee;
text-align: left;
background-color: #ffffcc;
padding: 3px 5px;
border:1px outset #330066;
}
#popup ul {
margin: 0; /*removes indent IE and Opera*/
padding: 0; /*removes indent Mozilla and NN7*/
list-style-type: none; /*turns off display of bullet*/
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
/*Horizontal Rollovers*/
#hpopup {
position: absolute;
left: 36px;
top: 86px;
}
#hpopup ul {
/*/*/margin: 0;
white-space: nowrap;
padding: 0; /* */
}
#hpopup li {
display: inline;
list-style-type: none;
}
</style>Check out the "redesign" article on devedge.netscape.com for info and demos on menus and why you can't do multi-level CSS-based menus at this time. Hint: it has to do with the poor CSS implementation in IE.I'll do that...and it's too bad IE is so ass-backwards when it comes to CSS. Hopefully they'll catch up sometime soon. From your statement, I guess that I can only create popups with one level, but hopefully in the near future I'll be able to do multi-level submenus. Thanks Ray.
P.S. I was able to figure out how to get it horizontally. I had to take out the code in the link property that mentioned "display: block;". You can see it at <!-- m --><a class="postlink" href="http://www.douglas-county.com/Test_Folder/test2.asp">http://www.douglas-county.com/Test_Folder/test2.asp</a><!-- m -->
KWilliams
I've been working on a page that uses CSS to create rollovers for our site. You can see this page at <!-- m --><a class="postlink" href="http://www.douglas-county.com/Test_Folder/test.asp">http://www.douglas-county.com/Test_Folder/test.asp</a><!-- m --> (I've also posted the stylesheet at the end of this post)
Anyway, I have 2 main questions:
How can I make the rollover affect work horizontally? I tried the ProjectSeven code, but it didn't work for some reason. My second question is how can I create a sub-menu off of the sub-button? I have my navigation set up this way using JavaScript, and you can see it at <!-- m --><a class="postlink" href="http://www.douglas-county.com/">http://www.douglas-county.com/</a><!-- m -->
Is there a way to accomplish this type of menu in CSS? I tried using the <ul><li> method within CSS to create sub-menus, but it only worked for one level. Any & all help is appreciated. Thanks.
KWilliams
<STYLE type=text/css>
/*Link Values*/
a:link {
border-bottom : 1px dotted blue; text-decoration:none;
}
a:link:hover {
border-bottom : none; color:red;
}
/*Form Values*/
#formButton {
background-color: #cccccc;
color: black;
font-size: 8pt;
font-family: arial;
font-weight: bold;
width: 70px;
height: 20px;
padding: 0px 0px;
margin: 1px;
text-align: center;
}
/*Vertical Rollovers*/
#popup a, #popup a:visited {
color: #000000;
font-size:10px;
font-family:arial;
font-weight:bold;
text-decoration: none;
border:1px outset #330066;
background-color: #ffffcc;
display: block;
width: 120px;
height: 10px;
padding: 3px 5px;
margin: 1px;
}
#popup a span {display: none;}
#popup a:hover {
background-color: #330066;
color: #ffffff;
height: auto;
}
#popup a:hover span{
display: block;
position: absolute;
top: auto;
left: 135px;
width: 150px;
margin: 0px;
color: #000;
background: #fee;
text-align: left;
background-color: #ffffcc;
padding: 3px 5px;
border:1px outset #330066;
}
#popup ul {
margin: 0; /*removes indent IE and Opera*/
padding: 0; /*removes indent Mozilla and NN7*/
list-style-type: none; /*turns off display of bullet*/
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
/*Horizontal Rollovers*/
#hpopup {
position: absolute;
left: 36px;
top: 86px;
}
#hpopup ul {
/*/*/margin: 0;
white-space: nowrap;
padding: 0; /* */
}
#hpopup li {
display: inline;
list-style-type: none;
}
</style>Check out the "redesign" article on devedge.netscape.com for info and demos on menus and why you can't do multi-level CSS-based menus at this time. Hint: it has to do with the poor CSS implementation in IE.I'll do that...and it's too bad IE is so ass-backwards when it comes to CSS. Hopefully they'll catch up sometime soon. From your statement, I guess that I can only create popups with one level, but hopefully in the near future I'll be able to do multi-level submenus. Thanks Ray.
P.S. I was able to figure out how to get it horizontally. I had to take out the code in the link property that mentioned "display: block;". You can see it at <!-- m --><a class="postlink" href="http://www.douglas-county.com/Test_Folder/test2.asp">http://www.douglas-county.com/Test_Folder/test2.asp</a><!-- m -->
KWilliams