boylesg Posted June 14, 2014 Share Posted June 14, 2014 (edited) I have gotten this far and everything is working as expected. Except that I cannot figure out how to get the child menu under "Services" to show when you click it with the mouse. Can some one show me how to do this? At this point I just want the menu items to show up as is - I will worry about their formatting and appearance in the next stage. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=windows-1252" http-equiv="Content-Type" /> <title>Untitled 1</title> <style> h1 { font-family:"Arial"; font-size:xx-large; font-weight:bold; color:white; } h2 { font-family:"Arial"; font-size:x-large; font-weight:bold; color:white; } h3 { font-family:"Arial"; font-size:large; font-weight:bold; color:white; } h4 { font-family:"Arial"; font-size:medium; font-weight:bold; color:white; } h5 { font-family:"Arial"; font-size:small; font-weight:bold; color:white; } h6 { font-family:"Arial"; font-size:x-small; font-weight:bold; color:white; } .shadow { text-shadow:3px 3px 3px black; }} </style> </head> <body> <style> #container { width:1060px; margin:0 auto; background-color:#004200; font-family:"Arial"; font-size:small; color:white; text-align:left; border-top-left-radius:5px; border-bottom-left-radius:5px; border-top-right-radius:5px; border-bottom-right-radius:5px; border-style:solid; border-top-color:#006F00; border-left-color:#006F00; border-bottom-color:#002200; border-right-color:#002200; } #header { clear:both; } #navigation { float:left; width:15%; font-family:"Arial"; font-size:small; color:white; text-align:left; clear:right; } #content { float:left; width:84%; background-color:white; font-family:"Arial"; font-size:small; color:black; text-align:left; border-top-left-radius:5px; border-bottom-left-radius:5px; border-top-right-radius:5px; border-bottom-right-radius:5px; border-color:#006600; border-style:solid; border-bottom-color:#006F00; border-right-color:#006F00; border-top-color:#002200; border-left-color:#002200; } #feature { float:right; width:25%; height:300px; font-family:"Arial"; font-size:small; color:white; text-align:left; background-color:black; border-style:solid; border-top-color:#808080; border-left-color:#808080; border-bottom-color:#333333; border-right-color:#333333; position: relative; right: 5px; top: 5px; border-top-left-radius:5px; border-bottom-left-radius:5px; border-top-right-radius:5px; border-bottom-right-radius:5px; } #footer { clear:both; font-family:"Arial"; font-size:small; color:white; text-align:left; } #heading { float:left; margin:0 10px; } #columns { clear:both; } #circle { width:79px; height:79px; border-radius:45px; border:5px solid #330396; background:#039C35; position:relative; z-index:1; float:left; margin-top:18px; margin-left:10px; } #rectangle1 { width:71px; height:25px; background-color:#330396; top:28px; left:4px; position:relative; } #rectangle2 { width:25px; height:71px; background-color:#330396; top:-21px; left:28px; position:relative; } #NavMenuItem a{ display: block; width: 84%; height: 30px; text-align:right; line-height: 30px; vertical-align: middle; margin-left: auto; margin-right: auto; border-style:solid; border-top-color:#5404FB; border-left-color:#5404FB; border-bottom-color:#1A014B; border-right-color:#1A014B; background-color:#330396; color:white; padding-right:15px; } #NavMenuItem a:hover { display: block; width: 84%; height: 30px; text-align:right; line-height: 30px; vertical-align: middle; border-style:solid; border-top-color:#5404FB; border-left-color:#5404FB; border-bottom-color:#1A014B; border-right-color:#1A014B; background-color:#330396; color:white; font-weight:bold; padding-right:15px; } #NavMenuItem a:active { display: block; width: 84%; height: 30px; text-align:right; line-height: 30px; vertical-align: middle; border-style:solid; border-top-color:#1A014B; border-left-color:#1A014B; border-bottom-color:#5404FB; border-right-color:#5404FB; background-color:#330396; color:white; padding-right:15px; } #NavMenu { list-style-type: none; margin: 0; padding: 0; } #NavSubMenu { list-style-type: none; position: absolute; visibility: hidden; }/* #NavMenuItem.active ul { list-style-type: none; position: absolute; visibility:visible; }*/ #SubMenuArrow { position:absolute; top:208px; left:154px; line-height: 30px; width:10px; } </style> <div id="container"> <div id="header"> <div id="circle"> <div id="rectangle1"></div> <div id="rectangle2"></div> </div> <div id="heading"> <h1 class="shadow">Bushland Recovery</h1> <h4 class="shadow">Indigenous flora protection</h4> </div> </div> <div id="columns"> <nav id="navigation"> <ul id="NavMenu"> <li id="NavMenuItem"><a href="index.htm">Home</a></li> <li id="NavMenuItem"><a href="Definitions.htm">Definitions</a></li> <li id="NavMenuItem"><a href="">Services</a><div id="SubMenuArrow">▸</div> <ul id="NavSubMenu"> <li id="NavMenuItem"><a href="Councils.htm">Councils</a></li> <li id="NavMenuItem"><a href="GovOrg.htm">Goverment</a>;</li> <li id="NavMenuItem"><a href="UtilityCompanies.htm">Utilities</a></li> <li id="NavMenuItem"><a href="Private.htm">Private</a></li> </ul> </li> <li id="NavMenuItem"><a href="Database.php">Staff portal</a></li> </ul> </nav> <div id="content"> <div id="feature"> <p>Current jobs</p> </div> <p>Main content</p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div> </div> <div id="footer"> <p>Footer</p> </div> </div> </body></html> Edited June 14, 2014 by Greg Boyles Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now