Hey there, newbie here looking to learn some new things. I ran into an issue where only the first child of the menu shows up when hovering over the parent element. Can anyone help me out with this problem? Please ignore the css for now. Any assistance would be greatly appreciated.
Here's the link to the Sample code
Thank you!
Alternatively, you can utilize the following code snippet:
$('#multimenu a').hover(function(){
$(this).next().show();
},function(){
$(this).next().hide();
});
To see it in action, check out the demo here: http://jsfiddle.net/s6EXf/5/
Make sure to update your HTML structure as follows:
<ul id="multimenu">
<li><a href="#">Example 1</a><div class="submenu"></div></li>
<li><a href="#">Example 2</a><div class="submenu"></div></li>
<li><a href="#">Example 3</a><div class="submenu"></div></li>
<li><a href="#">Example 4</a><div class="submenu"></div></li>
<li><a href="#">Example 5</a><div class="submenu"></div></li>
</ul>
Furthermore, by using CSS pseudo class :first-child, you can eliminate the need for the first child class.
Each li element should have a unique identifier, not all using the same id. Id's should only be used once per page as they are meant to be unique.
To fix this issue, I changed all ids to classes and now it is working correctly. You can see an example below.
To avoid having multiple controls with the same id, it is recommended to use names instead. As a result, I made the following changes:
$('li[name=multimenu]').hover(function() {
$(this).children('.submenu').show();
}, function() {
$(this).children('.submenu').hide();
});
View the live demonstration here.
Try this out:
$('ul #multimenu').on('mouseover', function(){
});
It's worth noting that assigning the same id to multiple li elements is not recommended, as ids should be unique.
$('.multimenu').hover(function(){
$(this).children('.submenu').show();
}, function(){
$(this).children('.submenu').hide();
});
attempt this
Html:
<ul>
<li><a href="#">Sample 1</a>
<div class="submenu">
<div>aaaa<div>
<div>bbbb<div>
<div>cccc<div>
</div>
</li>
<li><a href="#">Sample 2</a>
<div class="submenu">
<div>1111<div>
<div>2222<div>
<div>3333<div>
</div>
</li>
<li><a href="#">Sample 3</a>
<div class="submenu">
<div>xxxx<div>
<div>yyyy<div>
<div>zzzz<div>
</div>
</li>
<li><a href="#">Sample 4</a>
<div class="submenu">
<div>4444<div>
<div>5555<div>
<div>6666<div>
</div>
</li>
</ul>
CSS:
ul li {
float:left;
margin-left:1em;
}
.submenu {
position:absolute;
display:none;
width:105px;
height:150px;
-webkit-border-radius: 0px 0px 10px 10px;
border-radius: 0px 0px 10px 10px;
background:#ccc;
z-index:123;
}
Jquery:
$('li').hover(function() {
$(this).children('.submenu').show();
}, function() {
$(this).children('.submenu').hide();
});
Check out the demo here:
http://jsfiddle.net/naresh3591/4H5BE/4/
Is there a way to apply shadows to SVG images, like a triangle? I've tried using polyfill solutions but they didn't give me the desired effect. Check out this JSFiddle where I showcase what I'm trying to achieve. This is my HTML: <div c ...
I am currently working on an MVC application that utilizes PagedList for paging. One of the requirements is to have a checkbox in the first column and allow users to select rows and have those selections preserved throughout the paging process. For examp ...
Exploring the capabilities of Socialite.js for the first time has been quite intriguing. This JavaScript plugin allows loading social media plugins after page load, adding an interesting dynamic to website interactivity. However, I am faced with the challe ...
I'm new to incorporating Jquery into my website and I'm facing an issue with getting the first row of pictures to fade in (upwards) when scrolling. Despite my efforts, they are not behaving as expected. Any guidance on how to resolve this? HTML: ...
Whenever a button is pressed, a row in a table duplicates itself. Here is a snippet of the code: <tr> <td valign="top"><input type="text" name="session[]" size="15"></td> <td valign="top"><textarea name="descr[]" cols="40" ...
function filterFields(classname, value, chkClass) { var checkedfields = []; $.each($("."+classname+" option:selected"), function(){ checkedfields.push($(this).val()); }); $('#'+chkClass+'Filters').val(ch ...
Check out this snippet of my HTML: <td> <a class="button" href="#"> <input id="download">...</input> </a> <a class="button" href="#"> <input id="downloadcsv">...</input> </a> </td> I am ...
I am experiencing an issue with the placement of an image in my HTML code. When I place the image inside the nav element, it works perfectly fine. However, when I try to put it inside the body or header elements, it doesn't display properly. I am new ...
I'm currently working on a project that involves displaying cards in the following layout: https://i.stack.imgur.com/VGbNr.png My goal is to have the ability to click 'See More' and display the cards like this: https://i.stack.imgur.com/j8b ...
Currently, I am working on a Sharepoint Web Part mockup in this fiddle. As shown below, the second form is not yet formatted or aligned properly: Additionally, there are issues with the alignment of the second form, which appears a row below where it shou ...
I am trying to apply a class called 'select' when I click on a paragraph tag. However, the code I have written doesn't seem to be working. Can someone please provide some suggestions? Here is the code: <style type="text/css"> #el ...
I need to implement a feature where clicking a link opens a modal in a new tab and redirects the current page to a different link, similar to how retailmenot handles coupons. Here is the code snippet I am currently working with: <div onClick="myFunctio ...
I am currently developing a custom element that displays playing cards using SVG images as the background. I want to make sure that the background image changes whenever the attributes related to the card's suit or rank are updated. From what I under ...
So here's the situation. I'm diving into creating a React Modal component that can seamlessly integrate with any vanilla HTML / JS file. By generating a bundle.js file using Webpack from my React component, it becomes easier to inject it into a d ...
Having some trouble updating a column ($_POST['dtf']) to a null value based on another column's value ($_POST['pid']). I've attempted various versions of the MySQL statement but haven't had any success. Trying to use AJAX ...
I'm attempting to create a scrolling effect where the text moves back and forth within its container. The current issue I'm facing is that the text goes beyond the width of the parent container before scrolling back. I want the text to smoothly s ...
I am facing an issue while attempting to delete using <li id='{$row['id']}'>. Although it successfully removes the item from the frontend, it fails to delete the record from the MySQL database. I am wondering if it is feasible to ...
When working with stylesheets, the majority of CSS rules follow a structured format: selector { property_1 : value_1; . . . property_n : value_n; } Each selector typically has only one {} block attached to it (without any sub {} blocks ...
As I work on creating my own homepage, I came across someone else's page that I really liked. I decided to download the page source and open it locally in my browser. However, I noticed that while the contents were all there, the style (frames, positi ...
Embarking on my inaugural project as a Python developer, I am currently in the process of web scraping a retail website. The challenge lies in the fact that the site features infinite scrolling functionality, although at times instead of triggering the inf ...