CSS Menu

[Warrior_of_God]

I want to create a menu that is basic, but expands on mouseover. The setup I have on www.hcc-sa.org/resources.shtml shows the main menu with a submenu. I want to show just the main menu, and have the submenu appear (slide out if possible) on a mouseover & disappear on mouseout. I will be creating more submenus and am fairly new to using css. I'm using SSI for the entire page with the menu code in a separate file. So how do I accomplish this? Here's my html code for the menu file:

<div align=center><hr><a href="index.shtml">Home</a><br><hr><a href="vision.shtml">Our Vision</a><br><hr><a href="foundation.shtml">Our Foundation</a><br><hr><a href="http://calendar.hcc-sa.org">Calendar</a><br><hr><a href="contact.shtml">Contact Us</a><br><hr><a href="directions.shtml">Directions</a><br><hr><a href="pastors.shtml">Meet Our Pastors</a><br><hr><a href="faqs.shtml">F. A. Q. s</a><br><hr><a href="worship.shtml">Let's Worship</a><br><hr><a href="resources.shtml">Resources</a><br><hr><a href="youth.shtml">Youth Group</a><br><hr></div>

here's my screen.css code:

body {background: #ffffff url('images/HCCBG.jpg') fixed no-repeat;background-position: 200px 175px;margin: 0;}#page {width: 100%;}#content {position: absolute;left: 200px;top: 175px;font-family: georgia,times new roman,times,serif;font-size: 12px;font-weight: bold;color: #000000;}#rescontent {position: absolute;left: 350px;top: 175px;font-family: georgia,times new roman,times,serif;font-size: 12px;font-weight: bold;color: #005500;}#header {background-color: #ffffff;position: absolute;left: 200px;top: 0;height: 175px;padding-left: 90px;overflow: hidden;background: transparent;font-family: verdana,arial,helvetica,sans-serif;font-size: 11px;color: #000000;}#resfooter {position: relative;left: -75px;}div.text {background-color: #229933;text-align: justify;border-style: groove;padding: 10px 25px 10px 25px;filter:alpha(opacity=75);opacity:0.75;-moz-opacity:0.75;color: #000000;}div.ctrtext {background-color: #229933;text-align: center;border-style: groove;padding: 10px;filter:alpha(opacity=75);opacity:0.75;-moz-opacity:0.75;color: #000000;}#menu {position: absolute;left: 0;top: 175;width: 200px;background-color: #009900;overflow: visible;font-family: verdana,arial,helvetica,sans-serif;font-size: 16px;color: #ffffff;}#resmenu {position: absolute;left: 200px;top: 175px;width: 150px;background-color: #009900;overflow: visible;font-family: verdana,arial,helvetica,sans-serif;font-size: 10px;color: #ffffff;}#menu a {color: white;font-weight: bold;text-decoration: none;}#menu a:visited {color: white;font-weight: bold;text-decoration: none;}#menu a:hover {color: white;font-weight: bold;font-size: 20px;text-decoration: none;}#menu a:hover.res {color: white;font-weight: bold;font-size: 20px;text-decoration: none;}#menu a:active {color: white;font-weight: bold;font-style: italic;font-size: 20px;text-decoration: underline;}#resmenu a {color: white;font-weight: bold;text-decoration: none;}#resmenu a:visited {color: white;font-weight: bold;text-decoration: none;}#resmenu a:hover {color: white;font-weight: bold;font-size: 12px;text-decoration: none;}#resmenu a:active {color: white;font-weight: bold;font-style: italic;font-size: 12px;text-decoration: underline;}a {color: #ffffff;text-decoration: none;}a:visited {color: #005500;font-size: 85%;}a:hover {font-size: 125%;text-decoration: underline;}h1 {font-family: "times new roman",arial,helvetica,sans-serif;font-size: 26px;color: #000000;padding: 5px;border-top: thick double #009900;border-bottom: thick double#009900;font-weight: bold;}h2 {font-family: "times new roman",arial,helvetica,sans-serif;font-size: 20px;color: #000000;padding: 5px;border-top: thick double #009900;border-bottom: thick double#009900;font-weight: bold;}h3 {font-size: 18px;font-weight: bold;color: #000000;}h4 {font-size: 16px;font-weight: bold;color: #000000;text-decoration: underline;}h5 {font-size: 20px;font-weight: bold;color: #ff0000;display: inline;}

I expect to take out resmenu, rescontent, and resfooter as they would no longer be necessary.

[Guest FirefoxRocks]

Do you mean a menu like this? http://portal.trap17.com/dhstemp/

[Warrior_of_God]

Do you mean a menu like this? http://portal.trap17.com/dhstemp/

Yeah! Looking at the source code & css file right now. Thanks!

[Guest FirefoxRocks]

Yeah! Looking at the source code & css file right now. Thanks!

Just remember that the CSS is COPYRIGHTED. And IE 6/5.5 have quirky stuff which absolutely needs tables to navigate through.The source can be viewed separately as the menu portion here http://portal.trap17.com/dhstemp/menu.inc..CSS for all browsers can be viewed here: http://portal.trap17.com/dhstemp/flyout.css.CSS for IE 6/IE 5.5 is here at: http://portal.trap17.com/dhstemp/flyout_ie.css.

[elementalgrace]

Just remember that the CSS is COPYRIGHTED. And IE 6/5.5 have quirky stuff which absolutely needs tables to navigate through.The source can be viewed separately as the menu portion here http://portal.trap17.com/dhstemp/menu.inc..CSS for all browsers can be viewed here: http://portal.trap17.com/dhstemp/flyout.css.CSS for IE 6/IE 5.5 is here at: http://portal.trap17.com/dhstemp/flyout_ie.css.

I was under the impression that you couldn't copyright code? It seems frankly ridiculous that someone should be able to prevent another person from creating the same features on a website.Try http://www.htmldog.com/articles/suckerfish...e/vertical.html - cross browser compatible and works perfectly.

[Guest FirefoxRocks]

I was under the impression that you couldn't copyright code? It seems frankly ridiculous that someone should be able to prevent another person from creating the same features on a website.Try http://www.htmldog.com/articles/suckerfish...e/vertical.html - cross browser compatible and works perfectly.

It's apparently under a license that you can use it for non-commercial purposes as long as you include the copyright statement in the CSS (unless otherwise permitted).

[Warrior_of_God]

Just remember that the CSS is COPYRIGHTED. And IE 6/5.5 have quirky stuff which absolutely needs tables to navigate through.The source can be viewed separately as the menu portion here http://portal.trap17.com/dhstemp/menu.inc..CSS for all browsers can be viewed here: http://portal.trap17.com/dhstemp/flyout.css.CSS for IE 6/IE 5.5 is here at: http://portal.trap17.com/dhstemp/flyout_ie.css.

Yeah, I saw that...Thanks for the info.

[Warrior_of_God]

okay...here's the updated menu, but I can't get it to be on top and I can't get the submenu to stay up when I move the mouse out of the main menu area into the submenu area (both in IE)...also I can't get the links with subs to show in firefox...http://www.hcc-sa.orgcss code in external screen.css:

/* common styling */#menu {font-family:verdana,Arial,sans-serif;width:200px;position:relative;top: 150px;font-size:16px;font-weight: bold;border:2px groove #00ff00;margin-right:3px;float:left;text-align:left;}#menu ul li a, .menu ul li a:visited {display:block;text-decoration:none;width: 200px;border:1px groove #00ff00;background-color:#229933;line-height:19px;font-size:16px;font-weight: bold;}#menu ul {padding:0;margin:0;list-style-type:none}#menu ul li {float:left;margin-right:1px;position:relative;}#menu ul li ul {display:none}/* specific to non IE browsers */#menu ul li:hover a {background-color:#229933;}#menu ul li:hover ul {display:block;position:absolute;top:0;left:200px;width:175px;z-index:8;}#menu ul li:hover ul li a.hide {background-color:#229933;z-index:8;}#menu ul li:hover ul li:hover a.hide {width:175px;background-color:#229933;z-index:8;}#menu ul li:hover ul li a {display:block;background-color:#229933;width:175px;}#menu ul li:hover ul li a:hover {background-color:#229933;}/* styling for IE browsers */#menu table {border-collapse:collapse;border:0;margin:0;padding:0;z-index:8;}#menu ul li a.hide,.menu ul li a:visited.hide,.menu ul li a:hover ul li a.hide {display:none;}#menu ul li a:hover {background-color:#229933;}#menu ul li a:hover ul {display:block;position:absolute;top:0;left:200px;width:175px;z-index: 8;}#menu ul li a:hover ul li a.sub {background-color:#229933;}#menu ul li a:hover ul li a {display:block;background-color:#229933;width:175px;z-index:8;}#menu ul li a:hover ul li a:hover {background-color:#229933;z-index:8;}

menu code:

<ul><li><a href="index.shtml">Home</a></li><li><a class="hide" href="java script:void()">Hill Country Living</a><!--[if lte IE 6]><a href="java script:void()">Hill Country Living<table><tr><td><![endif]--><ul><li><a href="heritage.shtml">Our Heritage</a></li><li><a href="model.shtml">Our Model</a></li><li><a href="DNA.shtml">Our DNA</a></li><li><a href="doctrine.shtml">Our Doctrine</a></li><li><a href="purpose.shtml">Our Purpose</a></li><li><a href="philosophy.shtml">Our Philosophy</a></li><li><a href="vision.shtml">Our Vision</a></li><li><a href="worship.shtml">Our Worship</a></li><li><a href="family.shtml">Our Family</a></li><li><a href="values.shtml">Our Values</a></li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li><li><a href="http://calendar.hcc-sa.org" target="_blank">Calendar</a></li><li><a href="contact.shtml">Contact Us</a></li><li><a href="directions.shtml">Directions</a></li><li><a href="pastors.shtml">Meet Our Pastors</a></li><li><a href="faqs.shtml">F. A. Q. s</a></li><li><a class="hide" href="java script:void()">Resources</a><!--[if lte IE 6]><a href="java script:void()">Resources<table><tr><td><![endif]--><ul><li><a href="edge.shtml">The Leading Edge</a></li><li><a href="kings.shtml">Kings I Must Conquer</a></li><li><a href="spirits.shtml">The 7 Spirits of God</a></li><li><a href="freelife.shtml">Living a Free Life</a></li><li><a href="godsorder.shtml">God's Order for Life</a></li><li><a href="cross.shtml">The Power of the Cross</a></li><li><a href="everyeye.shtml">Every Eye Shall See Him</a></li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li><li><a class="hide" href="java script:void()">Fellowship</a><!--[if lte IE 6]><a href="java script:void()">Fellowship<table><tr><td><![endif]--><ul><li><a href="peace.shtml">Peace Provokers</a></li><li><a href="oasis.shtml">The Oasis</a></li><li><a href="WRAP.shtml">Generation WRAP Groups</a></li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>

[Warrior_of_God]

okay, i fixed the firefox problem, but now I can't get the submenus to stay up or be on top of everything else...the menu in action:http://www.hcc-sa.org(I know there's A LOT of code on here, but I'm not sure where the problem would be, as I'm still a novice on web design)here's the entire code for my external css file:

body {background: #ffffff url('images/HCCBG.jpg') fixed no-repeat;background-position: 200px 175px;margin: 0;}#page {width: 100%;}#content {position: absolute;left: 200px;top: 175px;font-family: georgia,times new roman,times,serif;font-size: 12px;font-weight: bold;color: #000000;}#logo {position: absolute;top: 0;left: 0;height: 150;}#header {background-color: #ffffff;position: absolute;left: 200px;top: 0;height: 175px;padding-left: 90px;overflow: hidden;background: transparent;font-family: verdana,arial,helvetica,sans-serif;font-size: 11px;color: #000000;}div.text {background-color: #229933;text-align: justify;border-style: groove;padding: 10px 25px 10px 25px;filter:alpha(opacity=75);opacity:0.75;-moz-opacity:0.75;color: #000000;}div.ctrtext {background-color: #229933;text-align: center;border-style: groove;padding: 10px;filter:alpha(opacity=75);opacity:0.75;-moz-opacity:0.75;color: #000000;}/* flyout menu display *//* ================================================================ This copyright notice must be untouched at all times.The original version of this stylesheet and the associated (x)html is available at [url="http://www.cssplay.co.uk/menus/flyoutt.html"]http://www.cssplay.co.uk/menus/flyoutt.html[/url]Copyright © 2005-2007 Stu Nicholls. All rights reserved.This stylesheet and the assocaited (x)html may be modified in any way to fit your requirements.=================================================================== *//* common styling */#menu {font-family:verdana,Arial,sans-serif;position:relative;top:150px;left:0;width:189px;font-size:16px;border:2px solid #005500;margin-right:3px;float:left;text-align:left}#menu ul li a, #menu ul li a:visited {display:block;text-decoration:none;width:188px;height:36px;border-style:solid;border-color:#005500;border-width:1px 1px 0 0;background-color:#229933;line-height:19px;font-size:16px}#menu ul {padding:0;margin:0;list-style-type:none}#menu ul li {float:left;margin-right:1px;position:relative}#menu ul li ul {display:none}/* specific to non IE browsers */#menu ul li:hover a {background-color:#229933}#menu ul li:hover ul {display:block;position:absolute;top:0;left:189px;width:188px}#menu ul li:hover ul li a.hide {background-color:#229933;z-index:8}#menu ul li:hover ul li:hover a.hide {width:188px;background-color:#229933;z-index:8}#menu ul li:hover ul li ul {display: none}#menu ul li:hover ul li a {display:block;background-color:#229933;width:188px}#menu ul li:hover ul li a:hover {background-color:#229933}#menu ul li:hover ul li:hover ul {display:block;position:absolute;left:189px}#menu ul li:hover ul li:hover ul li a {display:block;width:200px;background-color:#229933}#menu ul li:hover ul li:hover ul li a:hover {background-color:#229933}/* standard page text properties */a {color: #ffffff;text-decoration: none;}a:visited {color: #ffffff;text-decoration: none;}a:hover {font-size: 125%;text-decoration: underline;}a:hover {font-size: 125%;font-style: italic;text-decoration: underline;}h1 {font-family: "times new roman",arial,helvetica,sans-serif;font-size: 26px;color: #000000;padding: 5px;border-top: thick double #009900;border-bottom: thick double#009900;font-weight: bold;}h2 {font-family: "times new roman",arial,helvetica,sans-serif;font-size: 20px;color: #000000;padding: 5px;border-top: thick double #009900;border-bottom: thick double#009900;font-weight: bold;}h3 {font-size: 18px;font-weight: bold;color: #000000;}h4 {font-size: 16px;font-weight: bold;color: #000000;text-decoration: underline;}h5 {font-size: 20px;font-weight: bold;color: #ff0000;display: inline;}

Here's the external sheet for IE properties:

/* for IE browsers */table {border-collapse:collapse;border:0;margin:0;padding:0;}#menu ul li a.hide,#menu ul li a:visited.hide,#menu ul li a:hover ul li a.hide {display:none}#menu ul li a:hover {background-color:#229933}#menu ul li a:hover ul {display:block;position:absolute;top:0;left:189px;width:188px}#menu ul li a:hover ul li a.sub {background-color:#229933}#menu ul li a:hover ul li a {display:block;background-color:#229933;width:188px}#menu ul li a:hover ul li a ul {visibility:hidden}#menu ul li a:hover ul li a:hover {background-color:#229933}#menu ul li a:hover ul li a:hover ul {visibility:visible;position:absolute;left:189px;top:0}#menu ul li a:hover ul li a:hover ul li a {display:block;width:200px;background-color:#229933}#menu ul li a:hover ul li a:hover ul li a:hover {background-color:#229933}

here's the menu code:

<div style="background-color: #229933; z-index=10;"><ul><li><a href="index.shtml">Home</a></li><li><a class="hide" href="java script:void()">Hill Country Living</a><!--[if lte IE 6]><a href="java script:void()">Hill Country Living<table><tr><td><![endif]--><ul><li><a href="heritage.shtml">Our Heritage</a></li><li><a href="model.shtml">Our Model</a></li><li><a href="DNA.shtml">Our DNA</a></li><li><a href="doctrine.shtml">Our Doctrine</a></li><li><a href="purpose.shtml">Our Purpose</a></li><li><a href="philosophy.shtml">Our Philosophy</a></li><li><a href="vision.shtml">Our Vision</a></li><li><a href="worship.shtml">Our Worship</a></li><li><a href="family.shtml">Our Family</a></li><li><a href="values.shtml">Our Values</a></li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li><li><a href="http://calendar.hcc-sa.org" target="_blank">Calendar</a></li><li><a href="contact.shtml">Contact Us</a></li><li><a href="directions.shtml">Directions</a></li><li><a href="pastors.shtml">Meet Our Pastors</a></li><li><a href="faqs.shtml">F. A. Q. s</a></li><li><a class="hide" href="java script:void()">Resources</a><!--[if lte IE 6]><a href="java script:void()">Resources<table><tr><td><![endif]--><ul><li><a href="edge.shtml">The Leading Edge</a></li><li><a href="kings.shtml">Kings I Must Conquer</a></li><li><a href="spirits.shtml">The 7 Spirits of God</a></li><li><a href="freelife.shtml">Living a Free Life</a></li><li><a href="godsorder.shtml">God's Order for Life</a></li><li><a href="cross.shtml">The Power of the Cross</a></li><li><a href="everyeye.shtml">Every Eye Shall See Him</a></li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li><li><a class="hide" href="java script:void()">Fellowship</a><!--[if lte IE 6]><a href="java script:void()">Fellowship<table><tr><td><![endif]--><ul><li><a href="peace.shtml">Peace Provokers</a></li><li><a href="oasis.shtml">The Oasis</a></li><li><a href="WRAP.shtml">Generation WRAP Groups</a></li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul></div>

[Warrior_of_God]

Well, I finally fixed it by changing where I set the #include code for the menu file...apparently, having it at the bottom as opposed to the top makes a difference...thanks for the ideas & help guys.edit:works great in FF, but subs don't show in IE...what's the deal?edit#2:okay...just installed IE7 & it looks CLEAN. Wow! I don't get why it won't show properly in IE6...

[Jerry62704]

Just an idea, but you can get CSS menus from http://www.cssplay.co.uk/menus/. I'm going to use the horizonal buttons with multiple flyout menus for my web page to replace the javascript one I developed. Theirs is much better.

[Warrior_of_God]

Just an idea, but you can get CSS menus from http://www.cssplay.co.uk/menus/. I'm going to use the horizonal buttons with multiple flyout menus for my web page to replace the javascript one I developed. Theirs is much better.

This is the site where the code came from for the flyout menu. if you look on my external css code, the copyright is commented on there...It works beautifully in FF & IE7, but in IE6, I have double links for the flyout links and they don't even flyout on mouseover.

[jmel44]

This is the site where the code came from for the flyout menu. if you look on my external css code, the copyright is commented on there...It works beautifully in FF & IE7, but in IE6, I have double links for the flyout links and they don't even flyout on mouseover.

Hi,I also incorporated a horizontal menu based on the cssplay design and had the same problem you're having with IE6. In order to get it to work I had to to put in an 'if IE 6' exception based on other ideas I picked up on the net. It worked for me.Look at the source here: http://www.jnbsoft.com/melton/index.htmlI am new with css, so take that into account. Recently posted 'Newbie with new site'.jmel

[Warrior_of_God]

Hi,I also incorporated a horizontal menu based on the cssplay design and had the same problem you're having with IE6. In order to get it to work I had to to put in an 'if IE 6' exception based on other ideas I picked up on the net. It worked for me.Look at the source here: http://www.jnbsoft.com/melton/index.htmlI am new with css, so take that into account. Recently posted 'Newbie with new site'.jmel

In researching based on your post, I found a link on the main cssplay page that takes you into a menu builder for the flyout menu that generates a CSS layout to put into an external CSS file or style tag and also generates the necessary HTML code. (http://www.cssplay.co.uk/menus/menu_builder_flyout) The HTML code varied slightly from mine, and the CSS code wasn't much different aside from the z-index. So I incorporated the HTML code that was generated in hopes that it will work with IE6. If you have IE6 please post back with feedback...the site is:http://www.hcc-sa.orgThanks.

[jmel44]

In researching based on your post, I found a link on the main cssplay page that takes you into a menu builder for the flyout menu that generates a CSS layout to put into an external CSS file or style tag and also generates the necessary HTML code. (http://www.cssplay.co.uk/menus/menu_builder_flyout) The HTML code varied slightly from mine, and the CSS code wasn't much different aside from the z-index. So I incorporated the HTML code that was generated in hopes that it will work with IE6. If you have IE6 please post back with feedback...the site is:http://www.hcc-sa.orgThanks.

I checked it out in IE6, IE7, and FF and it works fine. In IE7 and FF the last 2 flyout menus fly up instead of down. In IE6 they all fly down.Good luck