I found a helpful menu on this site http://www.jqueryscript.net/menu/interactive-menu-css3-jquery.html
However, I encountered an issue. When I click on
<a href="1.html">Application 1</a>
It doesn't redirect to 1.html as expected. The problem seems to be in this particular CSS block
.menu .title{
position: absolute;
height: 100%; width: 100%;
text-align: center;
font: italic bold 1em/120px 'trebuchet MS', Arial, helvetica;
opacity: .2;
}
I'm having trouble figuring out how to fix it.
Here is the full source code:
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Menu</title>
<link rel="stylesheet" href="lanceur/style.css">
<script src="lanceur/jquery-1.7.1.min.js"></script>
<script src="lanceur/selectivizr.js"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
<script src="selectivizr.js"></script>
<![endif]-->
<style>
/* Demo page only */
#about{
color: #999;
text-align: center;
font: 0.9em Arial, Helvetica;
}
#about a{
color: #777;
}
</style>
</head>
<body>
<ul class="menu">
<li tabindex="1">
<span class="title"><a href="1.html">Application 1</a></span>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
</li>
<li tabindex="1">
<span class="title">Two</span>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div>
</li>
// more list items here...
</body>
</html>
style.css
.menu{
width: 620px;
margin: 100px auto; padding: 15px;
list-style: none;
counter-reset: li;
background: #eee;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;
box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
// additional CSS styles...