New Topic/Question
Reply
I have been trying to add a drop down menu to my website, the navigation menus provided by base kit(which is the online website builder i am using) are crap and wont work for me. I am hosted through gandi.net, and the way that site works is it has a maintenance address to which you do your designs, and then you publish to your real site. well the menu I have tried to design works within the maintenance address, but when I try to make it live they just look like plain links on the top of the screen. And when I am testing the menu in the maintenance address the drop downs go behind my other content. I have 0 experience with CSS, and minimal experience with HTML. so here is my CSS code:
ul#css3menu1,ul#css3menu1 ul{
margin:0;list-style:none;padding:0;background-color:#FFFFFF;border-width:0;border-style:solid;border-color:;}
ul#css3menu1 ul{
display:none;position:absolute;left:0;top:100%;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";opacity:0.75;-moz-box-shadow:0px 0px 2px #000;-webkit-box-shadow:0px 0px 2px #000;box-shadow:0px 0px 2px #000;background-color:#1f1f1f;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;padding:0 0 5px;filter:alpha(opacity=75)}
ul#css3menu1 li:hover>*{
display:block;}
ul#css3menu1 li{
position:relative;display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu1 li:hover{
z-index:1;}
ul#css3menu1 ul ul{
position:absolute;left:100%;top:0;opacity:1;}
ul#css3menu1{
font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;padding:0;background-color:#2d3235;background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0.39),rgba(255,255,255,0) 50%,rgba(255,255,255,0)); background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.39),rgba(255,255,255,0) 50%,rgba(255,255,255,0)); background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.39)),to(rgba(255,255,255,0)),color-stop(50%,rgba(255,255,255,0))); background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0.39),rgba(255,255,255,0) 50%,rgba(255,255,255,0));border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;border-style:solid;border-color:#3d4245;
*display:inline;}
* html ul#css3menu1 li a{
display:inline-block;}
ul#css3menu1>li{
margin:0;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
outline-style:none;}
ul#css3menu1 a{
display:block;vertical-align:middle;text-align:left;text-decoration:none;font:15px Tahoma, sans-serif;color:#FFFFFF;cursor:pointer;padding:3px;background-color:;background-repeat:repeat;border-width:0px;border-style:none;border-color:;}
ul#css3menu1 ul li{
float:none;margin:0;}
ul#css3menu1 ul a{
text-align:left;padding:7px;-moz-box-shadow:0;-webkit-box-shadow:0;box-shadow:0;border-width:0 0 1px 0;border-style:solid;border-color:#000000;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:13px Tahoma, sans-serif;color:#FFFFFF;text-decoration:none;}
ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{
border-style:none;color:#e4db25;text-decoration:none;}
ul#css3menu1 span{
display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu1 ul span{
background-image:url("arrowsub.png");padding-right:27px;}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li a.pressed{
-moz-box-shadow: ;-webkit-box-shadow: ;box-shadow: ;border-style:solid;color:#ead823;text-decoration:none;}
ul#css3menu1>li>a{
padding:7px 12px 11px 33px;}
ul#css3menu1 li.topmenu>a{
border-width:1px 0 1px 0;border-style:solid;border-color:#222528;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;padding:7px 12px 11px 12px;text-shadow:-1px -1px 2px #151515;}
ul#css3menu1 li.topmenu:hover>a,ul#css3menu1 li.topmenu a.pressed{
border-style:solid;text-shadow:-1px -1px 2px #151515;}
ul#css3menu1 li.toproot>a{
background-image:url("arrowmain0.png");background-repeat:no-repeat;background-position:0 50%;border-width:1px 0 1px 0;border-style:solid;border-color:#222528;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;padding:7px 12px 11px 33px;text-shadow:-1px -1px 2px #151515;}
ul#css3menu1 li.toproot:hover>a,ul#css3menu1 li.toproot a.pressed{
background-image:url("arrowmain1.png");border-style:solid;text-shadow:-1px -1px 2px #151515;}
and here is the HTML code for the Menu
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!-- Start css3menu.com HEAD section -->
<link rel="stylesheet" href="Hydessco Menu_files/css3menu1/style.css" type="text/css" /><style>._css3m{display:none}</style>
<!-- End css3menu.com HEAD section -->
</head>
<body style="background-color:#EBEBEB">
<!-- Start css3menu.com BODY section -->
<ul id="css3menu1" class="topmenu">
<li class="topmenu"><a href="http://www.hydessco.com" title="Home" style="height:18px;line-height:18px;">Home</a></li>
<li class="topmenu"><a href="http://www.hydessco.com/contact-1" title="Contact" style="height:18px;line-height:18px;">Contact</a></li>
<li class="topmenu"><a href="http://www.hydessco.com/about-us" title="About Us" style="height:18px;line-height:18px;">About Us</a></li>
<li class="topmenu"><a href="http://www.hydessco.com/services" title="Services" style="height:18px;line-height:18px;">Services</a></li>
<li class="toproot"><a href="http://www.hydessco.com/products" title="Products" style="height:18px;line-height:18px;"><span>Products</span></a>
<ul>
<li><a href="http://www.hydessco.com/products/capillary-equipment" title="Capillary Equipment"><span>Capillary Equipment</span></a>
<ul>
<li><a href="http://www.hydessco.com/products/capillaryequipment/land-based" title="Land Based">Land Based</a></li>
<li><a href="http://www.hydessco.com/products/capillaryequipment/offshore" title="Offshore">Offshore</a></li>
<li><a href="http://www.hydessco.com/products/capillaryequipment/injector-heads" title="Injector Heads">Injector Heads</a></li>
<li><a href="http://www.hydessco.com/products/capillaryequipment/tubing-reels" title="Tubing Reels">Tubing Reels</a></li>
<li><a href="http://www.hydessco.com/products/capillaryequipment/counters" title="Counters">Counters</a></li>
</ul></li>
<li><a href="http://www.hydessco.com/products/coil-tubing-equipment" title="Coil Tubing Equipment"><span>Coil Tubing Equipment</span></a>
<ul>
<li><a href="http://www.hydessco.com/products/coiltubingequipment/land-based" title="Land Based">Land Based</a></li>
<li><a href="http://www.hydessco.com/products/coiltubingequipment/offshore" title="Offshore">Offshore</a></li>
<li><a href="http://www.hydessco.com/products/coiltubingequipment/injector-heads" title="Injector Heads">Injector Heads</a></li>
<li><a href="http://www.hydessco.com/products/coiltubingequipment/reels" title="Reels">Reels</a></li>
<li><a href="http://www.hydessco.com/products/coiltubingequipment/cabins" title="Cabins">Cabins</a></li>
</ul></li>
<li><a href="http://www.hydessco.com/products/nitrogen-pumping-equipment" title="Nitrogen Pumping Equipment"><span>Nitrogen Pumping Equipment</span></a>
<ul>
<li><a href="http://www.hydessco.com/products/nitrogen/land-based-n2" title="Land Based N2">Land Based N2</a></li>
<li><a href="http://www.hydessco.com/products/nitrogen/offshore-n2" title="Offshore N2">Offshore N2</a></li>
</ul></li>
<li><a href="http://www.hydessco.com/products/radial-drilling" title="Radial Drilling"><span>Radial Drilling</span></a>
<ul>
<li><a href="http://www.hydessco.com/products/radialdrilling/radial-drilling-spool" title="6000 Lb. Pull 5/8" Radial Drilling Spool">6000 Lb. Pull 5/8" Radial Drilling Spool</a></li>
</ul></li>
<li><a href="http://www.hydessco.com/products/fluid-pumping-equipment" title="Fluid Pumping Equipment"><span>Fluid Pumping Equipment</span></a>
<ul>
<li><a href="http://www.hydessco.com/products/fluidpumping/truck-pump" title="Truck Pump">Truck Pump</a></li>
<li><a href="http://www.hydessco.com/products/fluidpumping/skid-pump" title="Skid Pump">Skid Pump</a></li>
</ul></li>
<li><a href="http://www.hydessco.com/products/wet-kit" title="Wet Kit">Wet Kit</a></li>
<li><a href="http://www.hydessco.com/products/wireline-equipment" title="Wireline Equipment"><span>Wireline Equipment</span></a>
<ul>
<li><a href="http://www.hydessco.com/products/wirelineequipment/offshore" title="Offshore">Offshore</a></li>
</ul></li>
</ul></li>
</ul><p class="_css3m"><a href="http://css3menu.com/">CSS3 Drop Down Menu Free Css3Menu.com</a></p>
<!-- End css3menu.com BODY section -->
</body>
</html>
the website in question is www.hydessco.com, and I know its rough but I have just started on it and need to figure out this menu situation before I can move on.
MultiQuote
| 