Need wider width on second level menu

Last post 04-30-2007 2:29 PM by cecook05. 1 replies.

Sort Posts:

  • Need wider width on second level menu

    04-30-2007, 12:06 PM
    • Member
      323 point Member
    • cecook05
    • Member since 06-13-2006, 5:27 PM
    • Posts 151

    From looking at the white paper on CSS Friendly adapters, it looks like you should be able to have a second tier menu be wider than the first menu.  The simple menu example that came with the download has the width on both tiers the same.  Can someone tell me if it is possible to have the second tier menu be wider than the first?  Not matter what I put in for a width on the second tier, it defaults to the width of the first.  Most likely a css thing but any help would be appreciated.

    .CCMenu ul.AspNet-Menu /* Tier 1 */
    {
        width: 26em; /* This is more than (6em x 2) because we want to leave room for borders around the <li> elements that are selected */
        letter-spacing:1px;
        font-size: .8em;  
    }
    
    .CCMenu ul.AspNet-Menu ul  /* Tier 2 */
    {
        width: 8em;
        top: 100%;
        left: 0px;
            
    }
    
    .CCMenu ul.AspNet-Menu ul ul  /* Tier 3+ */
    {
        top: -0.5em;
        left: 6em;
        
    }
    
    
    .CCMenu li /* all list items */
    {
        width: 5em;
        background-color: #FEFAF1;
        /* font-size: .8em; */
        /* font-family: arial, helvetica, sans-serif; */
        font-family: Georgia,Verdana,Arial,sans-serif;
        text-align:center;
        color:Black;
        border-right: solid 1px #60718F;
        border-left: solid 1px #60718F;
        border-top: solid 1px #60718F;
    }
    
      
  • Re: Need wider width on second level menu

    04-30-2007, 2:29 PM
    • Member
      323 point Member
    • cecook05
    • Member since 06-13-2006, 5:27 PM
    • Posts 151
     I figured it out.  Needed to add ul.AspNet-Menu ul li to define behavior in the list items in the second tier and define the width, backgound-color, etc. there 
    .CCMenu ul.AspNet-Menu /* Tier 1 */
    {
        width: 26em; /* This is more than (6em x 2) because we want to leave room for borders around the <li> elements that are selected */
        letter-spacing:1px;
        font-size: .8em;  
        border-right: solid 1px #60718F;
        border-left: solid 1px #60718F;
        border-top: solid 1px #60718F;
    }
    
    .CCMenu ul.AspNet-Menu ul  /* Tier 2 */
    {
    
        top: 100%;
        left: 0px;
        border: solid 1px #60718F;
        background-color: #FEFAF1;
    
      
    }
    
    .CCMenu ul.AspNet-Menu ul li /* Tier 2 items */
    {
    
        background-color: #FEFAF1;
        width: 110px;
        text-align:left; 
    	
      
    }
    
    .CCMenu ul.AspNet-Menu ul li:hover /* Tier 2   test list in 2nd tier*/
    {
    
        background-color: #ECE8D4;
    	
    }
    
    
     I figured it out.  Needed to add ul.AspNet-Menu ul li to define behavior in the list items in the second tier and define the width, backgound-color, etc. there. 

     

Page 1 of 1 (2 items)