TryIt Editor v2.0 - Example of a horizontal list with CSS:

Source Code: (back to article)

Result: Report an issue

<!DOCTYPE html>

<html>

<head>

<title>Title of the document</title>

<style>

ul {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #F44336;

}

li {

float: left;

}

li a {

display: block;

color: white;

text-align: center;

padding: 16px;

text-decoration: none;

}

li a:hover {

background-color: #981816;

}

</style>

</head>

<body>

<h2>Navigation Menu Example</h2>

<p>

You can style HTML lists using different CSS properties. For example, you can create a navigation menu styling the list horizontally.

</p>

<ul>

<li>

</li>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #F44336;
      }
      li {
        float: left;
      }
      li a {
        display: block;
        color: white;
        text-align: center;
        padding: 16px;
        text-decoration: none;
      }
      li a:hover {
        background-color: #981816;
      }
    </style>
  </head>
  <body>
    <h2>Navigation Menu Example</h2>
    <p>
      You can style HTML lists using different CSS properties. For example, you can create a navigation menu styling the list horizontally.
    </p>
    <ul>
      <li>
        <a href="#home">Home</a>
      </li>
      <li>
        <a href="https://www.w3docs.com/tool/">Tools</a>
      </li>
      <li>
        <a href="https://www.w3docs.com/snippets">Snippets</a>
      </li>
      <li>
        <a href="https://www.w3docs.com/quiz/">Quizzes</a>
      </li>
      <li>
        <a href="https://www.w3docs.com/string-functions/">String Functions</a>
      </li>
    </ul>
  </body>
</html>