Problem mit hover Effekt bei Submenu

Kadey · 18.06.2011

Hallo zusammen,

bin nicht der Beste in CSS & Co. Habe ein kleines Problem mit meinem :hover Submenu.

Weis gar nicht wie ich das genau erklären soll ;(

Naja, auf jeden Fall habe ich ein Div, welches über die ganze Breite einer mittig positionierten Box geht.
In diesem Div habe ich das Wort "Menü" Links ausgerichtet.
Ich möchte, das wenn man mit der Maus über "Menü" fährt, das sich das Submenu aufklappt.
Soweit klappt das auch, Problem ist nur. Das Submenü klappt aber auch auf, wenn ich allgemein über das Div mit der Maus fahre, also auch im rechten Bereich.

Sorry, weis echt nicht wie ich das erklären soll...
Hier mal mein HTML-Code:

Code:

<body>
<div id="gesamt">

    <div id="box3">
    <ul>
    <li class="navi"><strong class="hover"><a href="#">Menü</a></strong>
        <ul class="submenu">
               <li><a href="bieten.html">Bieten</a></li>
            <li><a href="suchen.html">Suchen</a></li>
            <li><a href="kontakt.html">Kontakt</a></li>
               <li><a href="impressum.html">Impressum</a></li>
        </ul>
    </li></ul>
    </div>

Und hier der CSS-Code:

Code:

#gesamt { 
width:90%;
height:350px;
margin-left:auto;
margin-right:auto;
margin-top:40px;
background-image:url(../bilder/kork.jpg);
border:ridge 10px #D29C57;
}



#box3 {
text-align:left;
background-color:#069;
border-bottom:1px solid #fff;}

        .hover { 
        margin:10px;
        color:#fff;}

.navi {
display:block;
background-color:#069;
font-size:12px;
}

.navi:hover .submenu{
display:inline;
position:absolute;}

      .navi:hover .submenu li {
      display:block;
      background-color:#069;
      list-style-position:outside;
      padding-left:10px;}


.submenu {
display:none;
width:140px;
height:30px;
font-size:14px;
margin-top:10px;
border-radius:5px;
color:#fff;}

Hoffe jemand weis was ich will ...

Danke

Kadey

pixelpur · 18.06.2011

AW: Problem mit hover Effekt bei Submenu

Versuch es mal am besten mit .navi a{} oder mit .submenu a{} oder in deinem Fall sicher a:hover. Du hast es ja auch noch in li Elementen somit ginge auch li a:hover.

mindraper · 25.06.2011

AW: Problem mit hover Effekt bei Submenu

Hi Kadey!

Dein erstes li-Tag (das mit der class="navi" ist aufgrund deines CSS ein Blockelement ( display: block; ). Gib ihm mal eine max-width von x px ( musst du testen - denke, 100 sollten OK sein ) oder einfach nur eine width.

Du solltest also ca. sowas in deinem CSS stehen haben:

.navi {
display:block;
width: 100px; /* alternativ: max-width: 100px;
background-color:#069;
font-size:12px;
}

Wenn du einem Element die Eigenschaft display: block zuweist, verhält es sich im Anschluss wie ein Block-Element – das bedeutet, es hat eine Breite von 100% sofern nicht anders definiert. Deshalb hat es nicht so funktioniert, wie Du wolltest

Gruß

hubspe · 25.06.2011

AW: Problem mit hover Effekt bei Submenu

mindraper schrieb:
Dein erstes li-Tag (das mit der class="navi" ist aufgrund deines CSS ein Blockelement ( display: block; ).

kleine Korrektur:
li ist von Hause aus ein Blockelement, da brauchts kein display:block;.

mindraper · 25.06.2011

AW: Problem mit hover Effekt bei Submenu

OK, hast ja recht. Sorry, aber ich habe einfach nach einer Lösung gesucht und dafür ist es doch schnurz-piep-egal ob <li>-Elemente native Block-Elemente sind oder aufgrund des Stylesheets

Aber prinzipiell natürlich: Ja.

hubspe · 26.06.2011

AW: Problem mit hover Effekt bei Submenu

mindraper schrieb:
und dafür ist es doch schnurz-piep-egal ob <li>-Elemente native Block-Elemente sind oder aufgrund des Stylesheets

für die Lösung vielleicht ja, aber solche Aussagen könnten sich beim Fragenden festsetzen, d.h. er denkt womöglich li braucht display:block;, um ein Blockelement zu werden.
Deshalb sollte sowas immer korrigiert werden.