Member Avatar for andi-dev 
here is the HTML 
<body style="margin:80px;padding:10px;">
<div id="Stage" class="EDGE-10822169">
<div id="wrapper">
<div id="navMenu">

<ul>
<li><a href="">IL Brand</a>-
<ul>
<li><a href="">il nuovo marchio</a></li>
<li><a href="">il nuovo marchio</a></li>
<li><a href="">il nuovo marchio</a></li>
<li><a href="">il nuovo marchio</a></li>
<li><a href="">il nuovo marchio</a></li>
<li><a href="">il nuovo marchio</a></li>
</ul><!--ul mrena -->

</li><!--fundi i LI -->

</ul><!--fundi i UL -->

<ul>
<li><a href="">IL Brand</a>
<ul>
<li><a href="">il nuovo marchio</a></li>
<li><a href="">il nuovo marchio</a></li>
<li><a href="">il nuovo marchio</a></li>
<li><a href="">il nuovo marchio</a></li>
<li><a href="">il nuovo marchio</a></li>
<li><a href="">il nuovo marchio</a></li>
</ul><!--ul mrena -->

</li><!--fundi i LI -->

</ul><!--fundi i UL -->
<ul>
<li><a href="">IL Brand</a>
<ul>
<li><a href="">il nuovo marchio</a></li>
<li><a href="">il nuovo marchio</a></li>
<li><a href="">il nuovo marchio</a></li>
<li><a href="">il nuovo marchio</a></li>
<li><a href="">il nuovo marchio</a></li>
<li><a href="">il nuovo marchio</a></li>
</ul><!--ul mrena -->

</li><!--fundi i LI -->

</ul><!--fundi i UL -->
<ul>
<li><a href="">IL Brand</a>
<ul>
<li><a href="">il nuovo marchio</a></li>
<li><a href="">il nuovo marchio</a></li>
<li><a href="">il nuovo marchio</a></li>
<li><a href="">il nuovo marchio</a></li>
<li><a href="">il nuovo marchio</a></li>
<li><a href="">il nuovo marchio</a></li>
</ul><!--ul mrena -->

</li><!--fundi i LI -->

</ul><!--fundi i UL -->
<ul>
<li><a href="">IL Brand</a>
<ul>
<li><a href="">il nuovo marchio</a></li>
<li><a href="">il nuovo marchio</a></li>
<li><a href="">il nuovo marchio</a></li>
<li><a href="">il nuovo marchio</a></li>
<li><a href="">il nuovo marchio</a></li>
<li><a href="">il nuovo marchio</a></li>
</ul><!--ul mrena -->

</li><!--fundi i LI -->

</ul><!--fundi i UL -->
<ul>
<li><a href="">IL Brand</a>
<ul>
<li><a href="">il nuovo marchio</a></li>
<li><a href="">il nuovo marchio</a></li>
<li><a href="">il nuovo marchio</a></li>
<li><a href="">il nuovo marchio</a></li>
<li><a href="">il nuovo marchio</a></li>
<li><a href="">il nuovo marchio</a></li>
</ul><!--ul mrena -->

</li><!--fundi i LI -->

</ul><!--fundi i UL -->

</div><!--fundi i navMenu -->


</div><!--fundi i wrapper -->

</div>
</body>


here is the CSS

@charset "utf-8";
#navMenu {
margin:0;
padding:0;
}
#navMenu ul {

margin:0;
padding:0;
line-height:30px;

}

#navMenu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
}

#navMenu ul li a{
    text-align: center;
    font-family: "Comic Sans MS", cursive;
    text-decoration: none;
    height: 30px;
    width: 150px;
    display: block;
    color: rgba(27,27,27,1);


}

#navMenu ul ul{
position:absolute;
visibility:hidden;
top:30px;

}
#navMenu ul li :hover ul{
    visibility: visible;


}
  • 3 Contributors
  • 7 Replies
  • 206 Views
  • 14 Hours Discussion Span
  • Latest Post Latest Post by andi-dev

Dani AI

Generated

Quick diagnosis and summary of what happened: correctly spotted the CSS selector bug — the hover rule needed to target the LI itself (so the hover actually applies). That explains why hover sometimes failed. The remaining problem (dropdowns appearing behind the slideshow) is a separate stacking/clipping issue; ’s temporary fix of adding a z-index made the submenu render above the stage, but a more robust approach avoids brittle, per-hover fixes.

Why this happens and how to confirm it: z-index only matters inside a stacking context. Certain CSS (position + z-index, transform, opacity less than 1, filters, will-change, etc.) creates a new stacking context so elements can’t escape it. Also, ancestor elements with overflow: hidden will clip absolutely positioned children. To debug: open DevTools, expand the submenu while visible, check the computed z-index, then walk up the DOM tree looking for transform / non-auto z-index / overflow values — those are the likely offenders. Disable them temporarily to see if the menu appears.

Robust fixes and best practice (apply permanently rather than only on :hover):

  • Give the nav a positioned stacking context above the slideshow, and give the submenu a higher z-index than the slideshow.
  • Make sure any wrapper around the slideshow does not use transform or has a lower z-index; if you can’t change it, move the submenu out of that wrapper (append to body) and position it with JS.
  • Ensure parent containers don’t use overflow: hidden where the submenu needs to extend.

Example (replace class names to match your HTML):

/* keep navigation above the stage */
.main-nav { position: relative; z-index: 200; }

/* dropdowns */
.main-nav .dropdown { position: absolute; z-index: 300; }

/* make sure slideshow/stage is lower */
.edge-stage { position: relative; z-index: 100; /* or remove transform if present */ }

Final notes: prefer a small, consistent z-index scale (avoid huge arbitrary numbers), set z-index on the nav/submenu permanently rather than only on hover, and test with DevTools across browsers. Also check touch behavior (hover won’t work on mobile), and if you want help pinpointing the exact element, post a live URL or the exported Edge stage files as requested.

Recommended Answers

All 7 Replies

Member Avatar for andi-dev

can someone give me some ideas how i can fix this error i have create the slideshow with adobe edge

Member Avatar for JorgeM

Can you provide the URL of where this web page is located...the code you provided is not enough to be able to determine what the problem is.

Member Avatar for andi-dev

the page is not upload,can yuo give me an email so i can upload the files of my staff

Member Avatar for pzuurveen

remove the space between li and :hover in the css

#navMenu ul li:hover ul{
Member Avatar for andi-dev

it work for the last dropdown not for all,

Member Avatar for andi-dev

any idea i can be with z-index and visibility but i dont know where to put this code

Member Avatar for andi-dev

i have FIX it thankyou any way you didnt help me so much ,i just set the z-index 2 in nav ul li:hover ul.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.