How to prevent a nested element from inheriting the parent's styling

<ul id="login">
    <li><a href="#">User></a></li>
    <li><a href="#">Logout></a></li>
</ul>

My menu and sub-menu are functioning correctly, however, the last item that came from a Partial view is not displaying due to the following line of code:

/* hide the second level menu */
    .menu ul {
           display: none;

I tried using the :not selector, but it caused the display to be incorrect and the first sub-menu stopped working.

.menu ul:not(#login)

In this example, all four <LI> elements should have the same format and the first one should display the submenu.

I also attempted to create a different class for the second UL and it did not work correctly.

body {
  background: black;
}

.menu {
  display: block;
}

.menu li {
  display: inline-block;
  position: relative;
  z-index: 100;
}

.menu li a {
  font-weight: 600;
  text-decoration: none;
  padding: 11px;
  display: block;
  color: #ffffff;
  -webkit-transition: all 0.2s ease-in-out 0s;
  -moz-transition: all 0.2s ease-in-out 0s;
  -o-transition: all 0.2s ease-in-out 0s;
  -ms-transition: all 0.2s ease-in-out 0s;
  transition: all 0.2s ease-in-out 0s;
}

.menu li a:hover, .menu li:hover > a {
  color: #ffffff;
  background: #9CA3DA;
}

/* hide the second level menu */
.menu ul {
  display: none;
  margin: 0;
  padding: 0;
  width: 150px;
  position: absolute;
  top: 43px;
  left: 0px;
  background: #ffffff;
}

/* display second level menu on hover */
.menu li:hover > ul {
  display: block;
}

.menu ul li {
  display: block;
  float: none;
  background: black;
  margin: 0;
  padding: 0;
}

.menu ul li a {
  font-size: 12px;
  font-weight: normal;
  display: block;
  color: #797979;
  border-left: 3px solid #ffffff;
  background: #ffffff;
}

.menu ul li a:hover, .menu ul li:hover > a {
  background: #f0f0f0;
  border-left: 3px solid #9CA3DA;
  color: #797979;
}
<nav>
<ul class="menu">
    <li>
        <a href="#"><i class="icon-home"></i>HOME</a>
        <ul class="sub-menu">
            <li><a href="#">Sub-Menu 1</a></li>
            <li><a href="#">Sub-Menu 2</a></li>
            <li><a href="#">Sub-Menu 3</a></li>
        </ul>
    </li>
    <li><a href="#"><i class="icon-user"></i>ABOUT</a></li>
    <li>            
        <ul id="login">
            <li><a href="#">User</a></li>
            <li><a href="#">Logout</a></li>
        </ul>
    </li>
</ul>
</nav>

Answer №1

Could you provide an explanation as to why the User and Logout links were not placed on the same level as Home and About, like so:

<nav>
<ul class="menu">
    <li>
        <a href="#"><i class="icon-home"></i>HOME</a>
        <ul class="sub-menu">
            <li><a href="#">Sub-Menu 1</a></li>
            <li><a href="#">Sub-Menu 2</a></li>
            <li><a href="#">Sub-Menu 3</a></li>
        </ul>
    </li>
    <li>
        <a href="#"><i class="icon-user"></i>ABOUT</a>
     </li>
     <li><a href="#">User</a></li>
     <li><a href="#">Logout</a></li>
 </ul>
</nav>

It seems like a valid layout!

UPDATE

By making the following CSS modifications, your menu should function as intended.

.menu ul.sub-menu li a { ... }
.menu ul.sub-menu li a:hover, .menu ul.sub-menu li:hover > a { ... }
#login {padding: 0; text-transform: uppercase;}

codepen

Answer №2

Take a look at this code snippet:

<nav>
  <ul class="menu">
    <li>
      <a href="#"><i class="icon-home"></i>HOME</a>
      <ul class="sub-menu">
        <li><a href="#">Sub-Menu 1</a></li>
        <li><a href="#">Sub-Menu 2</a></li>
        <li><a href="#">Sub-Menu 3</a></li>
      </ul>
    </li>
    <li><a href="#"><i class="icon-user"></i>ABOUT</a></li>
    <li id="user"><a href="#">USER</a></li>
    <li id="logout"><a href="#">LOGOUT</a></li>
  </ul>
</nav>

Simply add this code to your project and you're good to go!

Answer №3

You have effectively positioned the ABOUT link within its own list item. Below is the correct HTML formatting:

<nav>
<ul class="menu">
    <li>
        <a href="#"><i class="icon-home"></i>HOME</a>
        <ul class="sub-menu">
            <li><a href="#">Sub-Menu 1</a></li>
            <li><a href="#">Sub-Menu 2</a></li>
            <li><a href="#">Sub-Menu 3</a></li>
        </ul>
    </li>
    <li>
        <a href="#"><i class="icon-user"></i>ABOUT</a>
        <ul id="login">
            <li><a href="#">User</a></li>
            <li><a href="#">Logout</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

Dealing with a routing issue in node.js/express involving JavaScript and CSS

I'm facing an issue. I need to set up a route from localhost.../cars to localhost../bmw/x1 On the localhost../cars page, there's a button that, when clicked, should load localhost../bmw/x1 This is the JavaScript code I have: const express = req ...

Unlocking the Power of JavaScript: Harnessing Its Potential for Numerous IDs in HTML

There's a script I came across on the internet at this link: let multi = 2; let str = "Little lamb"; let multiStr = ""; while(multi > 0){ multiStr += str multiStr += " "; multi--; } multiStr = multiStr.trimEnd ...

Alignment issue with Bootstrap dropdowns noticed after dynamically loading dropdown content in Blazor

When working with Blazor, you have the ability to dynamically load content by enclosing it within an @if block and then setting the condition to true, such as when a button is clicked. Recently, I encountered an issue with a Bootstrap dropdown in my proje ...

Conceal the menu on jQuery click event anywhere on the page

There is a button on my interface that, when clicked, opens a menu. The button appears blue when selected and the menu opens, but when a menu item is chosen, the menu closes and the button returns to its original state. However, my problem arises when I ...

Using PHP to dynamically pull and update webpage content directly from the database

Currently, I am utilizing PHP to upload information into a database and then using PHP again to display that data. In the code snippet provided below, PHP is used to exhibit all the content stored in the database. Each row within the database table will b ...

No response observed upon clicking on the li element within the personalized context menu

I created a custom context menu that pops up when you click on an li element within an unordered list. I'm trying to trigger an alert when clicking on an li item inside the context menu, but it's not working as expected. To handle this dynamic c ...

Transform input string containing newline characters into separate paragraphs

I utilize Contentful CMS for content management and fetch the content through their API. When the content is fetched, it comes in as a JSON object. One of the keys within this object pertains to the main text block for the entry I am retrieving. This stri ...

Filling out a Form in Advance

I'm having trouble populating a form in a new window using JQuery. The new window opens as expected, but I can't get the form to populate successfully. $( "body" ).delegate( ".propose", "click",function() { var url = './prop_form.php& ...

The jQuery .load method is having trouble loading a local HTML file within a Cocoa WebView

Having an issue with my Cocoa WebView where I'm attempting to load a local HTML file using jQuery.load(). My code snippet looks like this: $("#mydiv").load("test.html"); // The test.html file is located within the app's bundle Although no exce ...

Button styles that have been verified will not be shown in Firefox

Hello, first time poster here! Client specifications for CSS: button { border: 1px solid #B8B7B8; border-radius: 8px; height: 4em; margin: 25px 2px 25px 0; text-align: center; text-decoration: none; width: 4em; } button:active, button:che ...

the combination of class and type functions as a jquery selector

<button class="actionButton default" type="submit"> Save</button> Can you select this button by both its class and type using a jQuery selector? I attempted the following, but it did not work: var saveBttn = $('.actionButton.default [ty ...

Creating image filters using an object in jQuery

I am faced with a challenge where I have multiple image tags nested within a div that has the class google-image-layout. Each image is equipped with various data attributes, including: data-anger="0" data-disgust="0" data-facedetected="0" data-fear="0" da ...

Access Silverlight to open Windows Explorer

Is it possible to launch Windows Explorer to a specific folder from a Silverlight application running in a browser? Also, is there a method to retrieve the machine name within a Silverlight app? ...

Is there a way to locate multiple buttons on a webpage that have the same id and field name but varying values using selenium?

On my webpage, I am looking to interact with four submit buttons. All four buttons have identical Id and name attributes, with the only difference being their values. Is it possible to locate and handle these elements using Selenium WebDriver? (Consideri ...

The fixed-top navbar in Bootstrap 5 is not displaying the toggle button

I have encountered an issue with the Bootstrap 5 navbar. When I set it to be fixed at the top, the toggle button does not show up when resizing the browser window. However, if I remove the 'fixed-top' class, the toggle appears as expected. What c ...

Creating a split background with dual hues in a VUE project

I'm new to learning VUE and I'm trying to create a page where two different colors connect on the left and right with the same height. However, I'm running into issues where the colors don't align unless I add content to the right side. ...

What is the best way to implement a new search input for my datatable while also enabling the searchHighlight feature?

I'm attempting to implement a search bar for my datatables. I need to hide the default search engine that comes with datatables, so I added a script that I found in a forum. However, when I try to run it in my code, it doesn't work and displays a ...

What's the reason the element inside the <div> is not displayed when a value is selected in the dropdown box?

I am perplexed as to why the element inside the does not appear when a value is selected in the drop down box. However, it works perfectly fine in JSFiddle: JSFiddle Below is my HTML code and Jquery script that functions properly in my own system: <t ...

Are the menubar menus positioned beneath a different div element?

Currently facing an issue with an HTML Menubar where the menus are appearing below another div, and not getting displayed as expected: ...

Troubleshooting a Jasmine Unit Testing Error for Button Click in Angular 4

Exploring the world of Jasmine and Angular 4, I am aiming to write tests for a button functionality in a multi file upload feature. Below is the code snippet from my spec file: import { async, ComponentFixture, TestBed } from '@angular/co ...