Dropdown menu isn't working

Question

I'm doing a Menu where it has four dropdown buttons that aren't working. The following image shows how it is supposed to work: "Bijutaria=(perfumes+fios)"
"Inserir=(Perfumes=homem+mulher)+Bijutaria=fios+pulseiras)"

I think the problem is located in my CSS code, but I'm not being able to figure out what the problem is.

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 150px;
}
ul li {
  position: relative;
}
li ul {
  position: absolute;
  left: 120px;
  top: 0;
  display: none;
}
ul li a {
  display: block;
  text-decoration: none;
  color: #E2144A;
  background: #fff;
  padding: 5px;
  border: 1px solid #ccc;
}
li:hover ul {
  display: block;
}

<ul id="left" class='column'>
  <li><a href="ver.php">Home</a></li>
  <li><a href="#">Bijutaria</a></li>
  <ul>
    <li><a href="pulseiras.php">Pulseiras</a>  </li>
    <li><a href="fios.php">Fios</a>  </li>
  </ul>
  <li><a href="#">Perfumes</a> 
    <ul>
      <li><a href="prfh.php">Homem</a></li>
      <li><a href="prfm.php">Mulher</a></li>
    </ul>
    <li><a href="#">Inserir</a></li>
    <ul>
      <li><a href="#">Perfumes</a></li>
      <ul>
        <li><a href="insrph.php">Homem</a></li>
        <li><a href="insrpm.php">Mulher</a></li>
      </ul>
      <li><a href="#">Bijutaria</a></li>
      <ul>
        <li><a href="insrp.php">Pulseiras</a></li>
        <li><a href="insrf.php">Fios</a></li>
      </ul>
    </ul>
  </li>
</ul>

Answer 1

Here your code that I fixed, you should always have an UL around LI and not pu UL inside UL or LI inside LI

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 150px;
}
ul li {
  position: relative;
}
li ul {
  position: absolute;
  left: 100%;
  top: 0;
  display: none;
}
ul li a {
  display: block;
  text-decoration: none;
  color: #E2144A;
  background: #fff;
  padding: 5px;
  border: 1px solid #ccc;
}
li:hover > ul {
  display: block;
  z-index:2;
}

<ul id="left" class='column'>
  <li><a href="ver.php">Home</a></li>
  <li><a href="#">Bijutaria</a>
    <ul>
      <li><a href="pulseiras.php">Pulseiras</a>  </li>
      <li><a href="fios.php">Fios</a>  </li>
    </ul>
  </li>
  <li><a href="#">Perfumes</a> 
    <ul>
      <li><a href="prfh.php">Homem</a></li>
      <li><a href="prfm.php">Mulher</a></li>
    </ul>
  </li>   
  <li><a href="#">Inserir</a>
    <ul>
      <li><a href="#">Perfumes</a>
        <ul>
          <li><a href="insrph.php">Homem</a></li>
          <li><a href="insrpm.php">Mulher</a></li>
        </ul>
      </li>
      <li><a href="#">Bijutaria</a>
        <ul>
          <li><a href="insrp.php">Pulseiras</a></li>
          <li><a href="insrf.php">Fios</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Answer 2

I modified your HTML so it was valid. I then rewrote your CSS, adding the absolute basics to do what you're looking for with flyouts:

Here's a functioning JSFiddle: https://jsfiddle.net/La068t6d/1/

HTML:

<ul id="left" class='column'>

    <li><a href="ver.php">Home</a></li>
    <li><a href="#">Bijutaria</a>
        <ul>
            <li><a href="pulseiras.php">Pulseiras</a></li>
            <li><a href="fios.php">Fios</a></li>
        </ul>
    </li>

    <li><a href="#">Perfumes</a> 
        <ul>
            <li><a href="prfh.php">Homem</a></li>
            <li><a href="prfm.php">Mulher</a></li>
        </ul>
    </li>

    <li><a href="#">Inserir</a>
        <ul>
            <li><a href="#">Perfumes</a>
                <ul>
                    <li><a href="insrph.php">Homem</a></li>
                    <li><a href="insrpm.php">Mulher</a></li>
                </ul>
            </li>
            <li><a href="#">Bijutaria</a>
                <ul>
                    <li><a href="insrp.php">Pulseiras</a></li>
                    <li><a href="insrf.php">Fios</a></li>
                </ul>
            </li>
        </ul>
    </li>

</ul>

CSS:

ul { list-style-type: none; }
ul,li {
    margin: 0; padding: 0;
}
li {
    position: relative;
    display: block;

    }
    a {
        padding: 5px 8px;
        display: block;
        text-decoration: none;
        border: 1px solid #ccc;
        background-color: #fff;
    }



#left {
    width: 150px;
}
#left > li ul {
    position: absolute;
    top: 0;
    left: 100%;
    display: none;
    }
    #left li:hover > ul {
        display: block;
    }

Answer 3

try this

#primary_nav_wrap
{
	margin-top:15px
}

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

#primary_nav_wrap ul a
{
	display:block;
	color:#333;
	text-decoration:none;
	font-weight:700;
	font-size:12px;
	line-height:32px;
	padding:0 15px;
	font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}

#primary_nav_wrap ul li
{
	position:relative;
	float:left;
	margin:0;
	padding:0
}

#primary_nav_wrap ul li.current-menu-item
{
	background:#ddd
}

#primary_nav_wrap ul li:hover
{
	background:#f6f6f6
}

#primary_nav_wrap ul ul
{
	display:none;
	position:absolute;
	top:100%;
	left:0;
	background:#fff;
	padding:0
}

#primary_nav_wrap ul ul li
{
	float:none;
	width:200px
}

#primary_nav_wrap ul ul a
{
	line-height:120%;
	padding:10px 15px
}

#primary_nav_wrap ul ul ul
{
	top:0;
	left:100%
}

#primary_nav_wrap ul li:hover > ul
{
	display:block
}

<h1>Simple Pure CSS Drop Down Menu</h1>
<nav id="primary_nav_wrap">
<ul >
  <li><a href="ver.php">Home</a></li>
  <li><a href="#">Bijutaria</a>
  <ul>
    <li><a href="pulseiras.php">Pulseiras</a>  </li>
    <li><a href="fios.php">Fios</a>  </li>
  </ul>
    </li>
  <li><a href="#">Perfumes</a> 
    <ul>
      <li><a href="prfh.php">Homem</a></li>
      <li><a href="prfm.php">Mulher</a></li>
    </ul>
    <li><a href="#">Inserir</a>
    <ul>
      <li><a href="#">Perfumes</a>
      <ul>
        <li><a href="insrph.php">Homem</a></li>
        <li><a href="insrpm.php">Mulher</a></li>
      </ul>
        </li>
      <li><a href="#">Bijutaria</a>
      <ul>
        <li><a href="insrp.php">Pulseiras</a></li>
        <li><a href="insrf.php">Fios</a></li>
      </ul>
        </li>
    </ul>
  </li>
</ul>