Skip to content
Related Articles

Related Articles

How to make whole area of a list item in navigation bar is clickable using CSS ?
  • Last Updated : 11 May, 2020

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
Recommended Articles
Page :