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?
| SitePoint Sponsor |
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?


How do you want the menu to appear? At the moment, you have one link above the other.
Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form
Try your hand at the new JavaScript Challenge!
If you don't like getting your feet stuck in a bog, avoid Twitter BootsTrap.


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:
Also make sure that jQuery 1.8 is selected on the left, as it is defaulting to Mootools.Code:<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, in your CSS, change
toCode:.menubar ul li{display: inline;}
Code:.menubar ul li{float: left;}
Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form
Try your hand at the new JavaScript Challenge!
If you don't like getting your feet stuck in a bog, avoid Twitter BootsTrap.
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.


Please update the Fiddle page or post a link to a new one.
Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form
Try your hand at the new JavaScript Challenge!
If you don't like getting your feet stuck in a bog, avoid Twitter BootsTrap.
here...
p.s if u can delete the above mentioned menu code.kindly do that..the code is private.


Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form
Try your hand at the new JavaScript Challenge!
If you don't like getting your feet stuck in a bog, avoid Twitter BootsTrap.


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.
Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form
Try your hand at the new JavaScript Challenge!
If you don't like getting your feet stuck in a bog, avoid Twitter BootsTrap.
Bookmarks