Hi there,
I have, but a simple problem. My horizontal menu won’t go horizontal. Can you please help me figure it out?
Here’s the html…
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="Evolution Scientific does this and that and the other." />
<meta name="keywords" content="Evolution, Scientific, labs, consulting" />
<meta name="author" content="www.realinteresting.com" />
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="stylesheet" type="text/css" href="default.css" media="screen" />
<title>Evolution Scientific</title>
<!--[if lt IE 7]>
<style type="text/css" media="screen">
#menuh{float:none;}
body{behavior:url(csshover.htc); font-size:100%;}
#menuh ul li{float:left; width: 100%;}
#menuh a{height:1%;font:bold 0.7em/1.4em arial, sans-serif;}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="flash">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="760" height="170">
<param name="movie" value="test esi flash6.swf" />
<param name="quality" value="high" />
<embed src="test esi flash6.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="760" height="170"></embed>
</object>
</div>
<!--//end #flash//-->
</div><!--//end #headern//-->
<div id="menu">
<div id="search">
<form id="searchform" method="get" action="">
<fieldset>
<legend>Search</legend>
<input id="searchinput" type="text" name="searchinput" value="" />
<input id="searchsubmit" type="submit" value="Search" />
</fieldset>
</form>
</div>
<div id="menuh-container">
<div id="menuh">
<ul>
<li id="current"><a href="main.html" class="top_parent">Home</a></li>
<li><a href="history.html">History</a></li>
<li><a href="mission.html">Mission</a></li>
<li><a href="services.html" class="parent">Services</a></li>
<ul>
<li><a href="#">Sub 1:2:1</a></li>
<li><a href="#">Sub 1:2:2</a></li>
<li><a href="#">Sub 1:2:3</a></li>
<li><a href="#">Sub 1:2:4</a></li>
</ul>
<li><a href="contact.html">Contact</a></li>
<li><a href="careers.html">Careers</a></li>
<li id="ESIT"><a href="esit.html">ESIT</a></li>
<li><a href="news.html">News</a></li>
</ul>
</div>
</div>
</div> <!-- ends Menu -->
<div id="page">
<div id="content">
<div>
<h1 class="title">Welcome to Our Website!</h1>
</div>
<div id="mission">
<div class="img-shadow">
<img src="images/esi_chemistry.gif" id="intro_img"/>
</div>
<h2>Our Vision</h2>
<p>
The vision of the Evolution Scientific Management Team and Employees is to provide a service which differentiates us from the competition. In providing products and quality services to our customers, our goal of becoming an industry leader in our field can be attained. Evolution Scientific employees maintain the highest level of integrity and are expected to remain customer oriented. Through a foundation of hard work and customer trust, Evolution Scientific believes our stated goals can be achieved.
</p>
</div> <!-- end of mission div -->
<blockquote><p>EVOLUTION SCIENTIFIC IS NOW AN AUTHORIZED SUBCONTRACTOR FOR VWR INTERNATIONAL</p></blockquote>
</div> <!-- ends content-->
<div id="sidebar">
<ul>
<li>
<h2>Recent Updates</h2>
<ul>
<li>
<h3><span>8/07/2007:</span> New Collaboration</h3>
<p class="mytext">Evolution Scientific is now an authorized subcontractor for VWR International</p>
</li>
</ul>
</li>
<li>
<h2>Some of our services</h2>
<ul class="list">
<li>Preventive Maintenance </li>
<li>Instrument Calibration </li>
<li>Corrective and Emergency </li>
<li>Maintenance</li>
<li>Engineering Solutions</li>
<li>Validation Services</li>
<li>Technical Staffing</li>
<li>Project Management</li>
<li>Consulting Services</li>
<li>Technical Writing</li>
<li>Training Programs</li>
</ul>
</li>
</ul>
</div>
<div style="clear: both;"> </div>
</div>
</div> <!-- ends page-->
</div><!--//end #centerColumn//-->
<div id="footer">
<p id="links">Evolution Scientific: (215) 794-8512 || Fax Number: (215) 794-8513</p>
<p id="legal">Copyright © 2007. All Rights Reserved | Designed by <a href="http://www.realinteresting.com">RIC</a></p>
</div>
</body>
and here’s the css, which is default.css
body {
margin: 0;
padding: 0;
background: #FFFFFF url(images/img01.gif);
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #7F7772;
}
h1, h2, h3 {
margin-top: 0;
font-weight: normal;
color: #D33333;
}
h1 {
font-size: 197%;
}
h2 {
font-size: 136%;
}
h3 {
font-size: 100%;
font-weight: bold;
}
p, ul, ol {
margin-bottom: 1.6em;
line-height: 180%;
}
p {
}
.mytext {
color: #008700;
}
blockquote {
font-style: italic;
}
ul {
}
ol {
}
a {
color: #008700;
}
a:hover {
text-decoration: none;
}
small {
}
hr {
display: none;
}
img {
border: 1px solid #B2B2B2;
}
img.left {
float: left;
margin: 0 15px 0 0;
}
img.right {
float: right;
margin: 0 0 0 15px;
}
/* Wrapper */
#wrapper {
padding-top: 20px;
}
/* Header */
#header {
width: 760px;
height: 170px;
margin: 0 auto;
}
/* Logo */
#logo {
float: left;
width: 250px;
height: 80px;
padding: 0 0 0 0;
}
#logo h1, #logo h2 {
margin: 0;
text-transform: lowercase;
text-align: center;
}
#logo h1 {
padding-top: 15px;
font-size: 36px;
}
#logo h2 {
font-size: 12px;
}
#logo a {
text-decoration: none;
color: #FFFFFF;
}
/* Search */
#search {
clear: both;
float: right;
width: 300px;
margin-right: 20px;
}
html>body #search {
width: auto;
}
#search form {
margin: 0;
padding: 30px 20px 0 0;
}
#search fieldset {
margin: 0;
padding: 0;
border: none;
}
#search legend {
display: none;
}
#searchinput, #searchsubmit {
font: bold 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#searchinput {
width: 200px;
}
#searchsubmit {
}
/* Menu */
#menu {
border: thin solid black;
width: 760px;
height: 120px;
margin: auto;
background: url(images/wave.jpg);
clear: both;
}
/*
#menu ul {
background: #14DC52;
margin: auto;
padding: 10px 10px 10px 70px;
list-style: none;
background: url(images/wave2.jpg);
}
#menu li {
display: inline;
}
#menu li:hover {
}
#menu a {
padding: 0 10px;
text-align: center;
text-decoration: none;
text-transform: lowercase;
font-size: 136%;
color: #DC143C;
}
#menu a:hover, #menu .active a {
color: #FFFFFF;
}
*/
/* Begin CSS Drop Down Menu */
#menuh-container
{
width: 100%;
height: 120px;
float: left;
}
#menuh
{
font-size: small;
font-family: arial, helvetica, sans-serif;
width:100%;
float:left;
margin:1em;
margin-top: 0em;
}
#menuh a
{
text-align: center;
display:block;
border: 1px solid #555;
white-space:nowrap;
margin:0;
padding: 0.2em;
}
#menuh a, #menuh a:visited /* menu at rest */
{
color: Maroon;
background-color: #5F9EA0;
text-decoration:none;
}
#menuh a:hover /* menu at mouse-over */
{
color: Maroon;
background-color: #5F9EA0;
}
#menuh a.top_parent, #menuh a.top_parent:hover /* attaches down-arrow to all top-parents */
{
background-image: url(navdown_white.gif);
background-position: right center;
background-repeat: no-repeat;
}
#menuh a.parent, #menuh a.parent:hover /* attaches side-arrow to all parents */
{
background-image: url(nav_white.gif);
background-position: right center;
background-repeat: no-repeat;
}
#menuh ul
{
list-style:none;
margin:0;
padding:0;
float:left;
width:6em; /* width of all menu boxes */
}
#menuh li
{
position:relative;
min-height: 1px; /* Sophie Dennis contribution for IE7 */
vertical-align: bottom; /* Sophie Dennis contribution for IE7 */
}
#menuh ul ul
{
position:absolute;
z-index:500;
top:auto;
display:none;
padding: 1em;
margin:-1em 0 0 -1em;
}
#menuh ul ul ul
{
top:0;
left:100%;
}
div#menuh li:hover
{
cursor:pointer;
z-index:100;
}
div#menuh li:hover ul ul,
div#menuh li li:hover ul ul,
div#menuh li li li:hover ul ul,
div#menuh li li li li:hover ul ul
{display:none;}
div#menuh li:hover ul,
div#menuh li li:hover ul,
div#menuh li li li:hover ul,
div#menuh li li li li:hover ul
{display:block;}
/* End CSS Drop Down Menu */
/* Page */
#page {
width: 760px;
margin: 0 auto;
background: #FFFFFF url(images/img05.gif) repeat-y;
}
/* Content */
#content {
float: right;
width: 470px;
padding: 30px 20px;
background: url(images/img06.gif) repeat-x;
}
.title {
padding-bottom: 5px;
border-bottom: 1px solid #EDEBD5;
}
.twocols {
}
.twocols .col1 {
float: left;
width: 225px;
}
.twocols .col2 {
float: right;
width: 225px;
}
.list {
margin-left: 0;
padding-left: 0;
list-style: none;
}
.list li {
padding-left: 10px;
background: url(images/img10.gif) no-repeat left center;
}
/* Sidebar */
#sidebar {
float: left;
width: 210px;
padding: 35px 20px;
background: url(images/img06.gif) repeat-x;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}
#sidebar li {
background: url(images/img09.gif) repeat-x 0px 31px;
}
#sidebar li ul {
padding: 15px;
}
#sidebar li li {
background: none;
}
#sidebar h2 {
height: 25px;
margin: 0;
padding: 5px 0 0 15px;
background: url(images/img08.gif) no-repeat;
font-size: 100%;
font-weight: bold;
}
#sidebar h3 {
margin: 0;
font-size: 85%;
}
#sidebar p {
margin-top: 0;
line-height: normal;
}
#sidebar a {
}
#sidebar a:hover {
}
#sidebar .list li {
padding: 5px 0;
}
#sidebar .list {
color: #008700;
}
/* Footer */
#footer {
clear: both;
width: 760px;
margin: 0 auto;
padding: 20px 0;
background: url(images/img07.gif) repeat-x;
}
#footer p {
margin: 0;
text-align: center;
font-size: 77%;
}
#footer a {
color: #CCCCCC;
}
p#links {
font-size: 100%;
color: white;
}
All I need is for the menu to display horizontally, the way its supposed to.
Thank you very much!
