<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #ff0000;
}
.inner {
margin: 0 ;
max-width: 210px;
padding:10px;
background-color: #f60309;
border-radius: 1px;
border-radius: 1px;
color: white;
}
.inner1 {
margin: 0 ;
max-width: 200px;
padding:10px;
background-color: #333;
border-radius: 1px;
border-radius: 1px;
color: white;
}
</style>
</head>
<body>
<ul>
<li><a href=”news.html”><b>News</b></a></li>
<li><a href=”tech.html”><b>Tech</b></a></li>
<li><a href=”html.html”><b>Fashion</a></a></li>
<li><a href=”bout.html”><b>About</b></a></li>
</ul>
</body>
</html>
maybe this can help