How to make whole area of a list item in navigation bar is clickable using CSS ?

When we create a navigation bar menu using list items then the whole area of the list is clickable. The whole area clickable makes navigation bar UI more user friendly.

On mobile phones or tablets, where touch gestures come into place, it’s sometimes hard to target little links with your finger. Mostly because it was primarily designed for desktop use. So in order to make the whole area of a list item in a navigation bar clickable as a link, here are some methods that are described below:

Using simple CSS properties: First, we will create unordered list items using HTML and then apply some CSS property to that items to make a navigation bar menu.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <title>navbar</title>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: green;
        }
  
        li {
            float: left;
        }
  
        li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
  
        li a:hover {
            background-color: lightgreen;
            color: black;
        }
    </style>
</head>
  
<body>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Data Structure</a></li>
        <li><a href="#">Algorithm</a></li>
        <li><a href="#">Web Technology</a></li>
    </ul>
</body>
  
</html>

chevron_right


Output:



Using :after (or :before) pseudo-element: In this method, we will use pseudo-selector to set the CSS property to the anchor element.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
  
    <title>Document</title>
  
    <style>
        #nav {
            background-color: #187446;
            margin: 0px;
            overflow: hidden;
        }
  
        #nav ul {
            list-style-type: none;
            margin: 0px;
            float: left;
        }
  
        #nav li {
            display: inline;
            float: left;
            padding: 15px 10px;
        }
  
        #nav a {
            color: white;
            font-family: Helvetica, Arial, sans-serif;
            text-decoration: none;
        }
  
        a {
            position: relative;
        }
  
        #nav a:after {
            content: '';
            position: absolute;
            top: -10px;
            bottom: -10px;
            left: -10px;
            right: -10px;
        }
  
        #nav li:hover {
            background-color: lightgreen;
        }
  
        #nav a:hover {
            color: black;
        }
    </style>
</head>
  
<body>
    <div id="nav">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Data Structure</a></li>
            <li><a href="#">Algorithm</a></li>
            <li><a href="#">Web Technology</a></li>
        </ul>
    </div>
</body>
  
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.