why this navigation bar program not working in blogspot?

**Ganesh Ujwal** · 09-11-2014

why this navigation bar program not working in blogspot?
program which i created look like this:

HTML Code:

<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}


li {
    float: left;
}


a:link, a:visited {
    display: block;
    width: 120px;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #98bf21;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
}


a:hover, a:active {
    background-color: #7A991A;
}
</style>
</head>
<body>


<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>


</body>
</html>

after adding this program through layout< add a gadget(below header)<html\javascript blog look like this:

if i save the program into html, then it look this:

but while adding same program into my blogspot, then look is changing,
so how to insert this navigation bar to my blogspot?

**EINSTEIN_007** · 10-11-2014

You need to create a basic navigation bar like the below example:

Code:

<!-- start navmenu --> 
<div id="navigationbar">
<ul>
<li><a title="home" href="LINK">Home</a></li> 
<li><a title="TITLE" href="LINK">PAGE TITLE</a></li>
<li><a title="TITLE" href="LINK">PAGE TITLE</a></li>
<li><a title="TITLE" href="LINK">TOPIC</a></li>
<li><a title="TITLE" href="LINK">TOPIC</a></li>
</ul>
</div>   
<!-- end navmenu -->