Menu not working as desired

JavaScript
1

Hi,
i m new to jquery and creating menu, the menu drop down menu stays under one position i,e the first menu and don’t drop under their own respesctive paren’t menu and its not taking with to be of decent equal size.what am i doing wrong?

2

How do you want the menu to appear? At the moment, you have one link above the other.

3

Yes, now its on top of each other and every sub menu slides down from position of home.i want them to slide in there respective order i.e below there own parent. also i want them be with wise equally.so they look decent and not wrap around just for text

4

The CSS is targeting an UL inside an element called “menubar”, so that’s why nothing is working. So, firstly, update your HTML to something like this:

           <div class="menubar">
                        <ul>
                            <li class="dropdown"><a href="index.php">Home</a>
                            </li>
                            <li class="dropdown"><a href="about.php">About</a>
                                <ul class="sublinks">
                                <li><a href="">History</a></li>
                                <li><a href="">Mission + Vision</a></li>
                                <li><a href="">Objectives</a></li>
                                <li><a href="">Afflitaion</a></li>
                                <li><a href="">Facilities</a></li>
                                <li><a href="">Staff</a></li>
                                <li><a href="">Contact Us</a></li>
                                </ul>
                            </li>
                        </ul>
                     </div>

Also make sure that jQuery 1.8 is selected on the left, as it is defaulting to Mootools.

Also, in your CSS, change

.menubar ul li{display: inline;}

to

.menubar ul li{float: left;}
5

thanks, meanwhile i tried that.there is a issue…
1.the drop down overlap parent menu. i need i open a little below.
2.the li background are wrapping to what the size of text is, i want to them to be of decent width, so every menu is equal
3. somehow its pulling/inheriting the parent menu style.

6

Please update the Fiddle page or post a link to a new one.

7

here…
p.s if u can delete the above mentioned menu code.kindly do that…the code is private.

8

You haven’t used any of my suggestions above. I tested them and they work.

9

I was able to do. what was needed. however its so confusing about which element to style(li or a) to give padding.so its fat thick button type rollover

10

O well, first things first. There’s no point worrying about padding until you’ve got the basics right. Use the HTML and CSS I posted above. Your HTML is invalid and incomplete at the moment.