Hello friends ,

I am having problems with my previous navigation bar when viewed in ie6 thats why decided to switch to jquery and css navigation which is supported by ie6 but when tried the code it dosnt seem to wrk properly though i hav used color instead of images but the arrow button is not showing i am pasting all the codes

 

html

<ul class="topnav">  
   <li><a href="#">Home</a></li>  
   <li>  
       <a href="#">Website design</a>  
       <ul class="subnav">  
           <li><a href="#">Small Business Websites</a></li>  
           <li><a href="#">Ecommerce Website Design</a></li> 
		  <li><a href="#">CMS Websites</a></li>  
		    <li><a href="#">Database Driven Websites</a></li>  
			  <li><a href="#">Personal WebSites</a></li> 
			  <li><a href="#">Site Redesigns</a></li>    
       </ul>  <span></span>
   </li>  
    <li>  
       <a href="#">Internet marketing </a>  
       <ul class="subnav">  
           <li><a href="#">Search engine submission</a></li>  
           <li><a href="#">Directory submission</a></li> 
		  <li><a href="#">Content writing</a></li>  

       </ul>  <span></span>
   </li>   
   <li>  
       <a href="#">Website Hosting</a>  
       <ul class="subnav">  
           <li><a href="#">Domain name registration</a></li>  
           <li><a href="#">Windows hosting</a></li> 
		  <li><a href="#">Linux hosting</a></li>  

       </ul>  <span></span>
   </li> 
   <li>  
       <a href="#">Graphic design</a>  
       <ul class="subnav">  
           <li><a href="#">Logo design</a></li>  
           <li><a href="#">Banner design</a></li> 
		  <li><a href="#">Brochure design</a></li>  
		    <li><a href="#">Image retouching</a></li>
			  <li><a href="#">Brochure design</a></li>
			    <li><a href="#">Stationary design</a></li>
				<li><a href="#">Flyer design</a></li>

       </ul>  <span></span>
   </li> 
   <li>  
       <a href="#">Animations</a>  
       <ul class="subnav">  
           <li><a href="#">Web banner animations</a></li>  
           <li><a href="#">3d logo animations</a></li>
<li><a href="#">Web page animations</a></li>
<li><a href="#">Transit animations</a></li>
<li><a href="#">Javascript animations</a></li>

       </ul>  <span></span>
   </li> 
   <li><a href="#">Tutorials</a></li> 
<li>  
       <a href="#">Company Profile</a>  
       <ul class="subnav">  
           <li><a href="#">Contact us</a></li>  
           <li><a href="#">Portfolio</a></li>
<li><a href="#">How to pay</a></li>
<li><a href="#">FAQ's</a></li>
<li><a href="#">Sitemap</a></li>

       </ul>  <span></span>
   </li>  
</ul> 

 

css

<style type="text/css">ul.topnav {  
   list-style: none;  
   padding: 0 20px;  
   margin: 0;  
   float: left;  
   width: 970px;  
   background: #222;  
   font-size: 12px;  
   background: url(../images/topnav_bg.gif) repeat-x; background-color:#009999;
font:Trebuchet MS; 

}  
ul.topnav li {  
   float: left;  
   margin: 0;  
   padding: 0 15px 0 0;  
   position: relative; /*--Declare X and Y axis base for sub navigation--*/  
}  
ul.topnav li a{  
   padding: 10px 5px;  
   color: #fff;  
   display: block;  
   text-decoration: none;  
   float: left;  
}  
ul.topnav li a:hover{  
   background: url(topnav_hover.gif) no-repeat center top; background-color:#0099CC;  
}  
ul.topnav li span { /*--Drop down trigger styles--*/  
   width: 17px;  
   height: 35px;  
   float: left;  
   background: url(subnav_btn.gif) no-repeat center top;   
}  
ul.topnav li span.subhover {background-position: center bottombottom; cursor: pointer;} /*--Hover effect for trigger--*/  
ul.topnav li ul.subnav {  
   list-style: none;  
   position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/  
   left: 0; top: 35px;  
   background: #333;  
   margin: 0; padding: 0;  
   display: none;  
   float: left;  
   width: 170px;  
   border: 1px solid #111;  
}  
ul.topnav li ul.subnav li{  
   margin: 0; padding: 0;  
   border-top: 1px solid #252525; /*--Create bevel effect--*/  
   border-bottom: 1px solid #444; /*--Create bevel effect--*/  
   clear: both;  
   width: 170px;  
}  
html ul.topnav li ul.subnav li a {  
   float: left;  
   width: 145px;  
   background: #333 url(dropdown_linkbg.gif) no-repeat 10px center; background-color:#003399;  
   padding-left: 20px;  
}  
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/  
   background: #222 url(dropdown_linkbg.gif) no-repeat 10px center; background-color:#0033CC;  
}body {
background-color: #003399;
}
</style>

javascript

<script type="text/javascript">$(document).ready(function(){  

   $("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)  

   $("ul.topnav li span").click(function() { //When trigger is clicked...  

       //Following events are applied to the subnav itself (moving subnav up and down)  
       $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click  

       $(this).parent().hover(function() {  
       }, function(){  
           $(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up  
       });  

       //Following events are applied to the trigger (Hover events for the trigger)  
       }).hover(function() {  
           $(this).addClass("subhover"); //On hover over, add class "subhover"  
       }, function(){  //On Hover Out  
           $(this).removeClass("subhover"); //On hover out, remove class "subhover"  
   });  

});  </script>

here is my link navigation

where i went wrong?

i am also posting the link i want to achieve want like this

Hi, to get the menu to drop down, you need to trigger it with the image:

 

http://www.sohtanaka.../subnav_btn.gif

 

That's to be placed in your main directory (or wherever the navigation file is).

Hi, to get the menu to drop down, you need to trigger it with the image:

 

http://www.sohtanaka.../subnav_btn.gif

 

That's to be placed in your main directory (or wherever the navigation file is).

 

Well i got my menu working but how to change the background colour of the sub nav no images are there what image its taking in background? here is the linknavigationand can i het rounded corners of the navigation bar like like this with moz attribute? and when i place the navigation in my page it comes like this though i have uploaded the arrow imagenav in the page??