The enhancement of clickable link padding

I'm having an issue with the padding around the link in my dropdown menu not being clickable. The text itself works fine when I hover over it, but the surrounding padding is inactive. I tried styling it as an inline-block as suggested, but that did not solve the problem. This is my first post here, so feel free to point out any mistakes I may have made. CSS:

    body {
  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  padding: 20px 50px 150px;
  font-size: 13px;
  text-align: left;
  background-position:center;
  background-image:url(sun.jpg);
}
a {
    display:inline-block;
    color: #6FF;
    text-decoration: none;
}
a:hover {
    color: #FFF;
}
ul {
    color:#6FF
  text-align: left;
  display: inline-block;
  margin: 0;
  padding: 1px 1px 1px 0;
  list-style: none;
}
ul li {
    color: purple;
  font: bold 12px/18px sans-serif;
  display: inline-block;
  margin-right: -10px;
  position: relative;
  padding: 20px 20px;
  background: #fff;
  cursor: pointer;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
ul li:hover {
  background: #555;
  color: #fff;
}
ul li ul {
  padding:0;
  position:absolute;
  top: 54px;
  left: 0;
  width: 150px;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.5s;
  -moz-transition: opacity 0.5s;
  -ms-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  -transition: opacity 0.5s;
}
ul li ul li { 
  background-color:#555;
  color:#6FF; 
  display: block; 
}
ul li ul li:hover { background: #555; }
ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

Answer №1

It is recommended to apply padding to the link rather than the list item because the link is what users click on.

    body {
        font-family:'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        padding: 20px 50px 150px;
        font-size: 13px;
        text-align: left;
        background-position:center;
        background-image:url(sun.jpg);
    }
    a {
        padding: 20px 20px;
        display:inline-block;
        color: #6FF;
        text-decoration: none;
    }
    a:hover {
        color: #FFF;
    }
    ul {
        color:#6FF text-align: left;
        display: inline-block;
        margin: 0;
        padding: 1px 1px 1px 0;
        list-style: none;
    }
    ul li {
        color: purple;
        font: bold 12px/18px sans-serif;
        display: inline-block;
        margin-right: -10px;
        position: relative;
        background: #fff;
        cursor: pointer;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -ms-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s;
    }
    ul li:hover {
        background: #555;
        color: #fff;
    }
    ul li ul {
        padding:0;
        position:absolute;
        top: 54px;
        left: 0;
        width: 150px;
        display: none;
        opacity: 0;
        visibility: hidden;
        -webkit-transiton: opacity 0.5s;
        -moz-transition: opacity 0.5s;
        -ms-transition: opacity 0.5s;
        -o-transition: opacity 0.5s;
        -transition: opacity 0.5s;
    }
    ul li ul li {
        background-color:#555;
        color:#6FF;
        display: block;
    }
    ul li ul li:hover {
        background: #555;
    }
    ul li:hover ul {
        display: block;
        opacity: 1;
        visibility: visible;
    }
<ul>
    <li><a href="#">First link</a>
    </li>
    <li><a href="#">First link</a>
    </li>
    <li><a href="#">First link</a>
    </li>
    <li><a href="#">First link</a>
    </li>
    <li><a href="#">First link</a>
    </li>
    <li><a href="#">First link</a>
    </li>
</ul>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Looking to reduce the size of a logo image within a container as you scroll down a webpage?

I've been working on creating a logo section for my website, but I'm struggling to make it shrink as users scroll down and expand back to its original size when they scroll up. I've tried various JavaScript and jQuery functions without succe ...

Fixed-positioned elements

I'm facing a small issue with HTML5 that I can't seem to figure out. Currently, I have a header image followed by a menu div containing a nav element directly below it. My goal is to make the menu div stay fixed when scrolling down while keeping ...

Drag a spinning cube using CSS and Jquery when the mouse is pressed

I'm attempting to develop a dynamic rotating cube that users can manipulate to their desired side by clicking and dragging on the cube. Currently, I have functionality where the cube moves as the mouse cursor moves across the screen, but this results ...

What is the best way to position an element on the left side of the navbar without having it animated?

Could someone assist me in placing the Life's Good logo on the left side of the nav bar without applying the animation from the "btn" class? Below is a snippet of my code with an example where I want the logo highlighted in Yellow: * { padding:0; m ...

Align pandas data frame to the right within a Flask application

My current project involves creating an API in Flask. One of the requirements is to display a pandas dataframe right next to the upload button on the web page. While I have been able to find information online about justifying column headers or text, I hav ...

Dynamic row Material-UI input field

Is there a way to create a multiline TextField component that expands to take full height on different devices? https://i.sstatic.net/5y3lG.png* I am familiar with fullWidth, but is there an equivalent for setting the height of the component to full on r ...

Modify radio button colors upon selection with a variety of colors

Looking to create Yes/No buttons that start with a default state of null and change color when pressed - green for yes, red for no. Check out this example code: <label class="formheading">Apparatus group is correct</label> <fieldset data-r ...

When I hover over the navigation bar, a submenu pops up. However, as I try to navigate to the submenu, I often end up accidentally selecting a different item on the navigation bar

I'm trying to find an answer but can't seem to remember where I saw it. Here's the situation: a horizontal nav bar with a dark blue selection and a red sub-menu. When the user hovers over a black arrow, it crosses into a light-blue nav item ...

Achieving consistent margins across various browsers for UL elements

UL element margins are the same, but Firefox and IE are displaying differently. FULL CODE: <html> <head> <style> body { background-color: Red; } ul ...

How can I arrange multiple images within a div to create a circular view?

How can I create a div block with multiple images positioned inside? I'm having trouble applying div CSS properties to the images, and also want them to be displayed in round shapes. ...

Animation in CSS/transform drifting out of view

I have a challenge with animating text to each corner of the screen, where the text is rotated in every corner. However, I am facing an issue where the text goes off-screen in the top right and bottom left corners. It seems like the rotation might be causi ...

The picture within the bootstrap popover is spilling out of the popover

I need help resolving an issue on my webpage where images in popovers overflow when they reach a certain size. I used an online demo to create the page, but now I'm encountering this problem. How can I fix it? Check out the Js Fiddle for reference: h ...

Create a log table specifically for tracking changes made to the drop-down menu

I need to create a Change log table that will track any changes made in the drop-down menu. For instance, I am working on a worksheet with a select menu called Results which includes options like Positive, Negative, Unknown. I want the system to log any ch ...

What is the best way to load content into Bootstrap tabs?

I would like to incorporate a loading spinner within the bootstrap tabs. When a user clicks on a tab pane link, a loading spinner will be displayed for a few seconds before showing the actual tab content. HTML : <ul class="nav nav-tabs" id=&q ...

Adjusting the height of content in Angular Material 2 md-tab

I've recently started working with angular material and I'm facing an issue while trying to implement md-tab into my application. The problem is that I can't seem to style my tab content to take up the remaining height of the screen. Could s ...

PHP: Issues with displaying data from a SELECT * FROM query in tables

My goal is to style tables pulled from my database so that the columns in the rows align with the column names for better readability. I attempted to use PHP to achieve this by creating a table outside a while loop to display the names and then starting t ...

Undo a CSS transition when clicked

There is a div named learn-more which expands to fill the whole page when a CSS class is added like this: .learn-more{ padding:10px; font-size: 20px; text-align: center; margin-top:20px; font-family: klight; -webkit-transition:2s; ...

What accounts for the different behavior of line-height when using units vs percentage or em in this instance?

I'm puzzled by the behavior of the CSS code provided, which is also demonstrated in this fiddle. <style type="text/css"> p { font-size: 14px; } .percentage { line-height: 150%; } .em-and-a-half { line-height: 1.5em; } .decimal { ...

Harnessing the power of flexbox for data visualization

Trying to use flexbox to display data from a dataset in my code. Here is the code snippet: <div ng-app="myapp" ng-controller="FirstCtrl"> <div ng-repeat="name in names" class="graph-wrapper"> <div class="aside-1 content"> ...

Unusual marker appearing on every page utilizing ionic v1 and angularjs

For some unknown reason, a dot appears at the upper left side of each page in my webapp: https://i.stack.imgur.com/nN61t.png It seems to be an issue with the HTML code. When I run the snippet below, the dot is visible: <ion-view view-title="Send fe ...