Horizontal multilevel menus using css & Jquery

A

admin

Administrator
Staff member
I am trying to make a simple horizontal list Menu showed in this <a href="http://energycell.co.uk/about.html" rel="nofollow">example</a>, So far i have copied List &amp; CSS to <a href="http://jsfiddle.net/7uWyf/" rel="nofollow">jsFiddle</a> ( <a href="http://jsfiddle.net/sxDbu/14/" rel="nofollow">New Example Update</a>)but it doesn't seem to work how i make it work in a similar fashion. I am not able to find similar example which i can look into &amp; replicate.

I would appreciate help in this regard.

Code: 
&lt;ul&gt;
&lt;li&gt;&lt;a  href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a  href="about.html"&gt;About&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a  href="services.html"&gt;Services&lt;/a&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a  href="graphic-design.html"&gt;Graphic Design&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="web-design.html"&gt;Web Design&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="multimedia.html"&gt;Multimedia&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="exhibitions.html"&gt;Exhibitions&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="trademarketing.html"&gt;Trade Marketing&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="work.html"&gt;Work&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="clients.html"&gt;Clients&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="wordpress"&gt;Blog&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

CSS

Code: 
nav#mainnav ul {
    bottom: 57px;
    height: 0;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: absolute;
    right: 0;
}
nav ul {
    list-style: none outside none;
}
ol, ul {
    color: #242320;
    font-size: 0.8em;
    font-weight: bold;
    line-height: 1.3em;
    margin: 10px 40px;
}
ul {
    margin-left: 30px;
}

<strong>UPDATE:</strong>

I am able to make it work as horizontal menu, but i am not able fade out the submenu after some time how can i do that <a href="http://jsfiddle.net/sxDbu/14/" rel="nofollow">Example Update</a>
 
You must log in or register to reply here.