Thread: Adding a second level to horizontal menu

My site

Not being a coder, I can't figure out how to add a second submenu to my horizontal jQuery menu. Ideas or suggestions please?

I realise I need some css styling for the second level but don't know how

I solved it by using by using the free Superfish menu.
Works a treat!

this is the way for adding submenu to a menu.

HTML Code:

<nav>
      <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="lang.html">language</a></li>
                               <ul>
                            <li><a href="english.html">English</a></li>
                            <li><a href="hindi.html">Hindi</a></li>
                            <li><a href="spanish.html">Spanish</a></li>
                            </ul>
                    <li><a href="service.html">Services</a></li>
                    <li><a href="about.html">About Us</a></li>
                    </ul>
         </nav>

css:

Code:

nav ul ul { background: #5f6975; border-radius: 0px; padding: 0; position: absolute; top: 100%; }
nav ul ul li { float: none;border-top: 1px solid #6b727c; border-bottom: 1px solid #575f6a;position: relative;}
nav ul ul li a { padding: 15px 40px;color: #fff;}
nav ul ul li a:hover { background: #4b545f;}

this is the way for adding submenu to a menu...

Originally Posted by irfan96

I need to correct you on the html structure there, a submenu ul must be a child of an li, not a ul:

HTML Code:

<nav>
	<ul>
		<li><a href="index.html">Home</a></li>
		<li><a href="lang.html">language</a><!-- submenu parent start -->
			<ul><!-- submenu start -->
				<li><a href="english.html">English</a></li>
				<li><a href="hindi.html">Hindi</a></li>
				<li><a href="spanish.html">Spanish</a></li>
			</ul><!-- submenu end -->
		</li><!-- sub menu parent end -->
		<li><a href="service.html">Services</a></li>
		<li><a href="about.html">About Us</a></li>
	</ul>
</nav>

You may need to edit your css to work correctly, especially if one were to add a sub sub menus.


P.S. Please also wrap html in bbcode tags. CSS should be wrapped in [code] tags and PHP in [php] tags. Also, proper indentation will make your code easier to read. Thanks.