I am struggling to activate the hovering feature on my menu bar

I am having trouble making the hover effect in my navigation bar work properly. Even though I can separately make the 'display: none' and hover effects work, they do not function together. I am unsure of what mistake I might be making.

Below is the HTML code:

<nav>
   <ul>
     <li><a href="#"><img class="mainbar"src="images/logov6v2.png" width="175" height="150" padding="0" text-align="center" vertical-align="text-top"></a>              

        <li id="menudrop" class="rightbar"><a href="#">Menu</a></li>
           <ul data-toggle="">
             <li><a href="#">Account Settings</a></li>
             <li><a href="#">About Us</a></li>
             <li><a href="#">Contact</a></li>
            </ul>
    </li>
   </ul>
</nav>

This is the CSS code:

#menudrop.rightbar ul li a {
color: red;
display: block;
text-decoration: none;
}

nav ul li ul {
display: none ;
background: #5f6975;
position: relative;
top:100%;
}

nav ul li ul:hover li {
display: block;
}

Answer №1

One key adjustment was made, aside from correcting some missing closing tags

nav ul li:hover ul {
  display: block;
}

This change ensures that the hover effect is applied correctly on nav ul li ul, which is initially set to display:none;.

See the modified version in this Fiddle link

Additionally, here is the code without any accompanying images:

#menudrop.rightbar ul li a {
    color: red;
    display: block;
    text-decoration: none;
}
nav ul li ul {
    display: none;
    background: #5f6975;
    position: relative;
    top:100%;
}
nav ul li:hover ul {
    display: block;
}
<nav>
    <ul>
        <li id="menudrop" class="rightbar"><a href="#">Menu</a>

            <ul data-toggle="">
                <li><a href="#">Account Settings</a>

                </li>
                <li><a href="#">About Us</a>

                </li>
                <li><a href="#">Contact</a>

                </li>
            </ul>
        </li>
    </ul>
</nav>

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

Adjusting the height of the navigation bar in BootStrap

I'm having trouble resizing the height of the navbar-default in this Bootstrap sample. It seems to be too big for my needs. Are there any Bootstrap classes I can use to adjust the height? For example: <form class="navbar-form navbar-left" role="s ...

Can you explain the meaning of 1__qem?

While looking at the default styles applied to HTML elements for Google Chrome, I came across this information on this page: p { display: block; -webkit-margin-before: 1__qem; -webkit-margin-after: 1__qem; -webkit-margin-start: 0; -web ...

What is the reason a statically positioned element appears behind an absolutely positioned one?

I understand that absolute positioning disrupts the normal flow of elements, but I expected the display order to reflect the order in which elements are placed in the HTML code. .absolute { position: absolute; width: 100px; height: 100px; ...

What is the best way to make a drop down menu list appear when I click on the parent li, and then show the sub li using JavaScript?

I have a code that includes an image, HTML, and CSS code. Can anyone please tell me how I can set up a drop-down menu list to open the sub <li> elements when I click on a parent <li> using JavaScript? You can see the appearance of the code in t ...

Creating a seamless top border that remains unaffected by border radius

I'm currently working on mimicking the style of Google Calendar, and I've encountered an issue with the text input box. When clicked, it should look like this: https://ibb.co/6Hqrnt4 However, what I've created ends up looking like this: htt ...

The issue of Bootstrap dynamic tabs retaining their active state even after switching tabs, leading to elements being stacked

For my university project, I am developing a website that resembles a text editor using Bootstrap as the framework. To create the website menus, dynamic tabs have been utilized. The following is the code snippet I have implemented: <!--Bootstrap ...

Placing a dropdown menu on top of an image

I currently have a slightly rotated menu bar with two buttons as an example: https://i.stack.imgur.com/0sI2P.jpg Due to the rotation, normal HTML handling is not feasible. I am considering using a <map> element to create hyperlinks over the menu it ...

JavaScript function to add or remove a class upon clicking

Currently experiencing an issue with my accordion functionality. I have successfully implemented code that allows for toggling one heading open at a time, but I am struggling to add an open/close image beside each heading. At the moment, when a heading is ...

Tips on making sure video player controls are always visible on an HTML5 video player

Can anyone help me with my HTML video player? I am trying to make the control bar display always, instead of just when hovered over. Any suggestions? ...

Outlook fails to recognize table cell widths when there is an image present

Although this question has been asked previously, the solutions provided did not solve my issue. I am trying to set the width of the <td> element to 70%, but when I insert an image it is affecting the widths of received emails in Outlook (I use MS O ...

"Client-side style not rendering correctly in Internet Explorer 8 when accessed through server in

I have noticed some strange behavior with my .net application. Everything appears fine when running it from Visual Studio on IE8: However, once I deploy the application to my server and access it via URL, it seems to lose its margin: It's puzzling t ...

What are the steps to increase the size of the search bar?

I have been working on this code, but I am struggling to align the search bar properly within the navigation bar. Can someone please guide me on how to achieve this? I apologize for my lack of coding expertise, as I am new to Information Technology and s ...

What is the best way to ensure one div expands to full width while simultaneously hiding another div on the page?

Hey there, I'm looking for a way to expand the width of a clicked div while making the other div disappear from the screen simultaneously. It should also be toggleable, so clicking the button again will shrink the div and bring back the other one. For ...

Generate an adjustable grid layout (with rows and columns) to display information retrieved from an API request

I have recently started learning React JS and JavaScript. To practice, I am working on a small project where I am facing an issue with creating dynamic rows and columns. My aim is to display data in 4 columns initially and then move to a new row and column ...

What steps can I take to have the text extend beyond the background at both the top and bottom edges?

I am attempting to replicate this design using CSS: https://i.sstatic.net/zXInr.png So far, this is what I have achieved: .container{ height: 30px; margin-bottom: 10px; } .redLine{ background-color: red; opacity: 0.5; height: 20px; bor ...

What is the best method for generating a vertical tab using JavaScript in a paragraph format?

Struggling to create a menu similar to this using bootstrap 4. Despite my efforts, I keep encountering various issues. Is there someone who can help me solve this problem? Remember, I am using bootstrap 4. Here is a demo: <!doctype html> <html ...

Grid Refresh Spinner Update

Our Vaadin Grid features a settings icon that when clicked, opens a window allowing users to select/deselect columns. Upon closing this window (triggering our custom window event), the main window's columns are updated accordingly. Now, my requirement ...

Creating a unique button design that incorporates a select tag and utilizes a dynamic percentage width

How can I keep a custom button positioned 20 pixels away from the right side of a select dropdown menu with a fixed width percentage? Using percentages in the background-position property makes the button move too far when the window is large. Setting the ...

Ensuring that a canvas remains centered and completely visible within its parent element while zooming in React

Currently, I am developing a straightforward PowerPoint creator using React. In this project, I have integrated a zoom feature for a canvas element. The principle is that the canvas should resize based on a scale factor. However, there seems to be an issue ...

Unable to retrieve dropdown value using JavaScript and display it in a div

javaScript code: Retrieving data from a dropdown and displaying it in the inner HTML of a div. function showcost() { var days = document.getElementById("Ddays"); var Dudays = days.options[days.selectedIndex].text; var div = docu ...