Full Example of HTML Horizontal List with CSS
One popular way is to style a list horizontally, to create a navigation menu:
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333333;
}
li { float: left;
}
li a { display: block; color: white; text-align: center; padding: 16px; text-decoration: none;
}
li a:hover { background-color: #111111;
}
</style>
</head>
<body>
<h2>Navigation Menu</h2>
<p>In this example, we use CSS to style the list horizontally, to create a navigation menu:</p>
<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>
Output should be:
| Full Example of HTML Horizontal List with CSS | HTML Lists |
| HTML Lists | HTML Lists |
| How to create HTML Lists | HTML Lists |
| How to create Unordered HTML List | HTML Lists |
| How to create Ordered HTML List | HTML Lists |
| How to create HTML Description Lists | HTML Lists |
| How to create Unordered HTML List - Choose List Item Marker | HTML Lists |
| How to create Nested HTML Lists | HTML Lists |
| How to create HTML Horizontal List with CSS | HTML Lists |
| How to create Ordered HTML List - The Type Attribute | HTML Lists |
| How to create HTML Ordered HTML List Number | HTML Lists |
| How to create HTML Ordered Uppercase Letters | HTML Lists |
| How to create HTML Ordered Lowercase Letters | HTML Lists |
| How to create HTML Ordered Uppercase Roman Numbers | HTML Lists |
| How to create HTML Ordered Lowercase Roman | HTML Lists |
| How to create HTML Control List Counting | HTML Lists |
|
Type
: |
html |
|
Category
: |
Web Tutorial |
|
Sub Category
: |
HTML Lists |
|
Uploaded by
: |
Admin |