navigation CSS

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>navigation </title>

    <style>

        .navbar {

            background-color: red;

        }

        .navbar li {

            float: left;

            list-style: none;

        }

        .navbar ul {

            overflow: auto;

        }

        .navbar li a {

            padding: 3px 3px;

            margin: 3px 3px;

        }

    </style>

</head>

<body>

    <header>

        <nav class="navbar">

            <ul>

                <li><a href="#">Home</a></li>

                <li><a href="#">About</a></li>

                <li><a href="#">Services</a></li>

                <li><a href="#">Contact Us</a></li>

            </ul>

        </nav>

    </header>

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>navigation </title>

    <style>

.navbar{

    background-color: black;

    border-radius: 15px;

}

.navbar li{

    float: left;

    list-style: none;

    margin: 10px;

}

.navbar ul{

    overflow: auto;

    margin: 5px 10px;

}

.navbar li a{

padding: 20px 5px;

color: white;

text-decoration: none;

}

.navbar li a:active{

    color: red;

}

.navbar li a:hover{

background-color: yellow}

.search{

    float: right;

    color: white;

    padding: 10px ;

    

    }

    .navbar input{

        border-radius: 10px;

        padding: 5px;

    }

    </style>

</head>

<body>

 <header>

     <nav class="navbar">

         <ul>

           <li><a href="#">Home</a></li>

           <li><a href="#">About</a></li>

           <li><a href="#">Services</a></li>

           <li><a href="#">Contact Us</a></li>

           <div class="search">

               <input type="text" name="search " id="search" placeholder="Type here to search">

           </div>

         </ul>

     </nav>

 </header>

</body>

</html>