...

View Full Version : CSS menu is not displaying properly



cooperkb
08-05-2011, 12:10 PM
I'm a new user of Expression Web and am building a site for our business and have a horizontal menu bar with drop downs - these work perfectly until text or images etc appear below the drop downs and they no longer display but flick up quickly - without the images etc they still work OK on the same page
I know its a small setting int the CSS but damned if I can find it.
Below is the page code and the CSS page code and would apreciate it very much if someone could help - thanking you in advance

<!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="en-gb" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
#top {
}
#navigator {
clear: both;
position: relative;
display: block;
}
#container {
background-color: #FFFFFF;
margin-right: auto;
margin-left: auto;
width: 760px;
}
</style>
<link href="maincss.css" rel="stylesheet" type="text/css" />
<!-- #BeginEditable "doctitle" -->
<!-- #EndEditable -->
</head>

<body style="margin-left: 0; margin-right: 0; margin-top: 10px; margin-bottom: 0; background-color: #E5E5E5">

<div id="container" style="height: 544px">
<div id="top">
<img alt="Auscoat Webbing and Tapes Banner" height="81" src="images/Banner760.jpg" width="760" /></div>

<div id="navigator">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a>Products</a>

<ul><li><a href="pvcwebbing.html">PVC Webbing</a></li>
<li><a href="weldablewebbing.html">Weldable Webbing</a></li>
<li><a href="saddlery.html">Saddlery</a></li>
<li><a href="trottharness.html">Harness - Trotting</a></li>
<li><a href="driveharness.html">Harness - Driving</a></li>
<li><a href="miniharness.html">Harness - Mini Size</a></li>
<li><a href="hopples.html">Trotting Hopples</a></li></ul></li>
<li><a>Galleries
</a>
<ul><li><a href="saddlepics.html">Saddlery</a></li>
<li><a href="trottpics.html">Harness - Trotting</a></li>
<li><a href="drivepics.html">Harness - Driving</a></li>
<li><a href="minipics.html">Harness - Mini Size</a></li>
<li><a href="hopplepics.html">Trotting Hopples</a></li></ul></li>
<li><a href="contactus.html">Contact Us</a></li>
</ul>
</div>
<!-- #BeginEditable "mainContent" -->
<div id="mainContent" style="height: 399px">
<p>&nbsp;</p>
</div>

<!-- #EndEditable -->

</div>

<div id="copyright" style="left: -3px; top: 28px; height: 15px;">
<p>Copyright 2011All rights reserved</p>
</div>
</body>
</html>

Main CSS
ul {
padding: 0px;
margin: 0px;
background-color: #AF2262;
}
ul li {
display: inline;
float: left;
width: 152px;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
font-weight: bold;
text-transform: uppercase;
color: #DCB520;
height: 30px;
}
ul li a {
text-decoration: none;
background-color: #AF2262;
color: #DDB521;
line-height: 30px;
width: 144px;
display: block;
padding-left: 8px;
}
ul li a:hover {
background-color: #660033;
display: block;
position: relative;
}
ul li ul li a {
background-color: #660033;
}
ul li ul li a:hover {
background-color: #CC0000;
display: block;
}
ul li ul {
visibility: hidden;
}
ul li:hover ul {
visibility: visible;
}
#copyright {
background-color: #CCCCCC;
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
font-style: italic;
color: #666666;
text-align: right;
width: 760px;
margin-right: auto;
margin-left: auto;
position: relative;
clear: both;
margin-top: auto;
clip: rect(auto, auto, auto, auto);
float: none;
}
#mainContent {
margin: 5px;
font-family: Arial, Helvetica, sans-serif;
font-size: large;
padding-left: 10px;
clear: both;
position: relative;
display: block;
}

felixcristober
08-05-2011, 01:48 PM
your have a horizontal menu bar with drop downs in your business. you have using in html code for drop downs in static options.. i think it's easy way to drop down list using in your coding



web development solutions (http://www.thecliffwebsolutions.com/)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum