Code horizontal menubar in html for web

Asked By 90 points N/A Posted on -
qa-featured

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.

SHARE
Best Answer by Sharath Reddy
Go To Solution
Answered By 10 points N/A #133556

Code horizontal menubar in html for web

qa-featured

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
About Sierra Adams
Questions
1
Answers
101
Best Answers
39
Best Answer
Best Answer
Answered By 590495 points N/A #133557

Code horizontal menubar in html for web

qa-featured

 

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>

About Sharath Reddy
Questions
1
Answers
14599
Best Answers
2290

Need ovi maps challenge for PC download?

Previous

How to download a reader PDF offline android?

Next

Related Questions