Turning static css menu into "on hover"
Experts,
I have a website which has bee created in Joomla:
http://www.marke2ing.com/index.php/your-needs
The menu here has two sub menus, of "your needs" and "our services". The top menu is a list, and the sub menus are absolute positioned DIVs, which at the moment are static on the relevant pages.
I would like for each sub menu to show when the user hovers over the menu item. I would normally do this with javascript, but due to joomla constraints am unable. I would like siggestions on how to approach this using CSS, but i am unfamiliar with how to approach the problem. As you can image the sub menu needs to show when on the menu otem ,but also when the mouse moves between that and the sub menu without any flicker etc.
Each top menu item has an individual class, so i assume this is possible?
Regards
Easynow
I have a website which has bee created in Joomla:
http://www.marke2ing.com/index.php/your-needs
The menu here has two sub menus, of "your needs" and "our services". The top menu is a list, and the sub menus are absolute positioned DIVs, which at the moment are static on the relevant pages.
I would like for each sub menu to show when the user hovers over the menu item. I would normally do this with javascript, but due to joomla constraints am unable. I would like siggestions on how to approach this using CSS, but i am unfamiliar with how to approach the problem. As you can image the sub menu needs to show when on the menu otem ,but also when the mouse moves between that and the sub menu without any flicker etc.
Each top menu item has an individual class, so i assume this is possible?
Regards
Easynow
Last Comment
SOLUTION
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER CERTIFIED SOLUTION
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
You are not following instructions, I said that you need to position sub menu first, so it doesn't ruin main menu.
Then add rules.
Obviously I didn't provided How I would like it to be, it's your decision. Because your question was:
I would like for each sub menu to show when the user hovers over the menu item.
- My solution works.
I am glad that you asked how to position sub menu, but your were right:
li:hover ul {
display: block;
//margin-top: 30px; Remove it
}
add this for absolute position (not display):
ul li ul {
position: absolute;
}
It isn't the end view, you have to adjust it yourself as you like, I suggest you to switch off display:none; for a while.
Then add rules.
Obviously I didn't provided How I would like it to be, it's your decision. Because your question was:
I would like for each sub menu to show when the user hovers over the menu item.
- My solution works.
I am glad that you asked how to position sub menu, but your were right:
li:hover ul {
display: block;
//margin-top: 30px; Remove it
}
add this for absolute position (not display):
ul li ul {
position: absolute;
}
It isn't the end view, you have to adjust it yourself as you like, I suggest you to switch off display:none; for a while.
easynow111, I cannot send you an e-mail to info@suremedia.co.uk ; could you please provide working email.
ASKER
Strange it should work, alternative is Dean.Obrien@unn.ac.uk cheers
ASKER
Thanks for advice
HTML
HTML (HyperText Markup Language) is the main markup language for creating web pages and other information to be displayed in a web browser, providing both the structure and content for what is sent from a web server through the use of tags. The current implementation of the HTML specification is HTML5.
62K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
TRUSTED BY
ASKER
I have done what you suggested here:
www.suremedia.co.uk/marke2ing/experience3.htm
Can you suggest how to change this so that it doesnt deform the main menu when i hover? By the nature of your code, if i display it inline then it must push all the other menu items in the main menu to the right? WHereas to have it float under, i would need to display absolute?
I appreciate the help
Regards
easynow