Min meny buggar lite

Jag har försökt lösa detta på egenhand, nu ger jag upp.

http://www.lavetten11.se/forsta.php

När jag ställer musen på "Om föreningen öppnas undermenyn som den ska. Går man hela vägen ner stannar pekaren inte på "Stadgar" utan hoppar ner till "För mäklare". kan för mitt liv inte se vad som fattas. För att kunna öppna stadgarna måste man gå med musen nerifrån och upp. Iritterande.

Min CSS:

/* VERTIKAL RULLMENY, EXPANDERAR 1 NIVÅ*/

/* box för rullmenyn */
	.menybox {padding: 10px; height: 90%; width: 150px;border: 
  1px solid #C8D6B2; overflow: auto; background: /*#C8D6B2;*/ #569AAA; position:fixed;}     /*ÄNDRAT FÄRGEN HÄR*/

/* loggmeny, vill bara ha ett annat utseende och text som inte markeras som länk bara */

.menytext{font-size: 90%; color: #800000;}
.undermeny{font-size: 90%;}
.vittext {color: #FFFFFF;}

.loggcontainer{left; width: 148px; font-size: 110%;
border-top: 1px solid #C8D6B2; border-left: 1px solid #C8D6B2; 
border-right: 1px solid #C8D6B2;}

.loggmeny{margin: 0; padding: 0; list-style-type: none;}
.loggmeny a{display: block; margin: 0; text-decoration: none; 
padding-bottom: 0.5em; padding-left: 5px ; color: #800000;
background: #E6E3DA; border-bottom: 1px solid /*#C8D6B2;*/ #568Bac;}		/*ÄNDRAT FÄRGEN HÄR*/

.loggmeny a:hover{background: #DCDFE4;}

/* Resten */

#vmeny ul {list-style-type: none; 
font-size: 14px;
margin: 0px;
padding: 0px;} 

#vmeny > ul > li {
border-top: 1px solid /*#C8D6B2;*/ #568BAC;			/*ÄNDRAT FÄRGEN HÄR*/
border-bottom: 2px solid /*#C8D6B2;*/ #568BAC;
} 	/*ÄNDRAT FÄRGEN HÄR*/

#vmeny li {
background-color: #E9EFFB;
position: relative; }

#vmeny > ul > li > ul {background: #E6E3DA;}

#vmeny li:hover {
background-color: #DCDFE4;}

#vmeny a { text-decoration: none;
display: block;
padding-left: 8px;
padding-right: 8px; 
padding-top: 2px;
padding-bottom: 2px;}

#vmeny a:link { color: black;}
#vmeny a:visited { color: black;}
#vmeny a:hover { color: blue;}
#vmeny a:active { color: black;}
#vmeny ul li a#current {backgrond: #000000;}

#vmeny > ul ul {
width: 130px;
display: none;}

#vmeny li:hover > a + ul {
display: block;}

Min Meny:

<div class="menybox">

<div class="vittext">MENY</div>

<div class="menytext">för alla</div>

<div class="loggcontainer">
<ul class="loggmeny">
<li> <a href="dold.php">Stäng Meny</a></li>

</ul>
</div>

<div id="vmeny">
<ul>
<li><a href="husfakta.php">Fakta om huset</a></li>
<li><a href="huset.php">Om föreningen »</a>

   <ul>
   <li class="undermeny"><a href="kanon.php">&nbsp;&nbsp;föreningslokal</a></li>
   <li class="undermeny"><a href="gard.php">&nbsp;&nbsp;gårdsförvandling</a></li>
   <li class="undermeny"><a href="bygget.php">&nbsp;&nbsp;byggprocess gård</a></li>
   <li class="undermeny"><a href="blommor.php">&nbsp;&nbsp;gårdsskötsel</a></li>
   <li class="undermeny"><a href="tvatt.php">&nbsp;&nbsp;tvättstuga</a></li>
   <li class="undermeny"><a href="trappa.php">&nbsp;&nbsp;ny gårdsentré</a></li>
   <li class="undermeny"><a href="trappa2.php">&nbsp;&nbsp;nygammal trappa</a></li>
   <li class="undermeny"><a href="arsbok.php">&nbsp;&nbsp;75-årsbok</a></li>
   
   </ul>
   </li>

<li><a href="stadgar.php">Stadgar</a></li>
<li><a href="felanm.php">Felanmälan</a></li>
<li><a href="panter.php">Pantförskrivningar</a></li>
<li><a href="dokument.php">Dokument</a></li>
<li><a href="lankar.php">Externa länkar</a></li>
<li><a href="hemsidan.php">Om hemsidan</a></li>
<li><a href="maklare.php">För mäklare</a></li>
<li><a href="forsta.php">Startsidan</a></li>

</ul>
</div>

<div class="menytext">&nbsp;</div>
<div class="menytext">för medlemmar</div>

<div class="loggcontainer" >
<ul class="loggmeny"  >
<li><a href="inloggning.php">Logga in</a></li>
</ul>
</div>

</div>

är väl inte konstigt, du har focus på "Om föreningen" noden och när du passera den så stänger den sig.

Jag vill att den ska stänga sig men jag vill komma till nästa (stadgar), inte till den näst sista (om mäklare) menyelementet. Fattar inte varför den hoppar.

kluringen skrev:

Jag vill att den ska stänga sig men jag vill komma till nästa (stadgar), inte till den näst sista (om mäklare) menyelementet. Fattar inte varför den hoppar.

det är inte konstigt... den utgå ifrån din muspostion, när du förlora fokus på kategorin så skall den döljas och det gör den.

Då tror jag att jag förstår vad som händer, men finns det något sätt att "tvångspositionera" musen till nästa element, d v s stadgarna i detta fall?

kluringen skrev:

Då tror jag att jag förstår vad som händer, men finns det något sätt att "tvångspositionera" musen till nästa element, d v s stadgarna i detta fall?

nej, det hoppas jag verkligen inte det har kommit vore ju hemskt om en webbsida börja styra musen.

Det har du rätt i, men som det är, är det inte snyggt. Kan man göra så att undermenyn stänger sig först när användaren har klickat på ett menyelement?

Ja, det skulle du nog kunna göra med javascript

med jquery så är det något i stil med:

var collection = $("#vmeny li > a");

collection.on('mouseenter', function(){
    $(this).siblings("ul").show();
}).on('click', function() {
	collection.siblings("ul").hide();
});

(du behöver plocka bort #vmeny li:hover > a + ul { display: block; }) i din css

Tack för ditt tips voigtann1 men jag avböjer lösningen. Jag behärskar varken JavaScript eller jquery och känner mig heller inte manad att lära mig. Önskar en lösning med enbart HTML5 och CSS. En annan menydesign kanske?

Kolla på "suckerfish" (en variant här http://www.htmldog.com/articles/suckerfish/dropdowns/example/vertical.html)

visserligen finns det med lite javascript, men man behöver inte behärska det för att klipp-o-klistra in koden ;) (dessutom så har jag för mig att den där tekniken funkar utan js i moderna browsers)

Vill du få det lite "flashigare" så kollar du på superfish (googla det) som är en jQuery plugin. Samma sak där, du behöver inte rota runt i själva javascript-koden utan klarar dig med klipp-o-klistra