24.05.2010, 01:35
|
|||
|
|||
Hover für Submenu
Hallo zusammen,
stecke gerade in einem Dilemma und zwar habe ich erfolgreich das Submenu verstecken können, aber ich bekomme es mit dem Hover auf einem Button nicht wieder zu Gesicht? Der Verständnis halber anbei HTML und CSS: HTML-Code:
<div id="wrapper" style="display:block;"> <ul id="navigation"> <li><a href="#" class="menu_1">1</a></li> <li><a href="#" class="menu_2">2</a></li> <li><a href="#" class="menu_3">3</a></li> <ul id="sub_navigation"> <li><a href="#" class="sub_a">a</a></li> <li><a href="#" class="sub_b">b</a></li> <li><a href="#" class="sub_c">c</a></li> <li><a href="#" class="sub_d">d</a></li> <li><a href="#" class="sub_e">e</a></li> <li><a href="#" class="sub_f">f</a></li> <li><a href="#" class="sub_g">g</a></li> <li><a href="#" class="sub_h">h</a></li> </ul> <li><a href="#" class="menu_4">4</a></li> <li><a href="#" class="menu_5">5</a></li> <li><a href="#" class="menu_6">6</a></li> </ul> </div> Code:
* {
margin: 0;
padding: 0;
}
/* Navigation */
ul#navigation {
list-style-type: none;
margin: 0;
padding: 0;
margin-top: 16px;
position: relative;
}
ul#navigation li {
margin: 0;
padding: 0;
}
ul#navigation li a {
display: inline;
text-decoration: none;
position: absolute;
text-indent: -9999px;
}
/* Sub-Navigation */
ul#sub_navigation li a {
position: absolute;
top: 138px;
text-decoration: none;
text-indent: -9999px;
padding: 10px;
}
ul#sub_navigation {
margin:0;
padding:0;
position:relative;
}
ul#sub_navigation li {
margin:0;
padding:0;
}
/* Einstellungen für die einzelnen Punkte */
ul#navigation li a.menu_1 {
background: url('pics/menu_1.png') no-repeat;
left: 0;
top: 22px;
height: 66px;
width: 151px;
z-index:100;
outline: none;
}
ul#navigation li a.menu_2 {
background: url('pics/menu_2.png') no-repeat;
top: 62px;
height: 66px;
width: 129px;
z-index:99;
}
ul#navigation li a.menu_3 {
background: url('pics/menu_3.png') no-repeat;
top: 102px;
height: 66px;
width: 122px;
z-index:98;
}
ul#navigation li a.menu_4 {
background: url('pics/menu_4.png') no-repeat;
top: 142px;
height: 66px;
width: 212px;
z-index:96;
}
ul#navigation li a.menu_5 {
background: url('pics/menu_5.png') no-repeat;
top: 182px;
height: 66px;
width: 270px;
z-index:95;
}
ul#navigation li a.menu_6 {
background: url('pics/menu_6.png') no-repeat;
top: 222px;
height: 66px;
width: 189px;
z-index:94;
}
/* Einstellungen für Sub-Navigation */
#navigation li ul {
display: none;
}
#navigation menu_3:hover ul {
display: inline;
}
/* Einstellungen für die einzelnen Punkte (Sub) */
ul#sub_navigation li a.sub_a {
background: url('pics/sub_a.png') no-repeat;
top: 130px;
left: 148px;
height: 37px;
width: 74px;
z-index:97;
}
ul#sub_navigation li a.sub_b {
background: url('pics/sub_b.png') no-repeat;
top: 130px;
left: 222px;
height: 37px;
width: 68px;
z-index:97;
}
ul#sub_navigation li a.sub_c {
background: url('pics/sub_c.png') no-repeat;
top: 130px;
left: 290px;
height: 37px;
width: 59px;
z-index:97;
}
ul#sub_navigation li a.sub_d {
background: url('pics/sub_d.png') no-repeat;
top: 130px;
left: 349px;
height: 37px;
width: 94px;
z-index:97;
}
ul#sub_navigation li a.sub_e {
background: url('pics/sub_e.png') no-repeat;
top: 130px;
left: 443px;
height: 37px;
width: 38px;
z-index:97;
}
ul#sub_navigation li a.sub_f {
background: url('pics/sub_f.png') no-repeat;
top: 130px;
left: 481px;
height: 37px;
width: 107px;
z-index:97;
}
ul#sub_navigation li a.sub_g {
background: url('pics/sub_g.png') no-repeat;
top: 130px;
left: 588px;
height: 37px;
width: 48px;
z-index:97;
}
ul#sub_navigation li a.sub_h {
background: url('pics/sub_h.png') no-repeat;
top: 130px;
left: 636px;
height: 37px;
width: 56px;
z-index:97;
}
|
| Sponsored Links |
|
24.05.2010, 02:04
|
||||
|
||||
|
der aufbau deines menüs müsste wie folgt ausschauen:
HTML-Code:
<div id="wrapper" style="display:block;"> <ul id="navigation"> <li><a href="#" class="menu_1">1</a></li> <li><a href="#" class="menu_2">2</a></li> <li> <a href="#" class="menu_3">3</a> <ul id="sub_navigation"> <li><a href="#" class="sub_a">a</a></li> <li><a href="#" class="sub_b">b</a></li> <li><a href="#" class="sub_c">c</a></li> <li><a href="#" class="sub_d">d</a></li> <li><a href="#" class="sub_e">e</a></li> <li><a href="#" class="sub_f">f</a></li> <li><a href="#" class="sub_g">g</a></li> <li><a href="#" class="sub_h">h</a></li> </ul> </li> <li><a href="#" class="menu_4">4</a></li> <li><a href="#" class="menu_5">5</a></li> <li><a href="#" class="menu_6">6</a></li> </ul> </div>
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato... All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege  www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
|
| Sponsored Links |
|
24.05.2010, 03:03
|
|||
|
|||
|
Vielen Dank dir, hat super geklappt, lag dann nur an der Formatierung des <li>
Allerdings habe ich das Problem, dass die aktive Fläche nicht groß genug ist um auf die Buttons zu klicken, da sie davor wieder verschwinden. Ich habe einen Abstand von 10px, wollte die aber auch gerne behalten oder muss ich dieses Opfer bringen? Danke
|
 |
| Stichwörter |
| css, down, drop, hover, html, menü, sub |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| Hilfe css Menu center | xXcyberXx | CSS | 5 | 28.11.2010 19:51 |
| Problem mit CSS Menü | SMundt | CSS | 9 | 07.01.2009 19:12 |
| CSS Navigation - Problem mit IE6 | pcklinik | CSS | 4 | 18.09.2007 12:04 |
| Darstellungsproblem CSS Navigation im IE7 | pcklinik | CSS | 7 | 09.09.2007 17:25 |
| CSS Einsteiger bittet um Hilfe | pcklinik | CSS | 0 | 06.09.2007 14:40 |
Linear-Darstellung
