Encapsulate the `<li></li>` elements within a hyperlink using CSS styling

I need help wrapping the items in my menu with a link, but I'm struggling to make it work. Can someone please assist me?

Here is my code http://jsfiddle.net/andresgl/4y795fLa/1/

body {
    background: blue;
}

.main-nav {
    display: flex;
}

.main-nav ul {
    display: flex;
    flex-direction: column;
    padding: 0;
    width: 100%;
    list-style: none;
}

... (CSS code continues)

<header>
    <nav class="main-nav">
        <ul>
            ... (HTML code continues)
        </ul>
    </nav>
</header>

And here are two images showing the issue where hover should cover all parent items:

Thank you!

htmlcssflexbox

Answer №1

The optimal solution for my needs

.html file

<header>
    <nav class="main-nav">
        <ul>
            <a href="#">
            <li class="main-nav-item logo">
                <figure><img src="http://www.qubesoft.com/images/bbc-logo.gif" alt="">
                </figure>
            </li>       </a>    
            <a href="#"><li class="main-nav-item"><div class="main-nav-item-link">Lorem Item 1</div></li></a>
            <a href="#"><li class="main-nav-item"><div class="main-nav-item-link">Lorem Item 2 ipsum</div></li></a>
            <a href="#"><li class="main-nav-item"><div class="main-nav-item-link">Lorem Item 3</div></li></a>
            <a href="#"><li class="main-nav-item"><div class="main-nav-item-link">Lorem Item 4</div></li></a>
        </ul>
    </nav>
</header>

and .css file

body {
    background: blue;
}

figure {
    margin: 0;
}

.main-nav {
    display: flex;
}

    .main-nav ul {
        display: flex;
        flex-direction: column;
        padding: 0;
        width: 100%;
        list-style: none;
    }

    .main-nav ul a {
        background: #fff;
        margin-bottom: 3px;
        text-align: center;
        line-height: 99px;
        max-height: 99px;
    }

    .main-nav ul a li  {
        display: block;
        padding: 0 10px;
    }
    .main-nav ul a:hover {
        background: #bcd22c;
    }

    .logo img {
        width: 35%;
    }

@media screen and (min-width: 420px) { 
    body {
        background: purple;
    }

    .main-nav ul {
        flex-direction: row;
        flex-wrap: wrap;

    }

    .main-nav ul li {
        display: flex;
        align-items:center;
        justify-content: center;
    }   

    .logo img {
        width: 50%;
        margin-top: 25%;
    }

    .main-nav-item-link {
        position: relative;
    }

    .main-nav-item-link a {
        height: 100%;
        top: 0;
    }
}

Answer №2

Have you experimented with this as well?

//css

li.main-nav-item:hover{insert your desired styles here}

//html

<li class="main-nav-item"></li>

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

24-hour countdown tool featuring a visual progress bar

Currently, I am in the process of developing an application aimed at assisting individuals in either forming new habits or breaking old ones. In this application, I am looking to implement a countdown timer that ticks down daily; with the help of this help ...

javascripthtmljquerycsscountdown

Having trouble getting the height to work properly on your Blogger Blogspot template?

Issue with embed height=100% not working <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr"> <head> & ...

htmlcsstemplatesheightblogger

Developing play and pause capabilities using JavaScript for the existing audio player

Currently, I am developing a Chrome extension that includes an HTML popup with buttons to play audio files. However, I feel that my current approach is not the most efficient and I am struggling to find ways to simplify the process. The method I am using n ...

javascriptjqueryhtmlaudiogoogle-chrome-extension

The divs are crashing into each other and moving at varying speeds

I have created a mini game inspired by diep.io on codepen, where you can upgrade your reload and shooting capabilities. However, I have encountered an issue where the bullets start moving at different speeds and end up overlapping each other after shooting ...

javascripthtmlcss

Open a new HTML page with jQuery with a click event trigger on an iframe element

Hello everyone, I have a simple question as I am still learning about Jquery. I am attempting to load another .html page whenever a figure element is clicked on this .html page. However, the script tag is not working as expected. Can someone please assist ...

javascriptjqueryhtmlcss

Extracting information from an HTML form and generating a PDF document using TCPDF

I've recently delved into the world of TCPDF and hit a snag... My task was to create a form on our intranet where employees could input data (text fields and radio button), submit it, and have TCPDF generate a PDF with that information. I have an ide ...

phphtmlpdftcpdf

Adding a symbol to a button

My goal is to add an icon to this button using JavaScript: <button id="chat5" onclick="updateChatId('{{ element.pk }}')" class="btn btn-secondary" style="background-color: maroon; border-color: transparent; border-radius: 15px; height: 60px; ...

javascripthtml

Having trouble setting a value as a variable? It seems like the selection process is not functioning properly

My Hangman game has different topics such as cities and animals. When a user selects a topic, the outcome should be a random item from that specific topic. For example: London for cities or Zebra for animals. Currently, I am only generating a random lett ...

javascripthtmlvariablesdomrandom

Media queries do not trigger the execution of CSS code

I am currently working on making a desktop-sized website responsive. However, I have encountered an issue where the CSS rule is being read by the browser but not executed, regardless of whether the media query rule is true or not. I have already included & ...

cssmedia-queriesresponsive

Issue with retrieving body class in Internet Explorer on Magento platform. The body class is not being recognized in IE, but works fine in Mozilla and Chrome

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->getLang() ?>" lang="<?php echo $this->getLang() ?>" dir="ltr"> <?php echo $this->getChildHtml('head') ?> <bod ...

jqueryhtmlcssmagento

Tips for selectively applying CSS to elements within a specific block

How can I apply a specific CSS style only to elements within a certain block? <body> <p>greem green zero</p> <span> hello </span> <div id="main"> ...more tags... </div> <ul><li>1233</li></ul&g ...

javascripthtmlcss

When the "change" event listener is added to an input element, the innerHTML is updated as the value increases but not when it decreases

My div block contains a value that I need to adjust as the input value changes. While the adjustment works when the input value increases, it does not change when the input value is decreased. It seems like there may be an oversight in my logic that I am m ...

javascripthtml

Tips for inserting a php variable into an html document

I am trying to figure out how to export a variable from a php file into an html file. The php file I'm working with is example.php and it contains the following code: <?php $array= ['one','two']; ?> The html file is named ...

javascriptphphtml

Ways to determine if a date is inactive in the Bootstrap Datepicker interface

I need assistance with my form that contains three <input> elements. <input id="from-date" type="text" class="form-control" placeholder="From"> <input id="to-date" type="text" class="form-control" placeholder="To"> <input id="total" c ...

javascriptjqueryhtmlbootstrap-datepicker

Customize the background color of a Material UI row with varying colors for each cell

I am facing an issue with a Material UI table in React 18 where each cell has a different background color, causing the hover style on the row to break. Despite trying various solutions, I have been unable to find a resolution. For reference, you can see ...

cssreactjsmaterial-ui

Assistance needed with selecting a CSS rule

I have a question regarding CSS that seems pretty straightforward. Here is the code in question: <!doctype html> <html amp lang="en-US"> <head> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Slab: ...

htmlcss-selectors

Encountering issues loading background image with Reactjs and Webpack

I've encountered an issue while trying to load a background image in my React project from a custom CSS file. I am currently using Webpack 4. .bgimage { height: 100vh; background: url('../images/header.jpg'); } Unfortunately, the image ...

cssreactjswebpack

The event listener for changing radio buttons

Imagine we have two radio buttons <input type="radio" value="val1" name="radio1" onChange="change()"/> <input type="radio" value="val2" name="radio1" onChange="change()&quo ...

javascripthtmljqueryreactjsdom

I am looking to provide customized edits to particular h1 tags

Is it possible to apply custom formatting to an h1 tag using CSS for a specific section of the webpage? For example, instead of just using: h1{ } I am looking to do something like this: .specific.h1{ } Any suggestions on how to ...

htmlcss

Tips for updating the primary color in Bootstrap?

How can I customize the primary color in Bootstrap to align with my brand's color scheme? Specifically, I'm using Bootswatch's Paper theme. ...

csstwitter-bootstraptwitter-bootstrap-3bootstrap-4