roll over menu doesnt look like it used to and freezes in IE

Discussion in 'CSS' started by antonyx, Feb 1, 2007.

  1. #1
    the menu on the left is correct.. the menu on the rite is wrong.. i cant get them looking the same.. ive tried changing the code but it always shrinks the box and creates random little boxes underneath..

    please test this page in ff..

    can someone help me make this menu look like it should..

    css that works..
    	#menu a,#menu li li a{
    	float:left;
    	width:73px;
    	display:block;
    	font-family:arial;
    	font-size:80%;
    	font-weight:120;
    	color: #666666;
    	padding:.3em 0 .3em 0 ;
    	text-decoration: none;
    	text-align: center;
    	border-width:1px 1px 1px 1px;
    	border-color:#ffffff #b3b3b3 #b3b3b3 #ffffff;
    	border-style:solid;
    
    	}
    	
    	#menu .bccor{border-color:#ffffff #ffffff #ffffff #ffffff;}
    	
    	#menu li li a{
    	background: #EBEBEB;
    	}
    	
    	/*#menu li li{height:50px;}*/
    	
    	#menu ul{
    	padding:0;
    	margin:0;
    	list-style: none;
    	}
    	
    	#menu li{
    	position:relative;
    	float: left;
    	width:75px;
    	
    	}
    	
    	#menu li {margin:0 0px 0 0;}/*margin between top li*/	
    	#menu li li{margin:0px 0 0 0;}/*margin between li li*/
    	
    	li ul{display:none;}
    	
    	li li,li:hover ul,li.over ul{display:block;}
    	
    	#nav li li a{
    	border-color:#EBEBEB #EBEBEB #EBEBEB #EBEBEB;
    	}
    	
    	#nav li li a:hover{
    	display:block;
    	background:#666666;
    	border-width:1px 1px 1px 1px;
    	border-color:#666666 #666666 #666666 #666666;
    	font-family:arial;
    	font-size:80%;
    	font-weight:120;
    	color: #F99C08;
    	}
    	.text{float:left;margin-top:30px;width:600px;}
    
    	#menu{position:relative;}
    	#nav{position:absolute;top:0;left:0;}
    
    
    a {color: #666666} :visited {color: #666666} a:active {color: #333333} a:hover {color: #F99C08}
    
    Code (markup):

    css that doesnt look rite but adds a new level to the menu which i need

       #menu .bccor{border-color:#ffffff #ffffff #ffffff #ffffff;}
    
       #menu li li a{
    
       background: #EBEBEB;
    
       display:block;
    
    
       }
    
       * html #menu a{height:1%;/*ie hack, don't know if it breaks ie7*/
    
       }
    
       
    
       /*#menu li li{height:50px;}*/
    
       #menu ul{
    
       padding:0;
    
       margin:0;
    
       list-style: none;
    
       }
    
       #menu li{
    
        display:block;
        border-width:1px 1px 1px 1px;
    	border-color:#ffffff #b3b3b3 #b3b3b3 #ffffff;
    	border-style:solid;
        position:relative;
        font-family:arial;
        float: left;
        font-size:80%;
        color: #666666;
        width:73px;
        padding:.3em 0 .3em 0 ;
    
       background:white;
    
       text-align:center;
    
       }
    
       #menu li {margin:0;}/*margin between top li*/   
    
       #menu li li{margin:0;
    
       position:relative;}/*margin between li li*/
    
       li ul{display:none;}
    
       li li,li:hover ul,li.over ul{display:block;}
    
       #nav li li a{
    
    
    
    
    
       }
    
       #nav li li a:hover{
    
    	background:#666666;
    	border-width:1px;
    	border-color:#666666;
    	font-family:arial;
    	font-size:80%;
    	font-weight:120;
    	color: #F99C08;
    
       }
    
       
    
       #nav ul ul{
    
       left:75px;/*the same width as #menu li*/
    
       top:0px;
    
       display:none;
    
       position:absolute;
    
       }
    
       
    
       #nav ul li:hover ul, #nav ul li.over ul{
    
       display:block;
    
       }
    
       
    
       .text{float:left;margin-top:30px;width:600px;}
    
       #menu{position:relative;}
    
       #nav{position:absolute;top:0;left:0;}
    
       a {color: #666666;   text-decoration: none;}
    
    Code (markup):
     

    Attached Files:

    antonyx, Feb 1, 2007 IP