Creating a webpage menu with CSS and HTML

Is there a way to make the background color for "Sub test1" change only when hovering over it, without affecting the background color of "Test1"? See the code at http://jsfiddle.net/r5YCU/22/

Any assistance on this issue would be greatly appreciated. Thank you.

<div id="navbar">
<ul>      
   <li class="navbutton"><span><a id="button-1" 
       href="">Shop</a></span>
   </li>
   <li class="navbutton"> <span><a href="#">Test1</a></span>
            <ul>
                <li><br/><span><a href="#">Sub test1</a>
                    </span>
                </li>
            </ul>
   </li>
   <li class="navbutton"><span><a id="button-3" 
       href="#">Test2</a>  
       </span>
   </li>
   <li class="navbutton"><span><a id="button-4" 
       href="#">Test3</a></span>
   </li>
   <li class="navbutton"><span><a id="button-5" 
       href="#">Test4</a></span>
   </li>

htmlcss

Answer №1

Instead of using JavaScript events, I would utilize the CSS :hover pseudoclass to achieve the desired effect:

li.navbutton:hover {
    background-color:#345808 !important;
}
li.navbutton:hover li {
    background-color: #5c8727!important;
}
li.navbutton li:hover {
    background-color: #345808!important;
}

You can view the complete code here for reference: http://jsfiddle.net/r5YCU/31/

I have made some adjustments to the layout in order to closely resemble the original menu using only CSS.

Answer №2

These elements pertain to design and should be implemented using css...

CSS

.ul{
    list-style: none;
}
#navbar a{
    text-decoration: none;
}
#main-ul{
    background: yellow;
}
.navmenu{
    float: left;
    background: deeppink;
    width: 60px;
    height: 25px;
    margin-right: 3px;
    text-align: center;
    line-height: 25px;
    box-shadow: 0 0 2px 3px black;
}
.navmenu:hover{
    outline: 1px solid white;
    margin-top: 1px;
}
.navmenu:hover > #sub-ul{
    display: block;
    width: 100px;
    background: red;


}
#sub-ul{
    margin: 0;
    padding: 0;
    display: none;
}
.submenu{
    margin: 0;
    padding: 0;
    margin-bottom: 2px;
    background: black;
    color: white;
}
.submenu:hover{
    cursor: pointer;
    color: black;
    background: #585858;
}

HTML

 <div id="navbar">
      <ul class="ul" id="main-ul">      
         <li class="navmenu"><a href="#">Test1</a></li>
         <li class="navmenu"><a href="#">Test2</a>
              <ul class="ul" id="sub-ul">
                <li class="submenu">Test 1</li>
                <li class="submenu">Test 2</li>
                <li class="submenu">Test 3</li>
                <li class="submenu">Test 4</li>
                <li class="submenu">Test 5</li>
                <li class="submenu">Test 6</li>
                <li class="submenu">Test 7</li>
                <li class="submenu">Test 8</li>
              </ul>
         </li>
         <li class="navmenu"><a href="#">Test3</a></li>
         <li class="navmenu"><a href="#">Test4</a></li>
         <li class="navmenu"><a href="#">Test5</a></li>
         <li class="navmenu"><a href="#">Test6</a></li>
         <li class="navmenu"><a href="#">Test7</a></li>
      </ul>
  </div>

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

Incorporate an additional javascript document into a VueJS component

What is the most efficient method to include Javascript files in Vue.js components? ...

javascripthtmlvue.js

Displaying JSON data in HTML proves to be a challenge

I have collected JSON data and organized it into two arrays, then displayed it in JSON format. Now I'm trying to showcase this data in HTML using two loops by correlating the IDs of one array with the userIds of another array. {"personaldetails":[{"i ...

javascriptphpjqueryhtmljson

Determine the height of a Bootstrap 4 row based on a specific column, rather than the tallest

I am facing an issue with a row that contains two columns. The first column has content that should be visible without overflowing, while the second column includes a long list that needs to be scrollable within the row. The challenge with responsive desi ...

csstwitter-bootstrapbootstrap-4overflow

Best practices for displaying code blocks within an AngularJS application

Currently, I am in the process of building a website focusing on AngularJS within AngularJS ;-) To accomplish this, I have included ng-app within the body element. As a result, all my code snippets (enclosed in <pre><code> ... </code>&l ...

javascripthtmlangularjspre

Alter the URL for Jquery AJAX post by utilizing radio buttons

I have a product search box that allows users to search by Cartridge Name or Printer Name. These are different SQL queries, so I have created separate PHP files for each query. However, I am facing challenges in using jQuery to check the value of the radio ...

htmljqueryajaxradio-button

Styling list items (li) on hover without using the li:

I have a menu where I am using the :after element. When I hover over a li in the menu, the hover effect also includes the :after element. HTML: <ul class="main-menu"> <li class="active"><a href="">Menu</a></li> <l ...

htmlcsshoverhtml-lists

The elements with identical IDs are being superimposed

There are two div elements on my webpage, both assigned the "nav" class. Below is the CSS code: .nav { border-radius: 1em; background-color: #0000BB; color: white; padding: 1em; position: absolute;//Fits size to content. margin: 1em; left: 50%; ...

htmlcssposition

Navigating through error messages in NextJs 14 can be tricky, especially when faced with the dreaded "ReferenceError: document not defined" or "prerendering error". It's vital to pinpoint exactly which page

When attempting to run the build on my Next.js application, I encountered an error message that is not very informative given the number of files/pages in my project. How can I pinpoint the exact location of this error and determine the root cause? The pro ...

javascripthtmlreactjsnext.jsbuild

Submit button remains inactive even after submitting form via ajax request

I have a page with multiple forms on it for a CRM that I am developing and each form is properly named, but I am facing an issue where the submit button remains disabled after making a $.post() request. Here is my universal post handler for form submissio ...

jqueryajaxhtmlforms

Incorporating chart.js into a current Django page: a step-by-step guide

I am currently developing a website that includes a feature displaying total hours worked by an employee. I am looking to enhance this function by also showing the hours worked for each day in a month. I have successfully created a chart for this purpose, ...

pythonhtmlcssdjangochart.js

What are some ways in which I can utilize the Ember Handlebars helper?

Similar Question: Using logical operators in a Handlebars.js {{#if}} statement Below is the code snippet provided: {{#each dataArray}} <li>{{#isTrue idVal1 idVal2}} display some text1 {{else}} display some text2 {{/isTrue}} & ...

javascripthtmlember.jshandlebars.js

Browser and contexmenu intersecting halfway

I have successfully implemented a custom context menu in my HTML project. It functions well, but I am facing an issue where half of the menu appears off-screen to the right. Is there a way to detect this and reposition the menu above the mouse pointer? He ...

javascripthtmlcss

Unable to generate new entries with HTML Form

I've been working on creating a simple form with the ability to add new seasons or entries that will be posted to a database, but I've hit a roadblock. Whenever I try to run it, the "Add more Episodes" buttons for new seasons don't seem to w ...

javascriptphphtmlmysql

Element positioning in Material UI is fluid and responsive across all devices, with the ability to place elements at

As a novice in layout design, I am currently developing a web application for both mobile and desktop using React and Material UI. My challenge lies in placing the app navigation at the bottom of the screen. The issue arises because the location of the app ...

cssreactjsmaterial-ui

Utilize the body tag to divide elements in ReactJS

Is there a way to assign different body tags to specific components? For example, I want to apply one body tag to the dashboard component and a different one for the sign up page component. ...

javascripthtmlcssreactjs

Error 404 - CSS file missing: encountering a 404 error while attempting to execute Flask code

Hello there! I'm still getting the hang of programming, especially when it comes to web development. Recently, I encountered an issue with my CSS file - whenever I link it to my HTML and run the Python code, I get an error saying that the CSS file can ...

pythoncsshttp-status-code-404

Interactive Javascript Dropdown Selection

I'm currently developing a registration page for a website and I've added a drop-down box that explains to users why we need their birthday. However, I seem to be having issues with my code. Take a look at the script below: <script language=& ...

javascriptphphtmlclient-sidejquery-events

Step by step guide on adding content to a div by clicking a button, even after the page has already loaded

I have scoured the depths of the internet and forums but have yet to find a satisfactory solution to my problem. Hopefully, someone reading this can offer some help in resolving my issue. I manage a website that showcases concerts for various music groups. ...

javascriptphpjqueryhtml

Tips for positioning a div between two vertically aligned input elements

I'm trying to figure out how to place a div between two inputs with the same height and vertically aligned. It seems like a simple task, but for some reason, the code below isn't working: input{ width: 35%; border: 1px solid #A7A7A7; ...

htmlcss

padding applied exclusively to the Bootstrap column when viewed on a large grid

Can padding be added only for the large grid and not for the medium grid? Large grid with padding: <div class="col-lg-4 pl-3"> </div> Medium grid without padding: <div class="col-md-3"> </div> ...

htmlcssbootstrap-4