css submenu a href problem

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • oll3i
    Contributor
    • Mar 2007
    • 679

    css submenu a href problem

    i have written css tab menu
    but my links in submenu inherit the style of a href in main menu (#menu ul li a)?
    when i hover over the links in submenu they do change as i want them to change they just display as #menu ul li a

    Code:
    #menu {
    	position:absolute;
    	height:auto;
    	width:930px;
    	top:10px;
    	left:10px;
    	}
    	
    #menu ul {
    float:left;
    margin:0;
    padding:0;
    list-style:none;
    }	
    #menu ul li{
    display:inline;
    }
    
    #menu ul li a{
    width:80px;
    height:22px;
    float:left;
    display:block;
    margin:0 1px 0 0;
    font-size:100%;
    text-decoration:none;
    text-align:center;
    color:#FFF;
    font-weight:bold;
    background:url(../images/top_menu_normal.gif) left top no-repeat;
    padding:3px 0 0 0;}
    
    
    
    
    #menu ul li a:hover{
    width:80px;
    height:22px;
    float:left;
    display:block;
    text-align:center;
    margin-top:0;
    margin-right:1px;
    margin-bottom:0;
    margin-left:0;
    font-size:100%;
    text-decoration:none;
    color:#FFF;
    font-weight:bold;
    background:url(../images/top_menu_hover.gif) left top no-repeat;  
    padding:3px 0 0 0;
    }
    #menu ul li a:active{
    width:80px;
    height:22px;
    float:left;
    display:block;
    text-align:center;
    margin-top:0;
    margin-right:1px;
    margin-bottom:0;
    margin-left:0;
    font-size:100%;
    text-decoration:none;
    color:#FFF;
    font-weight:bold;
    background:url(../images/top_menu_hover.gif) left top no-repeat;  
    padding:3px 0 0 0;
    }
    
    #menu ul #submenu{
    position:absolute;
    top:2px;
    left:0px;
    float:left;
    width:818px;
    height:10px;
    margin:0;
    padding:0;
    font-size:100%;
    }
    
    #menu ul #submenu ul {	
    position:relative;
    margin:0;
    padding:0;
    bottom:-1.4em;
    left:0px;
    font-size:100%;
    width:818px;
    background:none;
    }
    
    
    #menu ul #submenu li{
    display:inline;
    list-style:none;
    border-right:1px solid #CCC;
    padding-right:2px;
    background:none;
    }
    
    
    
    
    #menu ul#submenu li a{
    text-decoration:none;
    color:#000;
    background:none;
    }
    
    
    
    
    
    
    #menu ul #submenu  li a:hover{
    text-decoration:none;
    color:#CCC;
    background:none;
    }
    #menu ul #submenu  li a:active{
    text-decoration:none;
    color:#CCC;
    background:none;
    }
    what should i change?
    thank you
  • oll3i
    Contributor
    • Mar 2007
    • 679

    #2
    thank you i figured it out :)

    Comment

    Working...