submenu horizontal

[Kurassier]

Podrias probar con esto:

Index.html

Código HTML:

<script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="menuAcordeon.js"></script>
 
<div id="menu">
<ul id="menuAcordeon">
    <li>
        <a href="#"> Categoria 1 </a>
        <ul>
            <li> <a href="#"> Opcion 1</a> </li>
            <li> <a href="#"> Opcion 2</a> </li>
            <li> <a href="#"> Opcion 3</a> </li>
            <li> <a href="#"> Opcion 4</a> </li>
        </ul>
    </li>
    
    <li>
        <a href="#"> Categoria 2 </a>
        <ul>
            <li> <a href="#"> Opcion 1</a> </li>
            <li> <a href="#"> Opcion 2</a> </li>
            <li> <a href="#"> Opcion 3</a> </li>
            <li> <a href="#"> Opcion 4</a> </li>
        </ul>
    </li>
    
    <li>
        <a href="#"> Categoria 3 </a>
        <ul>
            <li> <a href="#"> Opcion 1</a> </li>
            <li> <a href="#"> Opcion 2</a> </li>
            <li> <a href="#"> Opcion 3</a> </li>
            <li> <a href="#"> Opcion 4</a> </li>
        </ul>
    </li>
 
</ul>
</div>
 

CSS

Código CSS:

body {
  font-family: Italic, Comic Sans MS, sans-serif;
  font-size: 1.0em;
  background-color: cyan;
}
 
 
ul#menuAcordeon, ul#menuAcordeon ul {
  list-style-type:none;
  margin: 0;
  padding: 0;
  width: 19em;
}
 
ul#menuAcordeon a {
  display: block;
  text-decoration: none;    
}
 
ul#menuAcordeon li {
  margin-top: 1px;
}
 
ul#menuAcordeon li a {
  background: #03D797;
  color: #2600FC;   
  padding: 0.5em;
-moz-border-radius: 90px;
-webkit-border-radius: 5px;
}
 
ul#menuAcordeon li a:hover {
  background: #D7B303;
  color: cyan;
}
 
ul#menuAcordeon li ul li a {
  background: #DF0101;
  color: #04B4AE;
  padding-left: 20px;
}
 
ul#menuAcordeon li ul li a:hover {
  background: ##8A2908;
  border-left: 5px #000 solid;
  padding-left: 15px;
}
 
 
#menu{
position: absolute;
left: 35%;
top: 9%;
}
 

menuAcordeon.js

Código Javascript:

function initMenu() {
  $('#menuAcordeon ul').hide();
  $('#menuAcordeon ul:first').show();
  $('#menuAcordeon li a').click(
    function() {
      var checkElement = $(this).next();
      if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
        return false;
        }
      if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
        $('#menuAcordeon ul:visible').slideUp('normal');
        checkElement.slideDown('normal');
        return false;
        }
      }
    );
  }
$(document).ready(function() {initMenu();});
 

Los colores fueron puestos random, por asunto de ejemplo