Solved

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

Posted on 2012-03-26
4
308 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 500 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

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

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

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

710 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