Results 1 to 2 of 2

Thread: 2 Level CSS Image Sprite Problem

  1. #1
    Join Date
    Sep 2009
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default 2 Level CSS Image Sprite Problem

    So i have a good and working Image Sprite Rollover but I needed to have a 2 level navigation. I have this problem

    http://beaufaces.com/this/try_this.html

    the problem is that when i hover on third button it's ok, but when i hover on the 1st and 2nd dropdown menu, the main navigation turns to color green covering the image button and every button is now the width of the third.

    i have this html code

    HTML Code:
    				<ul id="navimask">
    				
    					<li id="nav1"><a href="#">asd</a></li>
    					<li id="nav2"><a href="#">asd</a></li>
    					<li id="nav3"><a href="#">asd</a>
    					
    						<ul id="vads">
    							<li><a href="#">Next Year</a></li>
    							<li><a href="#">Next Year</a></li>
    						</ul>
    					
    					</li>
    					<li id="nav4"><a href="#">asd</a></li>
    					<li id="nav5"><a href="#">asd</a></li>
    					<li id="nav6"><a href="#">asd</a></li>
    					<li id="nav7"><a href="#">asd</a></li>
    					<li id="nav8"><a href="#">asd</a></li>
    					
    				
    				</ul>
    and this CSS

    for image sprite rollover which works just fine:

    Code:
    #navimask
    { 
        width:950px; height:31px;    
        padding:0;
        list-style:none;
        background: url(../images/navimask.jpg) no-repeat;
    	}
    	
    #navimask li {
        float:left;
        height:31px;
     }
    #nav1 {
        width:111px;
     }
    #nav2 {
        width:113px;
     }
     #nav3 {
        width:120px;
     }
     #nav4{
        width:139px;
     }
     #nav5 {
        width:141px;;
     }
     #nav6 {
        width:121px;
     }
     #nav7 {
        width:89px;
     }
    #nav8 {
        width:116px;
     }
     
    #navimask a {
        display:block;
        height:31px;
        text-indent:-9999px;
        outline:none;
     }
    
    #navimask a:hover {background: url(../images/navimask.jpg)  no-repeat;}
    
    #nav1 a:hover {background-position:-0 -31px;}
    #nav2 a:hover {background-position:-111px -31px;}
    #nav3 a:hover {background-position:-224px -31px;}
    #nav4 a:hover {background-position:-344px -31px;}
    #nav5 a:hover {background-position:-483px -31px;}
    #nav6 a:hover {background-position:-624px -31px;}
    #nav7 a:hover {background-position:-745px -31px;}
    #nav8 a:hover {background-position:-834px -31px;}
    for showing up the 2nd level menu which is in bad condition:

    Code:
    ul {
      font-family: Arial, Verdana;
      font-size: 14px;
      margin: 0;
      padding: 0;
      list-style: none;
    
    }
    #nav3  ul li {
      display: block;
      position: relative;
      float: left; z-index:555;
      visibility:hidden; 
      
    }
    
    #nav3  ul li a {
      display: block;
      text-decoration: none;
      color: #ffffff;
      border-top: 1px solid #ffffff;
      padding: 5px 15px 5px 15px;
      margin-left: 1px;
      white-space: nowrap;  z-index:555; 
      text-indent:0px;
    
    
    }
    #nav3  ul li a:hover { background: #009900; z-index:555; }
    #nav3  li:hover ul {
      display: block;
      position: absolute;
      
    
    }
    
    li:hover a { width:139px; background:#7ba340; visibility:visible;}

  2. #2
    Join Date
    Sep 2009
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    This one is solved man. I used some javascript to make it work.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •