Member Avatar for efth

This is the css of a navigation bar I've made:

header{
    width: 85%;
    display: block;
    margin-left: auto;
    margin-right: auto;}

#nav{
    width: 100%;
    float: left;
    margin: 0 0 3em 0;
    padding: 0;
    list-style: none;
    background-color: #6E6E6E;
    border-radius: 10px;
    border-bottom-right-radius: 50px;
    border-top-left-radius: 50px;}
#nav li{
    display: inline;
    float: left;
    position: relative;}
#nav li a:link, #nav li a:visited{
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    color: #FFF;
    border-right: 2px solid #FFF;
    font-family: sans-serif;
    font-size: 2.5em;}
#nav li a:hover, #nav li a:active{
    background-color: #454545;}
#nav_edge:hover, #nav_left:active{
    background-color: #454545;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 50px;}
#nav li ul{
    position: absolute;
    left: -9999px;
    white-space: nowrap;
    list-style: none;}
#nav li ul li a:link, #nav li ul li a:visited{
    background-color: #6E6E6E;
    border-top: 2px solid #FFF;}
#nav li ul li a:hover{
    background-color: #454545;}
#nav li:hover ul{
    left: 0em;
    margin-left: -40px;}

How would I go about having a menu "pop up" left of the previously dropped menu when I hover over "about the product"?
Here's the header of the html:

    <header>
        <ul id="nav">
            <li><a id="nav_edge" href="#">Home</a></li>
            <li>
                <a href="#">About</a>
                <ul>
                    <li><a href="#">About us</a></li>
                    <li><a href="#">About the product</a></li>
                </ul>
            </li>
            <li><a href="#">Products</a></li>
            <li>
                <a href="#">Contact</a>
                <ul>
                    <li><a href="mailto:html@troll.com">Email</a></li>
                </ul>
            </li>
            <li><a href="#">Store</a></li>
        </ul>
    </header>
  • 2 Contributors
  • 1 Reply
  • 235 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by JorgeM

Dani AI

Generated

A straightforward way to make a submenu appear to the left of the already-dropped menu is to treat the sub-submenu as an absolutely positioned element anchored to its parent list item, and position it with right: 100% (and left: auto) so it grows leftward. The existing first-level submenu can remain unchanged; add the nested <ul> inside the "About the product" <li> and use rules scoped to the nested level so the behavior is predictable. ’s current hover-show approach will still work once the nested rules are added. ’s multi-level suggestion is a good reference for broader patterns.

/* make the nested li a positioning context */
#nav li li { position: relative; }

/* sub-submenu: align to the left of its parent submenu */
#nav li li > ul {
  position: absolute;
  top: 0;
  right: 100%;
  left: auto;
  white-space: nowrap;
  display: none;   /* hidden until shown */
  z-index: 50;
}

/* reveal when the parent li is hovered or focused (keyboard users) */
#nav li li:hover > ul,
#nav li li:focus-within > ul {
  display: block;
}

Troubleshooting notes: adjust top or add a small margin-top to vertically align the submenu with its parent item; increase z-index if the submenu appears beneath other elements; use :focus-within to improve keyboard accessibility and add simple ARIA attributes if needed. If the menu is near the left edge of the viewport, an element-opening-left will go offscreen — flip direction by toggling a class on that branch (or use a small script to detect space and add a opens-right class). Finally, avoid tiny gaps between parent and child hover areas (use contiguous padding or a small overlap) to prevent flicker when moving the pointer from parent into the sub-submenu.

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.