Within my HTML, I have two div elements. The first div is filled with Menu items represented by li elements, while the second div contains submenus. My desired functionality involves displaying the submenu when hovering over a menu item's li element using CSS.
li:hover{
//Display Submenu
}
https://jsfiddle.net/yv6pyk7a/
.secondDiv:hover {
display:block;
}
.secondDiv > li:hover {
background: #aaa;
cursor: pointer;
}
Feel free to give this a try. I believe it might offer a solution to the issue at hand.
Feel free to visit the link provided below.
.FirstDiv:hover + .secondDiv {
display:block;
}
Check out this code snippet on JSFiddle
.FirstDiv:hover + .secondDiv {
display:block;
}
.secondDiv:hover {
display:block;
}
.FirstDiv{
float:left;
height: 200px;
overflow-y:scroll;
border: 1px solid;
width:500px;
position:relative;
}
.secondDiv{
float:left;
border: 1px solid;
height: 200px;
width:200px;
background: #FF2200;
display:none;
position:absolute;
left:100px;
top:10px;
}
li{
height:30px;
color:#FFF;
background-color: #000;
}
.menu:hover .secondDiv,
.menu:hover ~ .secondDiv {
display:block;
}<div class="navigation">
<div class="FirstDiv">
<ul>
<li class="menu"> Menu 1
<div class="secondDiv">
Second Div 1 <br/>
Sub menus
</div>
</li>
<li class="menu"> Menu 2
<div class="secondDiv">
Second Div 2<br/>
Sub menus
</div>
</li>
<li class="menu"> Menu 3
<div class="secondDiv">
Second Div 3 <br/>
Sub menus
</div>
</li>
<li class="menu"> Menu 4
<div class="secondDiv">
Second Div 4<br/>
Sub menus
</div>
</li>
</ul>
</div>
<d
</div>I am facing an issue with the functionality of two dropdown menus. The options in the second dropdown are supposed to be shown based on the selection made in the first dropdown. While this feature works perfectly in Chrome, it seems to be malfunctioning i ...
https://i.sstatic.net/9YIiy.jpg I have been working on creating the top right triangle design shown in the image. However, I encountered an issue where applying border radius seems to affect all sides instead of just one as intended. Despite using border- ...
In an attempt to remove the color from the column border following a click on the image, I am struggling to locate the specific code segment that needs adjustment. I have scrolled through the entire code and experimented with color changes without succes ...
Is there a method to relocate buttons using Bootstrap 5 in HTML or CSS when the browser is resized? For instance, if the button is centered on a full-screen browser, but I want it at the bottom when resized. Is this achievable? ...
My issue involves a wide table in the Grid component with a width of 16 on mobile resulting in strange behavior. If you view my work in progress at the following URL, you'll notice that every component is responsive on mobile except for the stretched ...
I am currently working with Bootstrap and facing an issue where I am trying to change the button color, but after clicking it and moving the mouse away, the color reverts back to blue. Here is the color I initially selected: https://i.sstatic.net/DCMq5.p ...
Is there a way to display a table that scrolls both horizontally and vertically, with the header moving horizontally but not vertically while the body moves in both directions? I have been able to shift the position of the columns, however, I am struggling ...
Test Links. Utilizing Bootstrap classes, adjust the div element with the ID "links" to display differently based on screen resolutions. On extra small screens (<576px), each link and ad should occupy one whole row. It will have this appearance: https:// ...
What is the best approach to ensure that these styles are responsive on any mobile device? nav ul ul { display: none; } nav ul li:hover > ul { display: block; } nav ul { background: #0066cc; background: linear-gradient(top, #0066cc 0%, #bbbbbb 10 ...
I am facing an issue with the variable height of my div, causing it to position incorrectly. To demonstrate the problem, I have included a code snippet below. Here is the solution I am seeking: https://i.sstatic.net/XMAMr.png Note: Since the div has a ...
I need help creating a basic CSS percentage bar. To get started, visit and paste the following code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://w ...
I'm facing challenges in integrating both of these elements into the same project. When I activate overflow: scroll, my jQuery function does not work as expected. However, if I deactivate it, then the jQuery works but the scroll-snap feature does not ...
Incorporating Material UI TextField and Material UI Tab, I have encountered an issue. There are two tabs, each containing a text field. Upon clicking on the TextField, the label's border is supposed to open, but this behavior only occurs if the curren ...
I am trying to select a checkbox from an HTML table with multiple columns. Specifically, I want to choose the checkbox that corresponds to the "CLEAN_AUDIT" option for the Name column. However, my current XPATH is selecting 4 checkboxes labeled CLEAN_AUDIT ...
Parent element is a div with a width of 300px and a height of 40px, containing a child input. In the following code snippet: myinput = document.getElementById("e2"); myinput.style.cssText ='width:100%;height:100%;padding:0px;margin:0px;' div{ ...
Can someone please help me with the following code issue? I am encountering an error related to the script tag when running it in ReactJS, although it works fine in a simple HTML file. Upon starting npm, an error is displayed pointing to line number which ...
Is there a way for me to include 'lang="en"' at the end of my opening html tag without manually writing it in? Unfortunately, I don't have direct access to edit the code (ecommerce package), but I want to indicate the site language somehow. ...
Can a margin be defined for a text area? My WYSIWYG editor wraps my text within <div> tags instead of using line breaks <br /> So I was thinking of adding a margin to the <div> tag? Is this possible in CSS? If so, how can it be done? ...
I am looking to align text in the same way shown in this image from Libre Office. Libra Office: https://i.sstatic.net/1dvVx.png This is how the webpage appears: https://i.sstatic.net/JnFSP.png Is there a way to make the webpage resemble the formatting i ...
Is there a way to adjust the timing for the appearance of the add-to-cart when hovering over the product-list-item? Currently, it appears when I hover over the item and disappears when I move my mouse away. .product-list-item { position: relative; w ...