CSS Forum

**dgkindy** · 03-05-2010, 10:47 PM

I have been trying to create a horizontal menu with a horizontal submenu, however, I have not been able to get it to work correctly.

When I hover over the top tab, I want the subtab to become active, unfortunately, I cannot get the subtab to become active.

It would appear part of my problem is that I am not activating the submenues but cannot not figure out how to get it to work.

A good example of what I am trying to do is at www.forbes.com

PHP Code:


			
<?php
// start session 
session_start();
// set up some global variables 
@include 'salutations.php';
/*echo '<?xml version="1.0" encoding="UTF-8"?>';*/
echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">';
echo '<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">';
echo '<title>Project Execution Tool</title>';
echo '<head>';
echo '<link rel="shortcut icon" href="favicon.ico">';
echo '<link rel="stylesheet" type="text/css" href="style/menu_style.css" /> ';
echo '<link rel="stylesheet" type="text/css" href="style/style.css" /> ';
echo '<table width=100% valign=Center border="0">';
echo '<tr>';
echo '<td width=50% valign="center" align="left"><img src="images/pet_blue_masthead.gif"></td>';
echo '<td width=50% valign="center" align="right"><img src="images/blue_dog_face.gif" alt="Blue dog" title="Blue" align="right"></td>';
echo '</tr>';
echo '</table>';
echo '<meta name="" content="">';
echo '<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">';
echo '</head>';
echo '<body>';
echo '<div id="globalnav">';
echo '<ul>';
echo ' <li><a href="display_staff.php">Welcome '.$_SESSION['name'].'</a>';
echo '  <ul>';
echo '   <li><a href="#"></a></li>';
echo '  </ul>';
echo ' </li>';
echo ' <li><a href="display_project_list.php" class="here">Home</a>';
echo '  <ul>';
echo '   <li><a href="display_project.php">New Project</a></li>';
echo '   <li><a href="#">All Projects</a></li>';
echo '  </ul>';
echo ' </li>';
echo ' <li><a href="display_md4c4.php">MD4C</a></li>';
echo '  <ul>';
echo '   <li><a href="#"></a></li>';
echo '  </ul>';
echo ' <li><a href="#">Communities</a>';
echo '  <ul>';
echo '   <li><a href="http://supportcentral.ge.com/products/sup_products.asp?prod_id=64511" target="blank">Custom RO/ED PM</a></li>';
echo '   <li><a href="http://supportcentral.ge.com/products/sup_products.asp?prod_id=86515" target="blank">Documentum</a></li>';
//echo '   <li><a href="http://supportcentral.ge.com/products/sup_products.asp?prod_id=30046" target="blank">Global Field Services</a></li>';
echo '   <li><a href="http://supportcentral.ge.com/products/sup_products.asp?prod_id=86227" target="blank">Life Cycle</a></li>';
echo '   <li><a href="http://supportcentral.ge.com/products/sup_products.asp?prod_id=69913" target="blank">O&M Manuals</a></li>';
//echo '   <li><a href="http://supportcentral.ge.com/products/sup_products.asp?prod_id=61227" target="blank">PM COE</a></li>';
//echo '   <li><a href="http://water.corporate.ge.com/serviceops/# target="blank"">Services & Operations Portal</a></li>';
//echo '   <li><a href="http://supportcentral.ge.com/sc_home_new.asp target="blank"">Support Central</a></li>';
echo '  </ul>';
echo ' </li>';
echo ' <li><a href="#">Help</a>';
echo '  <ul>';
echo '   <li><a href="#">How to...</a></li>';
echo '   <li><a href="display_suggestion.php">Comments & Suggestions</a></li>';
echo '   <li><a href="about.php">About</a></li>';
echo '  </ul>';
echo ' </li>';
echo '</ul>';
echo '</div>'; 
echo '<br /><br /><br /><br /><br />';
echo '</body>';
echo '</html>';
?>

Code:

/*globalnav*/
#globalnav {
 position:relative;
 float:left;
 width:100%;
 padding:0 0 1.75em 1em;
 margin:0;
 list-style:none;
 line-height:1em;
}
#globalnav LI {
 float:left;
 margin:0;
 padding:0;
}
#globalnav A {
 display:block;
 color:#444;
 text-decoration:none;
 font-weight:bold;
 font-family: "GE Inspira", Arial, Helvetica, san-serif;
 font-size: 75%;
 background:#9EA3D2;  /*Pantone 7445*/
 margin:0;
 padding:0.25em 1em;
 border-left:1px solid #fff;
 border-top:1px solid #fff;
 border-right:1px solid #aaa;
}
#globalnav A:hover,
#globalnav A:active,
#globalnav A.here:link,
#globalnav A.here:visited {
 background:#3B73B9; /*Panton 7455*/
 color:#000000;
}
#globalnav A.here:link,
#globalnav A.here:visited {
 position:relative;
 z-index:102;
}
/*subnav*/
#globalnav UL {
 position:absolute;
 left:0;
 top:1.5em;
 float:left;
 background:#3B73B9; /*Panton 7455*/
 width:100%;
 margin:0;
 padding:0.25em 0.25em 0.25em 1em;
 list-style:none;
 border-top:1px solid #fff;
}
#globalnav UL LI {
 float:left;
 display:block;
 margin-top:1px;
}
#globalnav UL A {
 background:#3B73B9; /*Panton 7455*/
 color:#fff;
 display:inline;
 margin:0;
 padding:0 1em;
 border:0
}
#globalnav UL A:hover,
#globalnav UL A:active,
#globalnav UL A.here:link,
#globalnav UL A.here:visited {
 color:#444;
}

**MattGoucher** · 03-06-2010, 03:50 AM

I'm working on a fix for your navigation, however did you know that even if you are writing in PHP, you dont have to echo out all of the html syntax? There may be an error in there..Check this out:

PHP Code:


			
<?php
    //PHP Code Goes Here.
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>Page title here</title>
    <meta name="DC.title" content="Title here" />
    <meta name="DC.subject" content="Keywords here" />
    <meta name="DC.description" content="Description here" />
    <meta name="DC.format" content="text/html" />
    <meta name="DC.publisher" content="Publisher here" />
    <meta name="DC.language" content="en" />
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <link rel='stylesheet' type='text/css' href='css/style.css' />
</head>
<body>

    <div id="wrapper">


    </div>

</body>

</html>

**dgkindy** · 03-06-2010, 08:50 AM

thanks for the suggestions. As all beginners, I got a hold of an idea and went mad, I have since revised my code and it makes it for simpler reading.

Look forward to see how you fix the problem. I am currently using IE6, not that i matters, I can use any brousser if need be.

Thanks

**dgkindy** · 03-13-2010, 07:11 AM

Does anyone have any suggestions on how to fix the CSS code to resolve the mouse over functionality?

**chrishirst** · 03-13-2010, 04:11 PM

http://www.xs4all.nl/~peterned/csshover.html

**karmadir** · 03-14-2010, 03:46 PM

If nothing works, you can download the horizontal menu from the internet also.

There are lots of sites who really have high quality horizontal and vertical menus of all kinds.

**dgkindy** · 03-14-2010, 08:28 PM

I have looked around on several sites, the ones that I have found don't seem to work The only working example I have been able to find is www.forbes.com

Dynamic drive has lots of samples but do not operate in the manner that I am looking for. It would seem to be a popular request of a layout style but it would seem a bit difficult to create

**LadynRed** · 03-16-2010, 03:57 PM

Try - http://www.cssplay.co.uk/menus/ -- the Multilevel Dropline is what you want