Я хочу знать, смогу ли я заставить продукт ul-класса исчезать, пока мышь не наведет курсор на кнопку продукта? Кроме того, я хочу, чтобы productnav ul ушел в сторону, как обычное меню.

HTML:

  <a href="index.html">Home</a>
  <a href="#">Products</a>
      
         <a href="#">Products Overview</a>
         <a href="#">Unibook Enterprise</a>
         <a href="#">Unibook Standard</a>
         <a href="#">Univoice 2.0</a>
         <a href="#">Univoice lite</a>
         <a href="#">Pricing</a>
         <a href="#">Demo</a>
      
  <a href="#">Solutions</a>
  <a href="#">Markets</a>
  <a href="#">About UDI</a>
  <a href="#">Contact Us</a>

Игнорировать любые отсутствующие теги / div и тому подобное

CSS:

ul.nav {
    margin-top: 10px;
    margin-left: 2px;
    list-style: none; /* this removes the list marker */
    border-top: 1px solid #FFF; /* this creates the top border for the links - all         others are placed using a bottom border on the LI */
    margin-bottom: 15px; /* this creates the space between the navigation on the     content below */
}
ul.nav li {
    border-bottom: 1px solid #FFF; /* this creates the button separation */
}
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links    retain their button look even after being visited */
    padding: 5px 5px 5px 15px;
    display: block; /* this gives the link block properties causing it to fill the   whole LI containing it. This causes the entire area to react to a mouse click. */
    width: 160px;  /*this width makes the entire button clickable for IE6. If you don't   need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
    text-decoration: none;
    background-color: #CFCFCF;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and   text color for both mouse and keyboard navigators */
    background-color: #1075C7;
    color: #FFF;
}

/*-----------------------------*/

ul.productnav {
    margin-top: 10px;
    margin-left: 2px;
    list-style: none; /* this removes the list marker */
    border-top: 1px solid #FFF; /* this creates the top border for the links - all     others are placed using a bottom border on the LI */
    margin-bottom: 15px; /* this creates the space between the navigation on the   content below */
}
ul.productnav li {
    border-bottom: 1px solid #FFF; /* this creates the button separation */
}
ul.productnav a, ul.productnav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
    padding: 5px 5px 5px 15px;
    display: block; /* this gives the link block properties causing it to fill the   whole LI containing it. This causes the entire area to react to a mouse click. */
    width: 160px;  /*this width makes the entire button clickable for IE6. If you don't   need to support IE6, it can be removed. Calculate the proper width by subtracting the   padding on this link from the width of your sidebar container. */
    text-decoration: none;
    background-color: #CFCFCF;
}
ul.productnav a:hover, ul.productnav a:active, ul.productnav a:focus { /* this changes   the background and text color for both mouse and keyboard navigators */
    background-color: #1075C7;
    color: #FFF;
}

И помните: я хочу, чтобы происходила основная вещь подменю; При наведении курсора на продукт, вы увидите .productnav ul рядом с обычным материалом. Спасибо!