Having trouble with the visibility of the hover background?

I have a goal in mind:

This is the outcome I've achieved so far: LINK

My aim is to have a white background with a blue border appear at the bottom when hovering over navigation links. Unfortunately, this isn't happening as expected. Can anyone provide insight into why this might be?

Please refer to the Markup and CSS code below:

<header>
    <div>
        <h1>CertsPlan</h1>
        <section>
            <ul>
                <li><a href="javascript:void(0)">+ All Vendors</a></li>
                <li>
                    <article id="header-cart">
                        <img src="img/cart-icon.png" alt="Cart Icon"> 000
                    </article>
                </li>
                <li>
                    <article id="header-search">
                            <form action="#">
                              <input type="text" name="search" value="Exam Code">
                            </form>
                      </article>
                </li>
                <li><a href="javascript:void(0)">Sign In/Register</a></li>
            </ul>
        </section>
        <nav>
            <ul>
                <li><a href="index.html"><img src="img/home.png" alt="Home Icon"></a></li>
                <li><a href="javascript:void(0)">Bundle</a></li>
                <li><a href="javascript:void(0)">Faqs</a></li>
                <li><a href="javascript:void(0)">Contact Us</a></li>
            </ul>
        </nav>
    </div>
</header>

CSS Style:

/* Global Styles */
body {
    border-top: 2px solid #ffffff;
    background: #ffffff;
    font-family: 'Arial', sans-serif;
    color: #57616a;
}

p {
    margin: 5px 0;
    line-height: 25px;
}

strong {
    font-weight: bold;
}

/* Section Styles */

/* Header */
header {
    width:auto;
    margin: 2 auto 0 auto;
    background-color: #f7f7f7;
    border-bottom: solid 5px #dedede;
}

header div {
    width:auto;
    max-width:1040px;
    margin: auto;
    overflow: hidden;
}

header h1 {
    font-size: 30px;
    font-weight: 400;
    color: #2a323a;
    font-family: 'PT Sans', sans-serif;
    vertical-align: middle;
    margin-top: 30px;
    margin-bottom: 25px;
    float:left;
}


/* Navigation */
nav {
    float:right;
    margin:none;
}

header ul {
    list-style:none;
    margin: 0;
    overflow: hidden;
}

nav ul li {
  display: block;
  float: left;
  margin-top: 38px;
  margin-bottom: 35px;
}

nav ul li a {
  font-family: 'PT Sans', sans-serif;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 400;
  color: #2a323a;
  padding: 38px 20px 35px 20px;
  text-decoration:none;
}

nav ul li a:hover {
    background-color: #ffffff;
    border-bottom: solid 5px #00acdd;
}

ul li a:active {
    background-color: #ffffff; 
    border-bottom: solid 5px #00acdd !important;
}

/* Header top right area */

header section {
    float:right;
}

header section li {
    display:block;
    float:right;
    margin: 37px 0px 28px 7px;
}

header section a {
    padding: 10px;
    background: #31bbe2;
    font-family: 'PT Sans', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #ffffff;
    text-decoration:none;
    border-radius: 5px;
}

Answer №1

Your issue stems from having overflow: hidden set on two parent elements, causing the content between their borders to be hidden (as shown by the blue color in the image).

To resolve this problem, follow these steps:

  1. Remove overflow: hidden from header div and add min-height: 89px.
  2. Eliminate overflow: hidden from header ul.
  3. In nav ul li a, adjust the padding values to 38px 20px 33px.

And that's it!

UPDATE:

To ensure proper functionality when resizing the browser, insert an additional div right after the nav section:

<nav>
   [...]
</nav>
<div class="clear"></div>

The styling for the clear div should be as follows:

.clear {
   clear: both;
   display: table;
}

Answer №2

<style>
    /* Custom Global Styles */
body
{
    border-top: 2px solid #ffffff;
    background: #ffffff;
    font-family: 'Arial', sans-serif;
    color: #57616a;}

p
{
    margin: 5px 0;
    line-height: 25px;}

strong
{
    font-weight: bold;}

/* Custom Section Styles */

/* Custom Header Styling */
header
{
    width:auto;
    margin: 2 auto 0 auto;
    background-color: #f7f7f7;
    border-bottom: solid 5px #dedede;
     height: 93px;
}

header div {
    width:auto;
    max-width:60%;
    margin: auto;
    overflow: hidden;
}

header h1
{
    font-size: 30px;
    font-weight: 400;
    color: #2a323a;
    font-family: 'PT Sans', sans-serif;
    vertical-align: middle;
    margin-top: 30px;
    margin-bottom: 25px;
    float:left;
}


/* Navigation Styling */
nav {
    float:right;
    margin:none;
}

header ul
{
list-style:none;
margin: 0;
overflow: hidden;
}

nav ul li {
  display: block;
  float: left;
  margin-top: 38px;
  margin-bottom: 35px;
}

nav ul li a {
  font-family: 'PT Sans', sans-serif;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 400;
  color: #2a323a;
  padding: 38px 20px 35px 20px;
  text-decoration:none;
}

nav ul li a:hover {
  background-color: #ffffff;
  border-bottom: solid 8px #00acdd;
}

ul li a:active {background-color: #ffffff; border-bottom: solid 5px #00acdd !important;}

/* Header top right area Styling */

header section {
    float:right;
}

header section li {
    display:block;
    float:left;
    margin: 37px 0px 28px 7px;
}

header section a {
    padding: 10px;
    background: #31bbe2;
    font-family: 'PT Sans', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #ffffff;
    text-decoration:none;
    border-radius: 5px;
}
</style>
<header>
    <div>
        <h1>CertsPlan</h1>
        <section>
            <ul>
                <li><a href="javascript:void(0)">+ All Vendors</a></li>

                <li>
                    <article id="header-search">
                            <form action="#">
                              <input type="text" name="search" value="Exam Code">
                            </form>
                      </article>
                </li>
                <li>
                    <article id="header-cart">
                        <img src="img/cart-icon.png" alt="Cart Icon"> 000
                    </article>
                </li>
                <li><a href="javascript:void(0)">Sign In/Register</a></li>
            </ul>
        </section>
        <nav>
            <ul>
                <li><a href="index.html"><img src="img/home.png" alt="Home Icon"></a></li>
                <li><a href="javascript:void(0)">Bundle</a></li>
                <li><a href="javascript:void(0)">Faqs</a></li>
                <li><a href="javascript:void(0)">Contact Us</a></li>
            </ul>
        </nav>
    </div>
</header>

Answer №3

Simply update your CSS class

nav ul li a
{
    font-family: 'PT Sans', sans-serif;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 400;
    color: #2a323a;
    padding: 38px 20px 30px 20px;  // The issue lies here
    text-decoration: none;
    height: 93px;
}

The excessive bottom padding is preventing the border from displaying properly

Make this adjustment and it should work correctly

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 showing the value in the subsequent stage of a multi-step form

Assistance is required for the query below: Is there a way to display the input field value from one step to the next in multistep forms? Similar to how Microsoft login shows the email in the next step as depicted in the image below: ...

Has CSS3 been recognized as an official standard?

Can you confirm whether CSS3 has been officially recognized as a W3C standard or is it currently in the status of "CR" (Candidate Recommendation)? ...

Creating a weather format user interface in HTML can be accomplished by following a few

I am currently utilizing the open weather API to showcase weather data, however, I am facing difficulties in arranging the data in a format similar to the one shown below. Example output: I attempted to present the data in the following structure: ...

Blurry text can be a common occurrence when applying the transform(-50%,-50%) function to center

I have found a way to center a section using the following code: <div class="clock-section"> <h5 id="clock-title">We will be arriving soon</h5> <hr class="hr" id="cdhr"> </div> Here is ...

ways to access a designated nodal point in angularJS from a constantly updating data source

I am in need of assistance with how to open a specific node using angularJS from a dynamic data source. I have been able to toggle (hide/show) the sub nodes, but what I would like is for clicking on a specific node to only show its sub-nodes. Currently, wh ...

Can you explain how the Facebook Like button code functions and how I can create a similar feature on my own platform?

I have a website with 250 different items, each containing its own Like button using the standard Facebook "Like" code: div class="fb-like" data-href="http://www.mywebpage.com/myproductpage" data-send="false" data-layout="button_count" data-width="80" dat ...

Control the movement of the mouse pointer using javascript

For my University presentation on click-jacking, I came across an intriguing example that I wanted to replicate but didn't know where to start. The whole concept seemed very complex to me. To get a better idea, please take a look at this video: https ...

I struggled to insert a horizontal scrollbar into the iframe

In the process of constructing a family tree, I am utilizing lists as elements to create the structure. However, I am encountering an issue when the tree grows larger - no horizontal scrollbar is appearing. I have attempted to use iframe and CSS to manage ...

Arranging a Vertical Element Within a Rotated Holder

Who would have thought that geometry would come into play when working with CSS? I need help figuring out how to perfectly cover a rotated container with an upright background image. The goal is to hide the rotation on the sides and maintain dynamic contro ...

The height of the division is either inadequate or excessive when set at 100%

After making progress, I hit a roadblock that has me stumped. The issue I'm facing is with the wrapper height setting. If I set it to auto, it stops at the bottom of the content, leaving the background exposed when the content is shorter than the win ...

Eliminate the table background in a single cell

Apologies if the title is not very descriptive, I couldn't find the right words to use. Below is the table in question. https://i.sstatic.net/LHwbG.png I'm looking to remove the white border (background of the table) from just the upper-left ce ...

The styling of Bootstrap CSS is not displaying correctly within the body of the webpage

I'm facing an issue where the content in the body of my page is not rendering correctly due to a problem with my bootstrap css. Specifically, the paragraph tag seems to be rendering inside the image tag even though both are within the body. @{ Lay ...

Box with negative z-index cannot be clicked

I am currently facing an issue with a textbox in the center of my screen - when I click on it, no actions are registered. This leads me to believe that there may be a CSS Z-Index problem at play here. How can I troubleshoot and correct this issue effective ...

Tap on the image to enlarge

I have a question regarding using thumbnails from Bootstrap. I am trying to create functionality where when I click on a thumbnail, the picture with its original sizes appears and then disappears when clicked anywhere else on the page. Below is an exampl ...

The background image is cropped at both the top and bottom edges

Check out this JSFiddle link: http://jsfiddle.net/SoSoDef/uhx3o62f/1/. The code seems to be running fine, but I'm facing an issue where the image is being slightly cut off at the top and bottom for some reason. -webkit-background-size: cover; Can an ...

Issues while closing the mobile menu using toggleClass

I'm currently troubleshooting a mobile menu issue on a website that I didn't create, so the developer's code is a bit unfamiliar to me. I thought fixing it would be simple, but I'm having difficulty figuring it out. Essentially, when th ...

Adding a bootstrap label on the corner of a div using overlay technique

I'm attempting to superimpose a bootstrap label in the corner of a DIV. My goal is to position the label in the top left corner of the div, partially overlapping it. Thank you <div class="span4" style="border-bottom: none; border-top: 4px s ...

Is it possible to refresh the chat-box using PHP?

I recently created a chat box application using PHP, but I'm facing an issue with its automatic reload functionality. Is there a way to implement auto-reload in PHP itself, or would it be better to restructure the system to utilize AJAX? Additionally, ...

implement a Django for loop within the template by utilizing JavaScript

Is it possible to incorporate a {% for in %} loop and {{ variables }} in a Django template using JavaScript DOM (insertAdjacentText, or textContent) and dynamically load data from the views without refreshing the entire page? If so, can you please guide me ...

Erase embedded frame from a Google Sheets document

Is there a way for me to customize the frame and replace it with my own design? Click here to view the Google Sheet embedded frame ...