2 Replies - 944 Views - Last Post: 21 September 2012 - 06:35 AM

#1 JoshBolding  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 21-September 12

CSS Dropdown Menu built with CSS3Menu will not work correctly

Posted 21 September 2012 - 06:29 AM

Hi all,

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&quot; Radial Drilling Spool">6000 Lb. Pull 5/8&quot; 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.

Is This A Good Question/Topic? 0
  • +

Replies To: CSS Dropdown Menu built with CSS3Menu will not work correctly

#2 DarenR  Icon User is online

  • D.I.C Lover

Reputation: 431
  • View blog
  • Posts: 2,988
  • Joined: 12-January 10

Re: CSS Dropdown Menu built with CSS3Menu will not work correctly

Posted 21 September 2012 - 06:31 AM

what browser are you using to view the site? If i am correct iedoes not support cs3
Was This Post Helpful? 0
  • +
  • -

#3 JoshBolding  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 21-September 12

Re: CSS Dropdown Menu built with CSS3Menu will not work correctly

Posted 21 September 2012 - 06:35 AM

I am using Safari on Mac atm
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1