What I am trying to do is have my words appear on another part of the page, after someone clicks on part of the navigation. I have attached a file "example1" to demonstrate.
What is happening now is the words are there, but they are hidden and are not appearing when I click on my navigation. I'm not quite sure what the problem may be. Perhaps layers are overlapping each other and it's confusing the coding? I'm not sure. But I would appreciate some help.
Here is a page where the effect does work. click here
And down below is the area I think the problem is coming from.
<style type="text/css"> body {font-family: Arial Black, Arial; background-color: #000000; background-image: url('http://ladymusicc.com/SP/e/click.png') } a { outline: none;} #songlistings {width: 200px; color: #000; height: 620px; margin-top: 205px;} #songlistings ul {width: 495px; margin-left: -40px; margin-top: -205px;} #songlistings ul li {list-style-type: none; cursor: pointer; outline: none;} #container {width: 855px; position: absolute; } #mainimg p {width: 855px; text-align: justify; margin: 0px; position: absolute; left: 350px; top: 12px; font-size:15px;} object {margin: 0; padding: 0; background-color: #000000;} #left {position: absolute; top: 0px; left: 648px; } #right {position: absolute; top: 250px; left: 1078px; width: 200px;} #song1, #song2, #song3, #song4, #song5, #song6, #song7, #song8, #song9, #song10, #song11, #song12, #song13, #song14, #song15, #song16 {display:none ; position: absolute; height: 800px; top: 10px; left: 200px; font-size: 12px;} #songleft {position: absolute; left: 648px; top: 10px; width: 340px;} #songright {position: absolute; left: 1078px; top: 10px; width: 380px;} #farrighth1 {position: absolute; top: 10px; left: 1102px; width: 260px; height: 50px; display: none;} h1 {font-family: Arial Black; text-transform: uppercase; margin: 0; padding: 0; margin-bottom: 10px;} #image img {border: 0px;} .selected {font-weight: 700; color: #497ead;} </style>
Please help. Thank you.