#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2008
    Posts
    84
    Rep Power
    41

    Question Drop down menu problem


    Hello everyone, I need help with my drop down menu. There is a problem with CSS I think because it conflict with each other. I download both template and drop down menu script from somewhere else.

    This is the original html template
    http://www.styleshout.com/templates/...e11/index.html

    This is my website with drop down menu added but it's not working
    http://ghazifly.110mb.com/marketplace11/

    I guess the template CSS might clash with the dropdownmenu CSS.

    My index.html navigation code, I think theres nothing wrong with this code.
    Code:
    	<!-- navigation starts-->	
    	<div  id="nav">
    		<ul><ul id="jsddm">
    			<li><a href="index.html">Home</a></li>
                
                             <li><a href="#">Drop Down Menu</a>
    		<ul>
    			     <li><a href="#">Other page</a></li>
    			     <li><a href="#">jQuery Plugin</a></li>
    			     <li><a href="#">Ajax Navigation</a></li>
    		</ul>
    	       </li>
                
    			<li><a href="index.html">Archives</a></li>			
    			<li><a href="index.html">About</a></li>
                			
    
    </ul> 		
    		</ul>
    	<!-- navigation ends-->
    My website CSS top navigation code:
    PHP Code:
    /* Navigation */
    #nav {
        
    clearboth;    
        
    padding0;            
    }
    #nav ul {
        
    floatleft;
        list-
    stylenone;
        
    background#E4E4E4 url(nav.jpg) repeat-x;    
        
        
    padding0;    margin0 0 0 30px;
        
    height45px;
        
    displayinline;
        
    text-transformuppercase;
    }
    #nav ul li {
        
    displayinline;
        
    margin0padding0;
    }
    #nav ul li a {
        
    displayblock;

        
    widthauto;
        
    margin0;
        
    padding0 15px;    
        
    border-right1px solid #dadada;
        
    border-left1px solid #fafafa;    
        
    border-bottomnone;
        
    color#555;
        
    fontbold 14px/45px "Century Gothic""Trebuchet MS"HelveticaArialGenevasans-serif;
        
    text-transformuppercase;
        
    text-decorationnone;    
        
    letter-spacing1px;
    }
    #nav ul li a:hover, 
    #nav ul li a:active {
        
    color#326ea1;
    }
    #nav ul li#current a {    
        
    background#DBDBDB url(nav-current.jpg) repeat-x;        

    My dropdownmenu CSS code:
    PHP Code:
    /* menu styles */
    #jsddm
    {    margin0;
        
    padding0}

        
    #jsddm li
        
    {    floatleft;
            list-
    stylenone;
            
    font12px TahomaArial}

        
    #jsddm li a
        
    {    displayblock;
            
    background#324143;
            
    padding5px 12px;
            
    text-decorationnone;
            
    border-right1px solid white;
            
    width70px;
            
    color#EAFFED;
            
    white-spacenowrap}

        
    #jsddm li a:hover
        
    {    background#24313C}
            
            #jsddm li ul
            
    {    margin0;
                
    padding0;
                
    positionabsolute;
                
    visibilityhidden;
                
    border-top1px solid white}
            
                
    #jsddm li ul li
                
    {    floatnone;
                    
    displayinline}
                
                
    #jsddm li ul li a
                
    {    widthauto;
                    
    background#A9C251;
                    
    color#24313C}
                
                #jsddm li ul li a:hover
                
    {    background#8EA344} 
    Please help me with CSS. I spend like 10 hours experimenting with CSS but still not working,

    So as you can see I only pasted the right code so it should be working but somehow both CSS interfere with each other and messed up my top navigation design. Also the dropdownmenu is showing horizontally. Any help is appreciated.

    Thanks in advance
    Last edited by sg552; July 23rd, 2010 at 07:54 AM.

IMN logo majestic logo threadwatch logo seochat tools logo