Olá, você poderá colocar isso em um widget, o jeito mais fácil de se fazer o menu é no css menu maker, e bem simples e sei que voce entenderá como fazer nele, nao vai ficar IGUAL aquele lá q tu mostrou, mas vái ficar bem parecido ou até melhor, entre nesse link:
http://cssmenumaker.com/builder/50416
ai vc edita ele ao seu gosto, ao fim, voce perceberá que ele criará um código html e um css (poderá visualizar os dois nos botões do lado do preview).

MONTANDO O CODE

Imagine q tu criou o menu inteiro, e o HTML ficou assim:

Código:

<div id='cssmenu'>
<ul>
  <li class='active '><a href='index.html'><span>Home</span></a></li>
  <li class='has-sub '><a href='#'><span>Products</span></a>
      <ul>
        <li class='has-sub '><a href='#'><span>Product 1</span></a>
            <ul>
              <li><a href='#'><span>Sub Item</span></a></li>
              <li><a href='#'><span>Sub Item</span></a></li>
            </ul>
        </li>
        <li class='has-sub '><a href='#'><span>Product 2</span></a>
            <ul>
              <li><a href='#'><span>Sub Item</span></a></li>
              <li><a href='#'><span>Sub Item</span></a></li>
            </ul>
        </li>
      </ul>
  </li>
  <li><a href='#'><span>About</span></a></li>
  <li><a href='#'><span>Contact</span></a></li>
</ul>
</div>

e o CSS:

Código:

/* Some stylesheet reset */
#cssmenu > ul {
   list-style: none;
   margin: 0;
   padding: 0;
   vertical-align: baseline;
   line-height: 1;
}

/* The container */
#cssmenu > ul {
   display: block;
   position: relative;
   width: 150px;
}

   /* The list elements which contain the links */
   #cssmenu > ul li {
      display: block;
      position: relative;
      margin: 0;
      padding: 0;
      width: 150px;   
   }

      /* General link styling */
      #cssmenu > ul li a {
         /* Layout */
         display: block;
         position: relative;
         margin: 0;
         border-top: 1px dotted #3a3a3a;
         border-bottom: 1px dotted #1b1b1b;
         padding: 11px 20px;
         width: 110px;

         /* Typography */
         font-family:  Helvetica, Arial, sans-serif;
         color: #d8d8d8;
         text-decoration: none;
         text-transform: uppercase;
         text-shadow: 0 1px 1px #000;
         font-size: 13px;
         font-weight: 300;

         /* Background & effects */
         background: #282828;
      }

      /* Rounded corners for the first link of the menu/submenus */
      #cssmenu > ul li:first-child>a {
         border-top-left-radius: 4px;
         border-top-right-radius: 4px;
         border-top: 0;
      }

      /* Rounded corners for the last link of the menu/submenus */
      #cssmenu > ul li:last-child>a {
         border-bottom-left-radius: 4px;
         border-bottom-right-radius: 4px;
         border-bottom: 0;
      }


      /* The hover state of the menu/submenu links */
      #cssmenu > ul li>a:hover, #cssmenu > ul li:hover>a {
         color: #3cc4e6;
         text-shadow: 0 1px 0 #fff;
         background: #e6e6e6;
         background: -webkit-linear-gradient(bottom, #e6e6e6, #fff);
         background: -ms-linear-gradient(bottom, #e6e6e6, #fff);
         background: -moz-linear-gradient(bottom, #e6e6e6, #fff);
         background: -o-linear-gradient(bottom, #e6e6e6, #fff);
         border-color: transparent;
      }

      /* The arrow indicating a submenu */
      #cssmenu > ul .has-sub>a::after {
         content: '';
         position: absolute;
         top: 16px;
         right: 10px;
         width: 0px;
         height: 0px;

         /* Creating the arrow using borders */
         border: 4px solid transparent;
         border-left: 4px solid #d8d8d8;
      }

      /* The same arrow, but with a darker color, to create the shadow effect */
      #cssmenu > ul .has-sub>a::before {
         content: '';
         position: absolute;
         top: 17px;
         right: 10px;
         width: 0px;
         height: 0px;

         /* Creating the arrow using borders */
         border: 4px solid transparent;
         border-left: 4px solid #000;
      }

      /* Changing the color of the arrow on hover */
      #cssmenu > ul li>a:hover::after, #cssmenu > ul li:hover>a::after {
         border-left: 4px solid #3cc4e6;
      }

      #cssmenu > ul li>a:hover::before, #cssmenu > ul li:hover>a::before {
         border-left: 4px solid #fff;
      }

   
      /* THE SUBMENUS */
      #cssmenu > ul ul {
         position: absolute;
         left: 150px;
         top: -9999px;
         padding-left: 5px;
         opacity: 0;
         /* The fade effect, created using an opacity transition */
         -webkit-transition: opacity .3s ease-in;
         -moz-transition: opacity .3s ease-in;
         -o-transition: opacity .3s ease-in;
         -ms-transition: opacity .3s ease-in;
      }

      /* Showing the submenu when the user is hovering the parent link */
      #cssmenu > ul li:hover>ul {
         top: 0px;
         opacity: 1;
      }

depois disso, você copia o HTML para um novo widget (nao marque "Utilizar um table type, mas se quiser....a escolha e sua) vá no fundo do html e add isso:

Código:


<head>
<style type="text/css">
<!--
COLE O CSS AQUI
-->
</style>
</head>


no lugar de "COLE O CSS AKI" você colcará o seu css, ficando assim:

Código:

<head>
<style type="text/css">
<!--
/* Some stylesheet reset */
#cssmenu > ul {
   list-style: none;
   margin: 0;
   padding: 0;
   vertical-align: baseline;
   line-height: 1;
}

/* The container */
#cssmenu > ul {
   display: block;
   position: relative;
   width: 150px;
}

   /* The list elements which contain the links */
   #cssmenu > ul li {
      display: block;
      position: relative;
      margin: 0;
      padding: 0;
      width: 150px;   
   }

      /* General link styling */
      #cssmenu > ul li a {
         /* Layout */
         display: block;
         position: relative;
         margin: 0;
         border-top: 1px dotted #3a3a3a;
         border-bottom: 1px dotted #1b1b1b;
         padding: 11px 20px;
         width: 110px;

         /* Typography */
         font-family:  Helvetica, Arial, sans-serif;
         color: #d8d8d8;
         text-decoration: none;
         text-transform: uppercase;
         text-shadow: 0 1px 1px #000;
         font-size: 13px;
         font-weight: 300;

         /* Background & effects */
         background: #282828;
      }

      /* Rounded corners for the first link of the menu/submenus */
      #cssmenu > ul li:first-child>a {
         border-top-left-radius: 4px;
         border-top-right-radius: 4px;
         border-top: 0;
      }

      /* Rounded corners for the last link of the menu/submenus */
      #cssmenu > ul li:last-child>a {
         border-bottom-left-radius: 4px;
         border-bottom-right-radius: 4px;
         border-bottom: 0;
      }


      /* The hover state of the menu/submenu links */
      #cssmenu > ul li>a:hover, #cssmenu > ul li:hover>a {
         color: #3cc4e6;
         text-shadow: 0 1px 0 #fff;
         background: #e6e6e6;
         background: -webkit-linear-gradient(bottom, #e6e6e6, #fff);
         background: -ms-linear-gradient(bottom, #e6e6e6, #fff);
         background: -moz-linear-gradient(bottom, #e6e6e6, #fff);
         background: -o-linear-gradient(bottom, #e6e6e6, #fff);
         border-color: transparent;
      }

      /* The arrow indicating a submenu */
      #cssmenu > ul .has-sub>a::after {
         content: '';
         position: absolute;
         top: 16px;
         right: 10px;
         width: 0px;
         height: 0px;

         /* Creating the arrow using borders */
         border: 4px solid transparent;
         border-left: 4px solid #d8d8d8;
      }

      /* The same arrow, but with a darker color, to create the shadow effect */
      #cssmenu > ul .has-sub>a::before {
         content: '';
         position: absolute;
         top: 17px;
         right: 10px;
         width: 0px;
         height: 0px;

         /* Creating the arrow using borders */
         border: 4px solid transparent;
         border-left: 4px solid #000;
      }

      /* Changing the color of the arrow on hover */
      #cssmenu > ul li>a:hover::after, #cssmenu > ul li:hover>a::after {
         border-left: 4px solid #3cc4e6;
      }

      #cssmenu > ul li>a:hover::before, #cssmenu > ul li:hover>a::before {
         border-left: 4px solid #fff;
      }

   
      /* THE SUBMENUS */
      #cssmenu > ul ul {
         position: absolute;
         left: 150px;
         top: -9999px;
         padding-left: 5px;
         opacity: 0;
         /* The fade effect, created using an opacity transition */
         -webkit-transition: opacity .3s ease-in;
         -moz-transition: opacity .3s ease-in;
         -o-transition: opacity .3s ease-in;
         -ms-transition: opacity .3s ease-in;
      }

      /* Showing the submenu when the user is hovering the parent link */
      #cssmenu > ul li:hover>ul {
         top: 0px;
         opacity: 1;
      }
-->
</style>
</head>


ficando o html e o css no widget só assim:

Código:

<div id='cssmenu'>
<ul>
  <li class='active '><a href='index.html'><span>Home</span></a></li>
  <li class='has-sub '><a href='#'><span>Products</span></a>
      <ul>
        <li class='has-sub '><a href='#'><span>Product 1</span></a>
            <ul>
              <li><a href='#'><span>Sub Item</span></a></li>
              <li><a href='#'><span>Sub Item</span></a></li>
            </ul>
        </li>
        <li class='has-sub '><a href='#'><span>Product 2</span></a>
            <ul>
              <li><a href='#'><span>Sub Item</span></a></li>
              <li><a href='#'><span>Sub Item</span></a></li>
            </ul>
        </li>
      </ul>
  </li>
  <li><a href='#'><span>About</span></a></li>
  <li><a href='#'><span>Contact</span></a></li>
</ul>
</div>
<head>
<style type="text/css">
<!--
/* Some stylesheet reset */
#cssmenu > ul {
   list-style: none;
   margin: 0;
   padding: 0;
   vertical-align: baseline;
   line-height: 1;
}

/* The container */
#cssmenu > ul {
   display: block;
   position: relative;
   width: 150px;
}

   /* The list elements which contain the links */
   #cssmenu > ul li {
      display: block;
      position: relative;
      margin: 0;
      padding: 0;
      width: 150px;   
   }

      /* General link styling */
      #cssmenu > ul li a {
         /* Layout */
         display: block;
         position: relative;
         margin: 0;
         border-top: 1px dotted #3a3a3a;
         border-bottom: 1px dotted #1b1b1b;
         padding: 11px 20px;
         width: 110px;

         /* Typography */
         font-family:  Helvetica, Arial, sans-serif;
         color: #d8d8d8;
         text-decoration: none;
         text-transform: uppercase;
         text-shadow: 0 1px 1px #000;
         font-size: 13px;
         font-weight: 300;

         /* Background & effects */
         background: #282828;
      }

      /* Rounded corners for the first link of the menu/submenus */
      #cssmenu > ul li:first-child>a {
         border-top-left-radius: 4px;
         border-top-right-radius: 4px;
         border-top: 0;
      }

      /* Rounded corners for the last link of the menu/submenus */
      #cssmenu > ul li:last-child>a {
         border-bottom-left-radius: 4px;
         border-bottom-right-radius: 4px;
         border-bottom: 0;
      }


      /* The hover state of the menu/submenu links */
      #cssmenu > ul li>a:hover, #cssmenu > ul li:hover>a {
         color: #3cc4e6;
         text-shadow: 0 1px 0 #fff;
         background: #e6e6e6;
         background: -webkit-linear-gradient(bottom, #e6e6e6, #fff);
         background: -ms-linear-gradient(bottom, #e6e6e6, #fff);
         background: -moz-linear-gradient(bottom, #e6e6e6, #fff);
         background: -o-linear-gradient(bottom, #e6e6e6, #fff);
         border-color: transparent;
      }

      /* The arrow indicating a submenu */
      #cssmenu > ul .has-sub>a::after {
         content: '';
         position: absolute;
         top: 16px;
         right: 10px;
         width: 0px;
         height: 0px;

         /* Creating the arrow using borders */
         border: 4px solid transparent;
         border-left: 4px solid #d8d8d8;
      }

      /* The same arrow, but with a darker color, to create the shadow effect */
      #cssmenu > ul .has-sub>a::before {
         content: '';
         position: absolute;
         top: 17px;
         right: 10px;
         width: 0px;
         height: 0px;

         /* Creating the arrow using borders */
         border: 4px solid transparent;
         border-left: 4px solid #000;
      }

      /* Changing the color of the arrow on hover */
      #cssmenu > ul li>a:hover::after, #cssmenu > ul li:hover>a::after {
         border-left: 4px solid #3cc4e6;
      }

      #cssmenu > ul li>a:hover::before, #cssmenu > ul li:hover>a::before {
         border-left: 4px solid #fff;
      }

   
      /* THE SUBMENUS */
      #cssmenu > ul ul {
         position: absolute;
         left: 150px;
         top: -9999px;
         padding-left: 5px;
         opacity: 0;
         /* The fade effect, created using an opacity transition */
         -webkit-transition: opacity .3s ease-in;
         -moz-transition: opacity .3s ease-in;
         -o-transition: opacity .3s ease-in;
         -ms-transition: opacity .3s ease-in;
      }

      /* Showing the submenu when the user is hovering the parent link */
      #cssmenu > ul li:hover>ul {
         top: 0px;
         opacity: 1;
      }
-->
</style>
</head>

lembrando: esse code é o padrão que vem lá no menu, entao nao utilize ele, edite o seu menu a teu gosto e depois repita esses passos,

Abraços...

valeu cara obrigado levou meu tenks

Tópico finalizado e movido para:
Questões resolvidas
Pedidos finalizados

Motivo: Resolvido.