Title: CSS menu problem
Last modified: August 19, 2016

---

# CSS menu problem

 *  [burakbbb](https://wordpress.org/support/users/burakbbb/)
 * (@burakbbb)
 * [17 years, 1 month ago](https://wordpress.org/support/topic/css-menu-problem/)
 * 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; }
       ```
   

The topic ‘CSS menu problem’ is closed to new replies.

 * 0 replies
 * 1 participant
 * Last reply from: [burakbbb](https://wordpress.org/support/users/burakbbb/)
 * Last activity: [17 years, 1 month ago](https://wordpress.org/support/topic/css-menu-problem/)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics