HTML and CSS RSS HTML and CSS RSS

css menu in ie7 : a:hover behaviour only on text not on the whole box

Reply

•
•
Join Date: Jun 2007
Posts: 1
Reputation: sycorax27 is an unknown quantity at this point 
Solved Threads: 0
sycorax27 sycorax27 is offline Offline
Newbie Poster

css menu in ie7 : a:hover behaviour only on text not on the whole box

 
0
  #1
Jun 18th, 2007
Hello,

i would appreciate any help with css menu in ie7.
I have developed the pure css menu, what is working fine with ie6 and ff, opera as well,
but after comming the new ie7 i have realised, that the menu is simulating the a:hover behaviour without any htc files etc. But its quite strange. The menu is multilevel menu, and after moving out from the text in the menu, the other levels are very fast disappearing ... so you cannot reach the next level because of this ... on the others browsers its working fine.

Link to the testing page : http://www-1.sysnet.cz/Test/web-navx....html?OpenPage

If you could write me how to change the menu.css for working properly on ie7 as well, thanx!

The css code of the menu :
HTML and CSS Syntax (Toggle Plain Text) 
  1. /**************** menu coding *****************/
  2. #menu {
  3. width: 200px;
  4. background: #ffeeee;
  5. z-index: 9999;
  6. }
  7.  
  8. #menu ul {
  9. list-style: none;
  10. margin: 0;
  11. padding: 0;
  12.  
  13. }
  14.  
  15. #menu a, #menu h2 {
  16. display: block;
  17. border:1px solid #888888;
  18. border-width:0px 1px 1px 0px;
  19. margin: 0;
  20. padding: 5px 3px;
  21.  
  22. }
  23.  
  24. #menu h2 {
  25. display: none;
  26. }
  27.  
  28. #menu a {
  29. color: #FFFFFF;
  30. background: #B2B2B2;
  31. padding-left:5px;
  32. text-decoration: none;
  33. font-size:0.6em;
  34. font-family:Arial Black;
  35. text-transform:uppercase;
  36. }
  37.  
  38. #menu a:hover {
  39. color: #FFFFFF;
  40. background: #99cc00;
  41. }
  42.  
  43. #menu li {
  44. position: relative;
  45. }
  46.  
  47. #menu ul ul{
  48. position: absolute;
  49. top: 0;
  50. left: 100%;
  51. width: 100%;
  52. }
  53.  
  54. div#menu ul ul ,
  55. div#menu ul li:hover ul ul
  56. {display: none;}
  57.  
  58. div#menu ul li:hover ul,
  59. div#menu ul ul li:hover ul
  60. {display: block;
  61. border:1px solid #777777;
  62. border-width:1px 0px 0px 1px;
  63. margin-left:-1px;
  64. }
  65.  
  66. #menu ul ul ul {
  67. position: absolute;
  68. top: 0;
  69. left: 100%;
  70. width: 100%;
  71. }
  72.  
  73. div#menu ul ul ul,
  74. div#menu ul ul li:hover ul ul
  75. {display: none;}
  76.  
  77. div#menu ul ul li:hover ul,
  78. div#menu ul ul ul li:hover ul
  79. {display: block;}
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2007
Posts: 3,203
Reputation: MidiMagic has a spectacular aura about MidiMagic has a spectacular aura about 
Solved Threads: 164
MidiMagic's Avatar
MidiMagic MidiMagic is offline Offline
Nearly a Senior Poster

Re: css menu in ie7 : a:hover behaviour only on text not on the whole box

 
0
  #2
Jun 19th, 2007
You need the hover attribute applied to the entire menu area once it opens, not just its start tab.
Daylight-saving time uses more gasoline
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2009
Posts: 6
Reputation: vik85 is an unknown quantity at this point 
Solved Threads: 0
vik85 vik85 is offline Offline
Newbie Poster

Re: css menu in ie7 : a:hover behaviour only on text not on the whole box

 
0
  #3
Jun 30th, 2009
hey can you show me how to do ? i didn't understand your ans .can you give me some idea bye code.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2009
Posts: 1,316
Reputation: almostbob has a spectacular aura about almostbob has a spectacular aura about 
Solved Threads: 161
almostbob's Avatar
almostbob almostbob is offline Offline
Nearly a Posting Virtuoso

Re: css menu in ie7 : a:hover behaviour only on text not on the whole box

 
0
  #4
Jun 30th, 2009
css Syntax (Toggle Plain Text) 
  1. #menu a:hover { color:#FFFFFF; background:#99cc00; }
  2. #menu li { position: relative; }
  3. #menu li:hover { color:#FFFFFF; background:#99cc00; position:relative; }
Last edited by almostbob; Jun 30th, 2009 at 5:12 pm.
Failure is not an option It's included free
If at first you dont succeed, join the club
Of course its always in the last place you look, you dont keep looking after you find it

Please mark solved problems, solved
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the HTML and CSS Forum
Thread Tools Search this Thread



appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC