I am attempting to create a simplistic horizontal list menu similar to the one displayed in this example. I have copied the list and CSS to jsFiddle (New Example Update), but it does not function as desired. I have searched for similar examples to guide me on how to replicate it but have not found any. Assistance in this matter would be greatly appreciated.
Below is the structure of the list:
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
. . . (other list items)
</ul>
CSS Styling:
nav#mainnav ul {
bottom: 57px;
height: 0;
list-style: none outside none;
margin: 0;
padding: 0;
position: absolute;
right: 0;
}
. . . (more CSS styling)
UPDATE:
I have successfully created the horizontal menu. However, I am facing an issue with fading out the submenu after a certain time period. How can I achieve this? Example Update