With the help of a great article, I created a great page that uses horizontal CSS rollovers (see <!-- m --><a class="postlink" href="http://www.douglas-county.com/Test_Folder/cssmenu.asp">http://www.douglas-county.com/Test_Folder/cssmenu.asp</a><!-- m -->), but I'm having a problem with one of the CSS behaviors. When you go to Departments > Elephant > Indian, you'll notice that the Elephant link turns back to the blue color. I need to to stay white. I know that it's changing back because "Elephant" is a link, but can anyone see what I'm doing wrong, or what I'm missing? Thanks for any help.There is some sort of strange phnomenon here, I try out your page online and it works fine, however when I save the source as a .html page on my PC it suddenly stops working. This means that I can only suggest changes to the source that I think might work.
Try changing the rules to look a bit like this:
ul.makeMenu li { list-style-type: none; margin: 0px; position: relative; color: #330066;}
ul.makeMenu li:hover { background-color: #FFFFCC; color:#ffffff;}
ul.makeMenu li a { color: inherit; display: inline; width: 100%; text-decoration: none;}
Also, you might want to Download a couple of browsers, I'm assuming that you only tested in IE because in Opera the final sub-menu overlaps the drop-down part of the menu and in Mozilla everything is scrunched up in the top left hand corner. Check out these pages:
<!-- m --><a class="postlink" href="http://www.opera.com/">http://www.opera.com/</a><!-- m --> (Don't worry, the browser is free, but you have to put up with a small advert.)
<!-- m --><a class="postlink" href="http://www.mozilla.org/">http://www.mozilla.org/</a><!-- m --> (This one is totally free!)You call yourself a hacker in training and save as *.html yea verily dost thou not know they were using 'IEmen.htc' and proprietary HTML hence why it wouldn't work offline.Originally posted by Robert Wellock
...yea verily dost thou not know they were using 'IEmen.htc' and proprietary HTML hence why it wouldn't work offline. Sorry, what was that again?
I saw this bit:
<!--[if gte IE 5]>
<style type="text/css">
ul.makeMenu li { behavior: url( IEmen.htc ); }
ul.makeMenu ul {display: none; position: absolute; top: 15px; left: -1px; }
ul.makeMenu2 li { behavior: url( IEmen.htc ); }
ul.makeMenu2 ul {display: none; position: absolute; top: 0px; left: 78px; }
</style>
<![endif]-->
But I have no idea what it does, having Download ed the file IEmen.htc it now works though, still, like I say, no idea why.Hi lavalamp,
I tried your suggestion of:
ul.makeMenu li { list-style-type: none; margin: 0px; position: relative; color: #330066;}
ul.makeMenu li:hover { background-color: #FFFFCC; color:#ffffff;}
ul.makeMenu li a { color: inherit; display: inline; width: 100%; text-decoration: none;}
...but it resulted in all of the links turning into the default blue. Do you have any other suggestions?OK then, starting from your original script change this line:
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"indian.html"> Elephant ></a>
to this:
<li style="cursor
ointer;cursor:hand;"> Elephant >
Try changing the rules to look a bit like this:
ul.makeMenu li { list-style-type: none; margin: 0px; position: relative; color: #330066;}
ul.makeMenu li:hover { background-color: #FFFFCC; color:#ffffff;}
ul.makeMenu li a { color: inherit; display: inline; width: 100%; text-decoration: none;}
Also, you might want to Download a couple of browsers, I'm assuming that you only tested in IE because in Opera the final sub-menu overlaps the drop-down part of the menu and in Mozilla everything is scrunched up in the top left hand corner. Check out these pages:
<!-- m --><a class="postlink" href="http://www.opera.com/">http://www.opera.com/</a><!-- m --> (Don't worry, the browser is free, but you have to put up with a small advert.)
<!-- m --><a class="postlink" href="http://www.mozilla.org/">http://www.mozilla.org/</a><!-- m --> (This one is totally free!)You call yourself a hacker in training and save as *.html yea verily dost thou not know they were using 'IEmen.htc' and proprietary HTML hence why it wouldn't work offline.Originally posted by Robert Wellock
...yea verily dost thou not know they were using 'IEmen.htc' and proprietary HTML hence why it wouldn't work offline. Sorry, what was that again?
I saw this bit:
<!--[if gte IE 5]>
<style type="text/css">
ul.makeMenu li { behavior: url( IEmen.htc ); }
ul.makeMenu ul {display: none; position: absolute; top: 15px; left: -1px; }
ul.makeMenu2 li { behavior: url( IEmen.htc ); }
ul.makeMenu2 ul {display: none; position: absolute; top: 0px; left: 78px; }
</style>
<![endif]-->
But I have no idea what it does, having Download ed the file IEmen.htc it now works though, still, like I say, no idea why.Hi lavalamp,
I tried your suggestion of:
ul.makeMenu li { list-style-type: none; margin: 0px; position: relative; color: #330066;}
ul.makeMenu li:hover { background-color: #FFFFCC; color:#ffffff;}
ul.makeMenu li a { color: inherit; display: inline; width: 100%; text-decoration: none;}
...but it resulted in all of the links turning into the default blue. Do you have any other suggestions?OK then, starting from your original script change this line:
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"indian.html"> Elephant ></a>
to this:
<li style="cursor
ointer;cursor:hand;"> Elephant >