Seeking assistance in incorporating an image into a drop-down menu

I am in the process of integrating a CSS based drop-down menu into my Wordpress website, and I need assistance with adding an image on the right side of my links when a user hovers over them in the menu. Below is the code I currently have, along with a reference link showcasing a similar effect that I would like to replicate.

Here is an example of what I'm trying to achieve:

HTML

<div class="header">

    <div class="nav-holder">
        <ul id="nav">
            <li><?php wp_list_pages('title_li=&depth=0&sort_column=menu_order'); ?></li>
        </ul>

    </div>

</div>

CSS

.nav-holder {
    height: 32px;
    width: 1010px;
    float: right;
    position: relative;

}
#nav {
    font-family: Arial;
    font-size: 12px;
    float: right;
    margin: 0px 30px 0 0px; padding:  0 0px 0 0px;
    color: #FFF;
}

#nav li a, #nav li {
    float: left;
    text-transform: capitalize;
    z-index: 9997;


}

... (CSS styling continues)
cssdrop-down-menu

Answer №1

UPDATE:

After reviewing your code, it seems like you are attempting to organize the contents of the

  • element within a container and then float elements inside it. I have simplified your example to illustrate the concept. You should be able to apply this to your own code.

    HTML:

    <ul id="nav">
    <li>
        <a>Past Projects</a>
        <div class="menu-item-container">
            <img src="http://lorempixum.com/100/100/" class="menu-image">
            <ul class='children'>
                <li>Sub Item 1</li>
                <li>Sub Item 2</li>
                <li>Sub Item 3</li>
            </ul></div>
    </li>   
</ul>

    CSS:

    #nav li {
    list-style: none;
    position: relative;
}
#nav li div.menu-item-container {
    position: absolute;
    left: 0;
    top:100%;
    display:none;
}
#nav li:hover div.menu-item-container {
 display:block;   
}
#nav li img.menu-image {
    
    float:right;
}
#nav li ul.children {
float:left;
}

    Check out the working example in this fiddle: http://jsfiddle.net/thomas4g/VL3Sz/15/

    I hope this explanation clarifies things for you!

    I'm unable to recreate your menu exactly, so my previous answer may not be spot-on For reference, here is the original solution I proposed: utilizing the CSS pseudo class :hover along with a background image: HTML:

    <span class="menu-item">My Epic Menu Item</span>

    CSS:

    .menu-item {
 padding:5px;   
 padding-right:25px;
}
.menu-item:hover {
    background-image:url("http://lorempixum.com/20/20/");
    background-position:right;
    background-repeat:no-repeat;
}

    Experiment with this approach using the provided fiddle: http://jsfiddle.net/thomas4g/NQQjX/4/

    If this doesn't meet your needs, please let me know so I can refine the solution further.

    • 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

    `Zooming and scrolling feature within a masked image`

    I'm struggling to achieve a scrolling zoom effect similar to the website mentioned below, but I can't seem to get it to fully zoom. Additionally, when I try to zoom in on a clipped shape or text while scrolling, the entire div ends up scrolling ...

    javascripthtmlcss

    Implement custom styles to enhance the appearance of users' Magento websites

    Is it possible to add additional CSS only to users/customers who are logged into our webshop? If so, how should I go about it - through XML or PHTML? Stian ...

    cssmagentophp

    Issue with the MUI Autocomplete display in my form

    Recently, I started using Material UI and Tailwind CSS for my project. However, I encountered an issue with the Autocomplete component where the input overlaps with the following DatePicker when there is multiple data in the Autocomplete. I have attached a ...

    csstypescriptnext.jsmaterial-uitailwind-css

    Utilize CSS to incorporate an image as the background of a <div> element

    I'm a beginner in the world of HTML/CSS and this is my practice page. I have a section with an image of a person, and I'd like to add a quote next to the image. However, I'm struggling to make the image fill the entire width and height of th ...

    htmlcssimage

    Persistent navigation once fullscreen banner is completed

    I have a full screen header on my one-page website. Below the hero section is the navigation element, which I want to be fixed after scrolling past the height of the full screen. Here's what I currently have in terms of code. HTML: <div id="hero" ...

    javascripthtmlcssfullscreen

    How can I distinguish the search results from the while loop section at the bottom of the page?

    One issue here is the footer's margin position being influenced by the results of the while loop. To see the problem more clearly, visit this link: Below is the code snippet: <div id="print_output1"> <?php $co ...

    phphtmlcssfooter

    Adding a stylish background image to a header

    Recently, I tried to add a background image as a backdrop for my Header but ran into some issues. I was successful using a background color, but not with the background image itself. h2 { background-color: red; font-family: "Comic Sans MS", cursiv ...

    htmlcssheaderbackground-image

    Tips for making inline elements match the line height

    Consider this block element : <div style="background-color: gray; line-height: 30px;"> Some text and a <a style="background-color: yellow;">link<\a> <\div> Why is it that the yellow color does not extend the full hei ...

    htmlcssblock

    Tips for aligning 2 divs in the same position?

    I am working on a slider feature that includes both videos and pictures. I need to ensure that the videos are hidden when the device width exceeds 600px. Here is the HTML code snippet: <video class="player__video" width="506" height="506" muted preloa ...

    htmlcss

    The <span> tag creating a surprise gap following a word

    Using Angular4, I've come across an odd issue where one of my span elements is adding an extra space to the end of words like this: https://i.stack.imgur.com/H4TD7.png The only CSS properties that are set include font-family, -webkit-font-smoothing, ...

    htmlcss

    How to customize the hover and active properties of a checked checkbox in Vue 3 using Tailwind CSS and PUG?

    It seems that checkboxes have a level of sophistication that I never anticipated, or perhaps my brain just can't quite grasp the nuances of checkboxes. After spending a significant amount of time researching and experimenting with checkboxes in a Vue ...

    cssvue.jscheckboxpugtailwind-css

    CSS: Continuous animation loop does not smoothly transition between initial and final keyframes

    It seems like I have come across an issue with a CSS animation that I can't find a solution for. The animation is supposed to loop infinitely, and while it is working, there is a problem. // CSS @keyframes myanim { 0% { transform: translate(0, 0) ...

    htmlcss

    Design of web pages, Cascading Style Sheets

    I want to add another table next to my dataGrid, floating to the left of it. Like this representation in the main div: | | | | A | B | | | | Here, A represents the current dataGrid containing all user information, and B will be the ...

    htmlcssfacelets

    What is the most effective method for arranging divs in a horizontal layout?

    When it comes to creating a horizontal three-column div layout, there are a variety of methods to consider: Position: relative/absolute; Float: left/right; with margin: 0 auto; for center div Float: left; for all divs Display table / table-cell What do ...

    javascriptcss

    Ways to eliminate color from a link upon clicking a different one

    I had a specific idea in mind - to create a simple menu bar where clicking on a particular link would display related content below. The chosen link should turn blue when selected. I managed to come up with the following code: <a href="#" class="link"& ...

    javascriptjqueryhtmlcsshyperlink

    What is the best way to achieve a curved outer edge for a rectangle using CSS?

    I am trying to style the header and footer of my website, which is built using a SAAS CMS. Unfortunately, I am unable to change the HTML structure, but I can add custom CSS. My goal is to create curved headers and footers with upward and downward curves. I ...

    cssbootstrap-4

    Conceal list items by clicking elsewhere on the page

    Currently, I am facing an issue with my search user functionality. Whenever a user clicks anywhere else on the page, the list of results does not disappear unless the user manually deletes all the words they have typed. This behavior is not ideal and despi ...

    javascriptjqueryhtmlcss

    What is the best way to prevent the double tap event on radio buttons for mobile devices?

    My form with radio buttons works perfectly on the computer, but encounters issues on mobile devices. Users are required to double-tap to select a radio button, causing confusion. Is there a way to disable the double-tap requirement? I've looked at ot ...

    javascripthtmljquerycssforms

    Combine values in CSS without any spacing

    Currently, I am attempting to create a LESS mixin that can take a numerical value (degrees for rotation) and generate the appropriate CSS code to rotate an element. However, I am facing difficulties trying to handle both "270deg" and the integer "3" (which ...

    cssless

    Enhance Material UI BottomNavigationAction by adding a pseudo-element

    Trying to enhance a selected item with an additional UI element using a pseudo-element. Specifically, looking to add a line above the menu item. https://i.stack.imgur.com/MZnmw.png The code I've implemented is not displaying the desired line: const ...

    cssreactjsmaterial-uipseudo-element