How to put a
  • over an

    • Tags: html,css,menu,hover,html-lists

      Problem :

      I'm learning to make a vertical menu using only css (I must say most of this code was copied from google).

      When I put mouse over list1, items display in the back, and LargeNameList2 is over items of list1(since "LongNameList2" has a longer name) . So what i need are 1 of 2 things(or both if possible):

      -How to "bring to front" list items?, so they display over LargeNameList2.

      -How to make the other lists that are below(list 2 and 3) go down when I put mouse over list1?(and list3 when I mouseover list2)?

      Code HTML:

      <head runat="server">
          <title></title>
      
          <style type="text/css">     
      
              #nav{
                  list-style:none;
                  font-weight:bold;
                  margin-bottom:10px;   
                  float:left;
                  width:100%;    
              }
              #nav li{               
                  margin-right:10px;
                  position:relative;
              }
              #nav a{
                  /*display:block;*/
                  padding:5px;
                  color:#fff;
                  background:#333;
                  text-decoration:none;
              }
              #nav a:hover{
                  color:#fff;
                  background:#6b0c36;
                  text-decoration:underline;
              }
      
             /*--- DROPDOWN ---*/
              #nav ul{
                  background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
                  background:rgba(255,255,255,0);/* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
                  list-style:none;
                  position:absolute;
                  left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
              }
              #nav ul li{
                  padding-top:5px; 
                  float:none;
              }
              #nav ul a{
                  white-space:nowrap; 
              }
              #nav li:hover ul{ 
                  left:0;
              }
              #nav li:hover a{ 
                  background:#6b0c36;
                  text-decoration:underline;
              }
              #nav li:hover ul a{ 
                  text-decoration:none;
              }
              #nav li:hover ul li a:hover{ 
                  background:#333;
              }
      
          </style>        
      
      </head>
      
      <body>
      
          <ul id="nav">
      
          <li>
              <a href="#">List1›</a>
              <ul style="margin-left: 25px">
                  <li><a href="#">Item1</a></li>            
                  <li><a href="#">Item2</a></li>
                  <li><a href="#">Item3</a></li>
              </ul>
          </li>
          <br />
          <br />
          <li >    
              <a href="#">LongNameList2›</a>
      
              <ul style="margin-left: 25px">
                  <li><a href="#">Item1</a></li>
                  <li><a href="#">Item2</a></li>
                  <li><a href="#">Item3</a></li>
              </ul>
      
          </li>
          <br />
          <br />
          <li>    
              <a href="#">List3›</a>
              <ul style="margin-left: 25px">
                 <li><a href="#">Item1</a></li>
                  <li><a href="#">Item2</a></li>
                  <li><a href="#">Item3</a></li>
              </ul>
          </li>
      
      </ul>
      
      </body>
      


      Solution :

      You should add position:relative and z-index: 101 to your ul to make both of those things happen:

      #nav li:hover ul{ 
        left:0;
        position: relative;
        z-index: 101;
      }
      

      Here is a fiddle: http://jsfiddle.net/pj9Gd/


        CSS Howto..

        How to add shadow 'wings' to a centered content div

        How do I use CSS transitions to fixed position a scaled element?

        How can I restrict this CSS container to only containing the div its declared in?

        How to debug CSS in Android native browser?

        How do I style the scrollbar of a textarea

        How to space the children of a div with css?

        how jquery access dynamic css :before and apply filter:brightness [closed]

        Css flex-box - How to align a single item to the bottom while keeping the other items to the top

        How to make this CSS compatible with IE browsers? [closed]

        How do horizontally align text next to an image with CSS

        Icon with overhead label - how to get both to respond to hover, with CSS?

        How to modify one element of a class without bothering the rest with the same CSS class?

        how to indent html output using CSS

        How to change Kendo Excel Button Content Text

        How center an absolute element (img) that's wider than its parent div?

        How to scroll right and left by mouse scroll button

        How i can set the height of black overlay in css that all other things goes hidden?

        How to apply SVG so that it works in IE background image

        How to correctly align left in CSS?

        How do I change the MVC Bootstrap layout to have more than one columns

        How to make jquery click() work with css button?

        How to reset a slideshow after the last picture is shown

        How do I set the table row heights to minimum except last row?

        CSS Animation: how to trigger the reverse animation?

        How to make last element in a series of wrapped inline-block elements fill the available horizontal space?

        How to programmatically ungroup CSS selectors?

        css/html how to make logo appear after heading

        How to use css control to focus on div background when href link clicked

        How to equal height of