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

Error in Chrome: Text container's height is not fully extended to 100%

I'm encountering an issue with achieving 100% height on a child container in Google Chrome, although it works perfectly fine on Firefox. Here is the URL: http://linco.com.py/beta/multiplaza/cartelera.php The styling for the main container is as fol ...

cssgoogle-chromehtml

Looking for a PHP add-on for fpdf converter that can handle ul li tags

I need assistance with using fpdf to convert dynamic site content to pdf. The issue is that fpdf does not support ul li tags. Is there an add-on available for fpdf that supports ul li and ol li tags in html? To provide more context: The content being con ...

phphtmlpdffpdf

Child element casting shadow over parent element

I am currently using box shadow for both the parent (.map) and child (.toggle-button): .map { position: fixed; top: 20px; right: 0; width: 280px; height: 280px; z-index: 9999; box-shadow: 0px 1px 6px 0px rgba(0,0,0,0.3); } .map ...

javascriptjqueryhtmlcss

Having trouble viewing the CSS menu on Internet Explorer 8? Could it be a potential JavaScript issue causing the problem?

Receiving complaints about the menu bar dysfunction in Internet Explorer 8 has left me bewildered. Despite working perfectly on all other browsers and earlier versions of IE, I cannot figure out what's wrong with the code. You can view the website at ...

javascriptcssinternet-explorer-8

PHP query for beginners. Integrating JavaScript into a PHP webpage

Hey there! I am not familiar with PHP development, as I have never worked with it before. However, I have been tasked with adding a Google Shopping cart tracking code to a website. After someone completes an order, they are sent to finishorder.php. Upon re ...

phpjavascripthtml

Invoke a specific URL during an HTML5 upload

So I've got this code that allows for file upload via drag and drop using HTML5 in the browser. $(function(){ var dropbox = $('#dropbox'), message = $('.message', dropbox); dropbox.filedrop({ // Customizing upload settin ...

javascriptphphtmlpost

Enable only a single radio button to be selected in HTML

I am facing an issue with my radio buttons where I only want one to be selected at a time. Despite giving them the same name, all four can still be selected simultaneously. <h1>Portion</h1> <input type="radio" name="portion_n ...

html

What is the best way to target outer elements only using CSS selectors?

Having trouble with a CSS selector: $("td.cv-table-panel-element") This selector returns a list of elements, shown in the screenshot linked below: https://i.stack.imgur.com/RoVMj.png Each element represents a column in a table with unique content. The ...

jqueryhtmlcssjquery-selectorscss-selectors

Custom JSX element failing to include children during addition

I have created a unique component in JSX, like this: const CustomComponent = ({content}) => { return <div className={content}></div>; } I am using it as follows: <CustomComponent content={"xyz"}> <p>Some additio ...

htmltypescriptnestedjsx

Ways to show dropdown menu link exclusively on mobile browsers and not on desktop browsers

<li class="megamenu-content"> <div class="megamenu-content-wrapper clearfix"> <ul class="col-lg-3 col-sm-3 col-md-3 "> <li class="cat-header">DISPLAY MEMBERS</li> ...

javascripthtmlcssdrop-down-menumobile-browser

Organize pictures and words side by side on both sides at the same time

I am currently facing an issue while trying to load images and quotes vertically on the left and right side of the page. The problem arises with the 3rd image and quote due to an unexpected margin in the CSS code. Despite my efforts, I have not been able t ...

htmlcss

minimize the size of the indigenous foundation input field

Currently incorporating this code snippet into my application: <Item fixedLabel> <Input style={{ width: 0.5 }}/> </Item> The fixedLabel element is extending the entire width of the screen. I have attempted adju ...

javascriptcsstypescriptreact-nativenative-base

Sorting Columns in JQuery Datatables

Encountering an issue with JQuery DataTables (datatables.net) where it takes 2 clicks to sort the columns when there are only 2 rows in the table. The first column sorts on the first click, but subsequent columns require multiple clicks. Despite testing th ...

javascriptjqueryhtmluser-interfacedatatables

What is the best way to navigate through images only when hovering?

I have a website that showcases a collection of images in a creative mosaic layout. Upon page load, I assign an array of image links to each image div using data attributes. This means that every image in the mosaic has an associated array of image links. ...

javascriptjqueryhtmlimageimage-gallery

Conceal the browser scrollbars

When I have two DIVs on my webpage that are larger than a browser window, it results in a horizontal scrollbar being displayed. How can I hide this browser scrollbar for the first DIV while still showing it for the second one? For example, if I have two ...

htmlcssscrollbar

How can I line up elements in different divs when the width is adjusting based on the window size?

Trying to align a search input and a result element in separate containers when the window size changes. Looking for a solution without using Javascript. One window size: A smaller window: Currently utilizing but facing challenges with responsive desig ...

htmlcsswebresponsive-design

What is the best way to maximize the use of the space available until reaching a div with varying dimensions each time

I have a div on the left that displays a name, and it can vary in length. On the right, there is another div with buttons. The number of buttons may change, so I am unsure how many will be displayed. Is there a way to utilize only CSS to make sure the fi ...

htmlcssposition

"After clicking the button for the second time, the jQuery on-click function begins functioning properly

(Snippet: http://jsfiddle.net/qdP3j/) Looking at this HTML structure: <div id="addContactList"></div> There's an AJAX call that updates its content like so: <div id="<%= data[i].id %>"> <img src="<%= picture %&g ...

javascriptjqueryhtml

When using JQuery's .each method, only the first two elements from an array of automatically generated elements are retrieved

I have a loop that creates multiple divs with the class panel. @for(comment <- event.getCommentsSorted()) { However, when I try to manipulate each of these divs using jQuery's .each, only the first two divs are selected. $(window).on('load& ...

jqueryhtmlcssplayframework

What is the best way to update a canvas chart when the side menu is hidden?

I am facing an issue with the layout of my webpage, which includes a left side menu and a canvas chart. The left side menu occupies the first 155 pixels of the width, leaving the rest for the canvas chart set to a width of 100%. However, when I close the ...

javascripthtmlcanvas