Trouble creating dropdown menu in header
-
Any help would be appreciated… Please refer to the website: http://www.you-dude.com
I am creating a website for a friend and I am trying to implement a dropdown navigation menu into the header. I am currently unable to move the navigation bar where I would like. For some reason the header image is blocking my navigation bar, how can I fix this? Also, if I may ask for some help figuring out how to customize the code I got for this navigation bar, I would really appreciate it!
Here is the CSS style code I am using for the navigation bar (I put it in a box called “cssmenu_box” because I thought it might be easier to move around, but I am not sure I really need this either):
#cssmenu_box { margin:-10px 140px 30px 0px; float:right; z-index:10; } ul.cssMenu ul { display:none } ul.cssMenu li:hover>ul{display:block} ul.cssMenu ul{position: absolute;left:-1px;top:98%;} ul.cssMenu ul ul{position: absolute;left:98%;top:-2px;} ul.cssMenu,ul.cssMenu ul { margin:0px 0px 0px 0px; list-style:none; padding:0px 1px 1px 0px; background-color:#A5A5A5; background-repeat:repeat; border-color:#A6A6A6; border-width:0px; border-style:solid; z-index:10; } ul.cssMenu table {border-collapse:collapse}ul.cssMenu { display:block; zoom:1; float: left; } ul.cssMenu ul{ width:100%; } ul.cssMenu li{ display:block; margin:1px 0px 0px 1px; font-size:0px; } ul.cssMenu a:active, ul.cssMenu a:focus { outline-style:none; } ul.cssMenu a, ul.cssMenu li.dis a:hover, ul.cssMenu li.sep a:hover { display:block; vertical-align:middle; background-color:#FFFFFF; border-width:0px; border-color:#FCEEB0; border-style:solid; text-align:left; text-decoration:none; padding:5px; _padding-left:0; font:normal 11px Sans-serif; color: #000000; text-decoration:none; cursor:pointer; } ul.cssMenu span{ overflow:hidden; } ul.cssMenu li { float:left; } ul.cssMenu ul li { float:none; } ul.cssMenu ul a { text-align:left; white-space:nowrap; } ul.cssMenu li.sep{ text-align:left; padding:0px; line-height:0; height:100%; } ul.cssMenu li.sep span{ float:none; padding-right:0; width:3; height:100%; display:inline-block; background-color:#A6A6A6; background-image:none;} ul.cssMenu ul li.sep span{ width:100%; height:3; } ul.cssMenu li:hover{ position:relative; } ul.cssMenu li:hover>a{ background-color:#FF1C1C; border-color:#4C99AB; border-style:solid; font:normal 11px Arial; color: #FFFFFF; text-decoration:none; } ul.cssMenu li a:hover{ position:relative; background-color:#FF1C1C; border-color:#4C99AB; border-style:solid; font:normal 11px Arial; color: #FFFFFF; text-decoration:none; } ul.cssMenu li.dis a { color: #AAAAAA !important; } ul.cssMenu img {border: none;float:left;_float:none;margin-right:5px;width:16px; height:16px; } ul.cssMenu ul img {width:16px; height:16px; } ul.cssMenu img.over{display:none} ul.cssMenu li.dis a:hover img.over{display:none !important} ul.cssMenu li.dis a:hover img.def {display:inline !important} ul.cssMenu li:hover > a img.def {display:none} ul.cssMenu li:hover > a img.over {display:inline} ul.cssMenu a:hover img.over,ul.cssMenu a:hover ul img.def,ul.cssMenu a:hover a:hover img.over{display:inline} ul.cssMenu a:hover img.def,ul.cssMenu a:hover ul img.over,ul.cssMenu a:hover a:hover img.def{display:none} ul.cssMenu a:hover ul{display:block} ul.cssMenu span{ display:block; background-image:url(http://www.throughtheconcreterecords.com/youdude/wp-content/themes/datagrid/images/cssmenu/arrv_blue_2.gif); background-position:right center; background-repeat: no-repeat; padding-right:8px;} ul.cssMenu li:hover>a>span{ background-image:url(http://www.throughtheconcreterecords.com/youdude/wp-content/themes/datagrid/images/cssmenu/arrv_white_2.gif); } ul.cssMenu a:hover span{ _background-image:url(http://www.throughtheconcreterecords.com/youdude/wp-content/themes/datagrid/images/cssmenu/arrv_white_2.gif)} ul.cssMenu ul span,ul.cssMenu a:hover table span{background-image:url(http://www.throughtheconcreterecords.com/youdude/wp-content/themes/datagrid/images/cssmenu/arr_blue_2.gif)} ul.cssMenu ul li:hover > a span{ background-image:url(http://www.throughtheconcreterecords.com/youdude/wp-content/themes/datagrid/images/cssmenu/arr_white_2.gif);} ul.cssMenu table a:hover span{background-image:url(http://www.throughtheconcreterecords.com/youdude/wp-content/themes/datagrid/images/cssmenu/arr_white_2.gif)} ul.cssMenu li a.cssMenui0{ font:n; } ul.cssMenu li a.cssMenui0:hover{ font:o; }Here is the code I am using in my header.php file:
<!------ CSS MENU ------> <div id="cssmenu_box"> <ul class="cssMenu cssMenum"> <li class=" cssMenui0"><a class=" cssMenui0" href="#">OEM Products</a></li> <li class=" cssMenui0"><a class=" cssMenui0" href="#"><span>End User Hardware</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class=" cssMenum"> <li class=" cssMenui"><a class=" cssMenui" href="#">RTK Systems</a></li> <li class=" cssMenui"><a class=" cssMenui" href="#">Postprocessing</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class=" cssMenui0"><a class=" cssMenui0" href="#"><span>End User Software</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class=" cssMenum"> <li class=" cssMenui"><a class=" cssMenui" href="#">GeoID</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class=" cssMenui0"><a class=" cssMenui0" href="#">Turn-key Systems</a></li> </ul> </div><!-- end css menu box --> <!---------- end CSS MENU ------->Please help! Thanks!
The topic ‘Trouble creating dropdown menu in header’ is closed to new replies.