html - Making a dropdown menu visible only on hover -

I'm searching the Internet on this question on the stack overflow, my problem is not understandable in some way.

I am trying to create a "primary" menu with no links.

Items in the menu, I would like to create a drop down menu while hovering or clicking on the menu.

I want to do it with CSS only.

I'm confused. I have tried different configurations with z-index, positioning and visibility. However, I am finding it difficult to achieve the result I have also tried to link to the external list.

This is my code:

HTML:

  & lt; Ul & gt; & Lt; Li & gt; Name 1 & lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "a.html" title = "A" & gt; Ententer & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "b.html" headline = "b" & gt; B & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "c.html" title = "c" & gt; Cat & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "d.html" headline = "d" & gt; Dogs & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; Li & gt; Name 2 & lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "e.html" title = "e" & gt; Eggs & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "f.html" headline = "F" & gt; Fern & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "g.html" title = "live" & gt; Swan & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "h.html" title = "h" & gt; Home & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; / Ul & gt;   
 CSS:  
  ul {list-style-type: none; Margin: 0; Padding: 0; } Li {Float: left; Padding: 30px 15px 20px 15px; Border-right: dotted #fffff1px; Color: #FFFFFF; Font-size: 11px; Status: Relative; Z-index: 3; } Li.end {float: right; } A {display: block; Text-decoration: None; } A: link {color: #FFFFFF; } A: visited {color: #FFFFFF; } A: Hover {Color: # 0099 FF; } A: active {color: #FFFFFF; Overflow: visible; } Ul li: active ul, ul ul (visibility: visible; } Ul li: active ul, ul ul li (visibility: visible; } UL Lee: Hover ul, ul ul (Visibility: visible; } Ul li: Hover ul, ul ul li (visibility: visible; } Ul ul {list-style-type: none; Margin: 0; Status: Completed; Visibility: hidden; Z-index: -1; } Ul ul li (float: left; Padding: 5px 10px; Border-right: dotted # 0000ff 1px; Background color: # 000000; Color: #FFFFFF; Font-size: 11px; Status: Relative; Visibility: hidden; } Ul ul li a {display: block; Text-decoration: None; } Ul li li a: link {color: # 0000FF; } Ul ul li a: visited {color: # 0000FF; } Ul ul li a: hover {color: #fffff; Visibility: visible; } Ul ul li a: Active {color: #FFFFFF; Overflow: visible; Visibility: visible; }    
 
 
 See this example  
 I think you have Highly  css  code