Hi,
I want to code horizontal menu bar in html for my project but I have no idea how to do this task I tries but I could not do so if someone has the code of horizontal menu bar in html please reply me.
Code horizontal menubar in html for web
Hi Jeffrey,
Please take a look at the following code. This will create a horizontal menu.
<head>
<style>
ul
{
list-style-type:none;
overflow:hidden;
}
li
{
float:left;
}
.test
{
width:100px;
color:Black;
background-color:BROWN;
text-align:center;
padding:5px;
}
a:hover,a:active
{
background-color:Red;
}
</style>
</head>
<body>
<ul><li><a href="#" class="test">My Home</a></li>
<li><a href="#" class="test">My Book</a></li>
</ul>
</body>
I hope this will help you.
Thank you
Code horizontal menubar in html for web
Since you are planning to create your own horizontal menu bar on your web page, I think the “<nav>” tag might help you do the trick. This tag is supported by major web browsers like Microsoft Internet Explorer 9, Mozilla Firefox, Opera, Google Chrome, and Safari. But those users who are still using the older versions of Microsoft Internet Explorer such as Microsoft Internet Explorer 8 and earlier, this tag is not supported.
The “<nav>” tag defines a section of navigation links. I use a template on my mobile site and here is an example of the horizontal menu bar that I created.
<nav class="art-nav clearfix">
<ul class="<class name>"><li><a href="<URL>" class="active">Home</a>
<ul class="active"><li><a href="<URL>">Menu 1</a></li>
<li><a href="<URL>" class="active">Menu 2</a></li>
<li><a href="<URL>">Menu 3</a></li>
<li><a href="<URL>">Menu 4</a></li>
<li><a href="<URL>">Menu 5</a></li>
<li><a href="<URL>">Menu 6</a></li>
<li><a href="<URL>">Menu 7</a></li>
<li><a href="<URL>">Menu 8</a></li>
<li><a href="<URL>">Menu 9</a></li>
<li><a href="<URL>">Menu 10</a></li></ul></li>
<li><a href="<URL>">Others</a>
<ul><li><a href="<URL>">Menu 1</a></li>
<li><a href="<URL>">Menu 2</a></li></ul></li></ul>
</nav>
