css menue ohne java hoveraktivität

Seite

Beiträge: 9
Registriert: Jan 2011

07.11.2012, 11:05

hallo,

kann mir jemand helfen ?
habe ein menü gebastelt es sind jedoch nicht nur die button aktiv sondern eine ganze fläche,
in dem fall das ganz <div menueleft>

wenn man über den grauen hintergrund fährt dann öffnet sich das submenue (flyout)

hier mein script:

PHP:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>WebSpeaks.in</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style> *{margin:0;padding:0;} #leftPan { WIDTH: 1000px; FLOAT: left; background-color:#339933; } #leftPan UL { PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; WIDTH:600px; PADDING-RIGHT: 0px; DISPLAY: block; HEIGHT: 231px; PADDING-TOP: 28px; background-color:#996600; } #leftPan UL LI { POSITION: relative; MARGIN: 0px auto; HEIGHT: 60px; } #leftPan UL LI A { PADDING-BOTTOM: 0px; PADDING-LEFT: 22px; PADDING-RIGHT: 22px; PADDING-RIGHT: 0px; DISPLAY: block; FONT: bold 13px/26px "Trebuchet MS", Arial, Helvetica, sans-serif; BACKGROUND: #000; HEIGHT: 59px; COLOR: #8f8c73; TEXT-DECORATION: none; PADDING-TOP: 0px; float:right; margin-right:600px; } #leftPan UL LI A:hover { BACKGROUND:#f6f4e4; COLOR: #7f0a5f; TEXT-DECORATION: none; } /* Begin CSS Menus at Left */ #menuleft{position:absolute; z-index:2; width:1000px; left:0px; BACKGROUND: #efefef; } #menuleft li{margin:0;padding:0;list-style-type:none; } #menuleft li a{display:block; width:auto;} #menuleft ul{list-style-image:none; width:auto;} #menuleft ul li {list-style-image:none; } #menuleft ul li ul{list-style-image:none; left:391px; top:0px; padding:10px; padding-top:0px; width:auto; } #menuleft ul li ul li a{margin:0px; border:0px solid #ff3399; border-right:0px solid #ff3399; border-left:0px;float:left; BACKGROUND: #cfcfcf; width:auto; TEXT-DECORATION: none; } #menuleft ul ul li ul li a{margin:0px; border:0px solid #ff3399; border-right:0px solid #ff3399; border-left:0px; float:left; BACKGROUND: #cfcfcf; padding:10px 20px 10px 20px; width:auto;} #menuleft ul li ul li a:hover{background-image:none; } #menuleft ul ul{list-style-image:none;} #menuleft ul ul ul{list-style-image:none;} /* Begin CSS Popout Menus at Left */ #menuleft ul li{position:relative; cursor:pointer; } #menuleft li ul{position:absolute;top:0;display:none;} /* Fix IE. Hide from IE Mac */ * html #menuleft ul li{float:left;height:1%;} * html #menuleft ul li a{height:1%;} /* End */ div#menuleft ul li:hover ul{display:block; } div#menuleft ul li:hover ul ul {display:none; } div#menuleft ul li:hover ul ul ul {display:none;} div#menuleft ul ul {display:none;} div#menuleft ul ul ul {display:none;} div#menuleft ul ul li:hover ul{display:block;} div#menuleft ul ul ul li:hover ul{display:block;} /* End CSS Popout Menus at Left */ /* End CSS Menus at Left */ </style> </head> <body>  <DIV id=leftPan> <UL> <div id="menuleft"> <ul> <li><a href="">Jquery kljäöfgödlfgäldfägld</a> <ul> <li><a href="">Animate</a></li> <li><a href="">Facebook Status</a></li> <li><a href="">KeyCodes</a></li> <li><a href="">Jobs by Category</a></li> </ul> </li> <li><a href="#">PHP</a> <ul> <li><a href="">Search</a></li> </ul> </li> <li><a href="#">Facebook</a> <ul> <li><a href="">Load More</a></li> <li><a href="">Expanding Textbox</a></li> <li><a href="">Toggle Comment</a></li> </ul> </li> <li><a href="#">Twitter</a> <ul> <li><a href="">Flash Message</a></li> <li><a href="">Update status</a></li> <li><a href="l">Login Box</a></li> <li><a href="">Update status</a></li> </ul> </li> <li><a href="#">CSS</a> <ul> <li><a href="">Drop Down</a></li> </ul> </li> </ul> </div> </UL> </DIV> </body> </html>