What is the best way to eliminate the excess height in my <li> element?

I'm a little unsure about how to articulate my question, so I'm just going to share the code:

body {
  background-color: #232026;
  background-image: url('galaxy16cropped.jpg');
  background-position: center top;
  background-repeat: repeat-y;
  background-size: 2000px;
  background-attachment: fixed;
  font-family: 'Lato', 'Arial', sans-serif;
  color: #FFFFFF;
  padding: 0px;
  margin: 0px;
  line-height: 1.5;
}
a:hover:not(.nav) {
  background-color: yellow;
}
div.nav {
  background-color: #232026;
  width: 100%;
  margin: 0px;
  padding: 6px 0px 6px 0px;
  height: 40px;
}
.nav li {
  color: #FFFFFF;
  display: inline;
  list-style-type: none;
  text-align: center;
  text-transform: uppercase;
  margin: 0px;
}
li.current {
  background-color: #424242;
}
.nav li.current:hover {
  background-color: #424242;
}
.nav a:hover {
  background-color: #737373;
}
.nav a {
  color: #FFFFFF;
  text-decoration: none;
  display: inline-block;
  border: none;
  width: 140px;
}
.nav p {
  color: #FFFFFF;
  margin: 0px;
  text-decoration: none;
  display: inline-block;
  width: 140px;
}
.content p {
  text-align: justify;
  margin-left: 10px;
  margin-right: 10px;
  max-width: 400px;
}
.container p {
  text-align: justify;
  margin-left: 10px;
  margin-right: 10px;
}
div.bar {
  margin: 0px;
  width: 100%;
  padding-top: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid #DBDBDB;
  border-top: 1px solid #DBDBDB;
  background-color: #424242;
  opacity: 0.8;
  text-align: center;
}
ul {
  text-align: justify;
  margin-left: 10px;
  padding-left: 8px;
  margin-right: 10px;
}
.body li {
  font-size: 80%;
  margin-bottom: 6px;
}
.body li:before {
  content: "\25B7";
  padding-right: 8px;
}
<div class="nav">
  <img src="logotranspwhite.png" height="40px" style="float:left; margin-right:10px; margin-left:15px; border: none;">
  <ul>
    <li class="current">
      <p>Home</p>
    </li>
    <li><a href="about.html">About</a>
    </li>
    <li><a href="null">Contact</a>
    </li>
    <li><a href="gallery.html">Gallery</a>
    </li>
  </ul>
</div>

It's interesting to note that the hover background extends farther than the .current background. I tried adding a:hover:not(.nav) in an attempt to resolve this, but it didn't have the desired effect. I want to maintain the a:hover for the rest of the page but struggle with balancing out my menu backgrounds.

This issue has me stumped! Your assistance is much appreciated!

Answer №1

Ensure you include layout in your .nav li selector.

.nav li {
  display: inline-block;
}

Alternatively, you have the option to float it:

.nav li {
  float: left;
}

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

Tips for equalizing the height of inner DIVs within a container

Similar Question: How to maximize a floating div? Showing my HTML setup below: <div id="container"> <div id="sidebar"> left <br /><br /><br /><br /><br /><br /> ...

Tips for transitioning the li class from active to none

Struggling with changing the li class (of Home) from 'active' to none (or another class) when clicking on the profile tab, and then changing the li class (of Profile) from none to 'active' when the profile is activated. Snippet of my c ...

What strategies can I employ with flexbox to achieve my design goals?

How can I achieve my design requirements using flexbox? design requirements The current code that I have implemented follows the flexbox approach to meet the design requirements. However, the output of this code does not match the screenshot of my design ...

How about this: "Leveraging the power of #IEroot to achieve a

Has anyone successfully implemented the IE CSS hack #IEroot? I came across it while reading this informative article, but unfortunately, it doesn't seem to be working for me. I'm currently trying to resolve an inline styling bug in order to achi ...

Exploring ways to personalize the behavior and style of the material-ui Accordion component

There is a div container in gray with an accordion component containing only one AccordionSummary component. Below that is another div in blue. The initial view looks good (see pic #1). When the accordion is expanded: The AccordionDetails component is dis ...

CSS alert problem encountered

I have an HTML and CSS notification template that I would like to incorporate into my PHP code. You can view the template here. HTML <div class="alert-box error"><span>error: </span>Write your error message here.</div> &l ...

The Bootstrap table is not adhering to the specified width when the display is set

I encountered an issue starting yesterday. I am utilizing Bootstrap 4 and tables. Whenever I set a width greater than 13.5vw, the table does not adjust accordingly. You can view the fiddle here Below is the code snippet: HTML <table cl ...

What might be causing my animation to not run as expected?

I recently tried to create a bouncing arrow following a tutorial, but the code I used is almost identical with minor differences. However, when I try to incorporate it into my hero unit, the animation does not work as expected. The issue could be related ...

Removing a background by linking a CSS file

Issue Resolved: I have found the solution. The problem was that the css document still contained html tags. Thank you to everyone who provided assistance. While designing a website using css, I encountered a situation where the site worked perfectly when ...

React - Styling with Pseudo Element on Input Element not displayed properly

I'm struggling to understand why an ::after element is not displaying on an input element, but is working fine on a div. I'm attempting to create a performance-friendly focus effect for an input element, where it glows when in focus using the af ...

jQuery: Function is not running as expected

I'm facing a challenge in executing a function twice, and I'm having trouble identifying the issue. Check out my JSFiddle at the following link: http://jsfiddle.net/g6PLu/3/ Javascript function truncate() { $(this).addClass('closed&apo ...

Utilizing the calc() function to determine height dimensions

I created a very simple layout with 5 divs, which can be viewed here: http://jsfiddle.net/8tSk6/. In this layout, I want the div with the ID "kubka" to have a height of 100% - 100px (height: calc(100% - 100px);). However, I am running into issues as it i ...

How do I position an element at the center of a div using CSS?

Here is some HTML code that I need help with: <div id='nav'><a href ='./?page=1'>1</a> 2 <a href ='./?page=3'>3</a> <a href ='./?page=4'>4</a> <a href ='./?page=5&ap ...

Adding animation effects using CSS and/or jQuery

Are there any Jquery plugins or CSS codes available to achieve similar effects as seen on the following pages and , without utilizing webGL?... ...

Thick black border on select list in Internet Explorer version 10

After recently switching to IE10, I couldn't help but notice that all my dropdown lists (select lists) now have a bold black border when in the "dropped down" state, like the example below. Unfortunately, I am unable to inspect the element using IE&ap ...

Hide overflow for images with unique shapes

Here are the two image layers: One shows a hand holding a phone, and the other is a black hole. This is how you can achieve it using HTML markup: <div class="wrapper"> <img class="wrapper__image" src="path/to/image.png"> </div> And ...

If the item has an active class, apply a new class to the parent element and all of its

If I have code like the example below and want to add the show class to the parent and ancestors. // The last `nav-item` has the `active` class <div class="nested-group nested-item show"> <div class="nested-item show"> <div class="n ...

How to Properly Adjust the Material UI CircularProgress Size

Is there a way to display the Material UI CircularProgress component at a size that nearly fills the parent div, which has an unknown size? Ideally, I want the size to be around 0.8 * min(parent_height, parent_width). I've experimented with adjusting ...

What's the deal with inline blocks and text in the middle?

Check out this code I created for a navigation bar. HTML : <div class="header-nav"> <div class="header"> <img src="../Pictures/LifeFrame/2.jpg" width="100%" height="100px" /> </div> <div class="nav" align="c ...

Align text vertically within labels and links styled with bootstrap

When using bootstrap button styled labels and links with a larger height than default, the text tends to be vertically aligned at the upper side of the button. However, when using an actual button element, the text is centered vertically. Is there a way t ...