Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

what im doing wrong with this css menu????

Posted on 2012-03-26
4
Medium Priority
?
315 Views
Last Modified: 2012-03-26
ok i have this example: http://www.grupossc.com/test2012/test2012.html

i use main.css to build the menu on the example

I gonna try to explain what is happend

The main menu of the example is the class Firstdaddy

As you can see when you move the mouse over any option with submenu and after that you move the mouse over the submenu, the font of the option in the main menu loss its color.

I woul like to know how to solve that issue.
menu.css
0
Comment
Question by:altariamx2003
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
4 Comments
 
LVL 12

Expert Comment

by:HugoHiasl
ID: 37764801
Why it happens is obvious.

You are using :hover for styling the main menu option when the mouse is over. But when the mouse is moved to the submenu it is not longer hovered.

You need to change the script that it adds another class to the main-menu option when the submenu of an option is shown. And it should remove it when the submenu is closed.
0
 
LVL 1

Expert Comment

by:miguelangelcampos
ID: 37764827
Looks like you set font color to White in firstDaddy:hover, but when the element loses focus, it returns to its original colour, but background stays with the gray image.

If you want to avoid this, just comment this on #nav LI:hover :
#nav LI:hover {
/*    background-image: url("http://www.grupossc.com/imagenes/fetapa2.jpg"); */
...
}

Open in new window

This way, background in the main menu will return to original. ¿Is that what you are looking for?
0
 
LVL 22

Accepted Solution

by:
Kim Walker earned 2000 total points
ID: 37766805
You have two different hover styles working. One when you hover over the link tag on line 104:
#nav .firstDaddy:hover {...}

Open in new window

and another when you hover over the list item tag on line 92:
#nav LI.hover {...}

Open in new window

This way, when you are no longer hovering over the link tag, the color changes back. I would move the first hover pseudo selector to the list item tag by changing line 104 to:
#nav LI:hover .firstDaddy {...}

Open in new window

This way, as long as you hover over the list item, the child link tag would still remain white.
0
 

Author Closing Comment

by:altariamx2003
ID: 37767381
Thanks brother it was really easy!!!

xmediaman RULES!!!!

hehe
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

704 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question