WordPress.org

Ready to get started?Download WordPress

Forums

CSS menu problem (1 post)

  1. burakbbb
    Member
    Posted 5 years ago #

    Hello,

    I have a horizontal menu. it consists of a menu.gif which has three layers that are main menu, hover menu, and visited menu images.

    i have 4 sections
    home - id=1
    archives - id=2
    news - id=3
    contact - id=4

    the problem with this code is only the home button (id=1) works when the link is visited, sections 2(archive), 3(news) and 4(contact) when i click on them are not displayed as if they are visited.

    im basically trying to show what section of the blo the visitors are on. i achieved it with first button but not 2, 3 and 4. could someone please point out where the problem is?

    Thank you ver much.

    HTML codes

    <ul id="menu">
    		      <li id="1"><a href="http://localhost/wordpress/" linkindex="1">home</a></li>
    		  <li id="2"><a href="http://localhost/wordpress/?page_id=2" linkindex="2">archives</a></li>
    		    <li id="3"><a href="http://localhost/wordpress/?page_id=3" linkindex="3">news</a></li>
    <li id="4" class="last"><a href="http://localhost/wordpress/?page_id=4" linkindex="4">contact</a></li>
    		</ul>

    CSS codes

    #menu {
         list-style: none;
         padding: 0;
         margin: -105px 25px;
         width: 332px;
         height: 30px;
         background: url('images/menu.gif');
         position: relative;
    }
    
    	ul#menu li { width: 80px;
    	            height: 30px;
    				padding: 0 4px 0 0;
    				text-indent: -900px;
    				float: left;
    				}
    
    	ul#menu li.last { padding: 0; }
    
    		ul#menu li a, ul#menu li a:visited, ul#menu li a:hover { display: block; width: 80px; height: 30px; background: transparent url('images/menu.gif') no-repeat; outline: none; }
    
    			ul#menu li#1 a, ul#menu li#1 a:visited { background-position: 0 0; }	
    
    			ul#menu li#2 a, ul#menu li#2 a:visited { background-position: -84px 0; }
    
    			ul#menu li#3 a, ul#menu li#3 a:visited { background-position: -168px 0; }
    
    			ul#menu li#4 a, ul#menu li#4 a:visited { background-position: -252px 0; }
    
    				ul#menu li#1 a:hover { background-position: 0 -30px; }
    
    				ul#menu li#2 a:hover { background-position: -84px -30px; }
    
    				ul#menu li#3 a:hover { background-position: -168px -30px; }
    
    				ul#menu li#4 a:hover { background-position: -252px -30px; }
    
    			.1 ul#menu li#1 a, .1 ul#menu li#1 a:visited, .1 ul#menu li#1 a:hover { background-position: 0 -60px; cursor: default; }
    
    			.2 ul#menu li#2 a, .2 ul#menu li#2 a:visited, .2 ul#menu li#2 a:hover { background-position: -84px -60px; cursor: default; }
    
    			.3 ul#menu li#3 a, .3 ul#menu li#3 a:visited, .3 ul#menu li#3 a:hover { background-position: -168px -60px; cursor: default; }
    
    			.4 ul#menu li#4 a, .4 ul#menu li#4 a:visited, .4 ul#menu li#about a:hover { background-position: -252px -60px; cursor: default; }

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.