Why nothing is showing up?
Nice menu you say; but you forgot to give texts for the anchors in the menu! All of it is empty and that is why you see nothing on the screen.
Just give some values for the menu items and check it. for example I have given some sample values in your code as below.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Full Width Responsive Image Slider</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
<style type="text/css">
html,body,img {padding: 0; margin: 0;height:100%;width:100%}
body {font-family: Sans-Serif;}
.container{
height:100%;
width:100%;
overflow: hidden;
}
.cycle-slideshow {
height: 100%;
width: 100%;
display: block;
position: relative;
margin: 0 auto;
}
.cycle-prev, .cycle-next {
font-size: 200;
color: #FFF;
display: block;
position: absolute;
top: 50%;
margin-top: -16px;
z-index: 9999;
cursor: pointer;
}
.cycle-prev {left: 10%;}
.cycle-next{right: 10%;}
.cycle-pager{
width: 100%;
text-align: center;
display: block;
position: absolute;
position: top;
bottom: 20px;
z-index: 9999;
}
.cycle-pager span {
text-indent: 100%;
white-space: nowrap;;
width: 12px;
height: 12px;
display: inline-block;
border: 1px solid #FFF;
border-radius: 50%;
margin: 0 10px;
cursor: pointer;
}
.cycle-pager .cycle-pager-active {background: #FFF;}
ul {
margin: 0;
padding: 0;
list-style: none;
}
ul li {
float: left;
width: 150px;
height: 30px;
line-height: 30px;
text-align: center;
background-color: #ff0000;
}
ul li a{
text-decoration: none;
color: #fff;
}
</style>
</head>
<body>
<div class="container">
<!--
<!--
<!--
<ul>
<li><a href="Home">Home<a/></li>
<ul>
<li><a href="Link1">Link1<a/></li>
<li><a href="Link2">Link2<a/></li>
<li><a href="Link3">Link3<a/></li>
<li><a href="Link4">Link4<a/></li>
<li><a href="Link5">Link5<a/></li>
</ul>
</li>
<li><a href="About">About<a/></li>
<ul>
<li><a href="Link1">Link1<a/></li>
<li><a href="Link2">Link2<a/></li>
<li><a href="Link3">Link3<a/></li>
<li><a href="Link4">Link4<a/></li>
<li><a href="Link5">Link5<a/></li>
</ul>
<li><a href="Services">Services<a/></li>
<ul>
<li><a href="Link1">Link1<a/></li>
<li><a href="Link2">Link2<a/></li>
<li><a href="Link3">Link3<a/></li>
<li><a href="Link4">Link4<a/></li>
<li><a href="Link5">Link5<a/></li>
</ul>
<li><a href="Contact Me">Contact Me<a/></li>
<ul>
<li><a href="Link1">Link1<a/></li>
<li><a href="Link2">Link2<a/></li>
<li><a href="Link3">Link3<a/></li>
<li><a href="Link4">Link4<a/></li>
<li><a href="Link5">Link5<a/></li>
</ul>
<li><a href=""><a/></li>
</ul>
</body>
</html>
Now your menu items will appear on your screen. Once you give the appropriate styles for the menu list, you will have the fancy menu you require!