[CSS+HTML] Dropdown menu dikke balk bij huidige menuitem

[sariel]

Hallo iedereen,

ik ben bezig m'n site een beetje te updaten, en heb een klein CSS probleempje:

site: http://newsite.philippinepics.com

Het dropdown menu is opgebouwd uit <ul><li> segmenten, geen tabellen of wat-dan-ook. Als ik m'n muis boven het menu houdt, krijg ik netjes de dropdown te zien. Alle tekst-stukken zien er gewoon goed uit.
Echter, zodra ik op een linkje van de dropdown klik (dus niet home/contact, maar gallery->bulusan), komt er een dikkere balk onder het menu-item. Dit is niet de bedoeling. Hoe kan ik deze weg halen?

Extra info:
opbouw:

code:

<ul class=dropdown><a href></a>
  <li><a href></a>
  <li class=here><a href></a> <!-- dit is huidige pagina -->
  <li class=last><a href></a> <!-- laatste item in dropdown -->
</ul>

Cascading Stylesheet:

/* Menu
------------------------------------------------------------------------- */
/* NAV - top horizontal nav */
#dropmenu, 
#dropmenu ul {
    padding: 0;
    margin-left: 0px;
    list-style: none;
}
#dropmenu {
    font-weight:bold;
    height:1.5em;
    font: bold 96% arial;
    margin-left: 3px;
    width: 700px;
    background: #8AB768;
    position: relative;
    left: -13px;
}
#dropmenu li {
    position:relative;
    left: 0px;
    background: #8AB768;
    float: left;
    width: 10em;
    display:block;
    margin-left: 0px;
    padding:0;
}
#dropmenu li.here,
#dropmenu a, 
#dropmenu a:link, 
#dropmenu a:visited,
#dropmenu a:hover, 
#dropmenu a:active {
    text-decoration:none;
    cursor:pointer;
    color:#fff;
    display: block;
    padding: 1px 10px 2px;
}
#dropmenu li.here,
#dropmenu li.here:hover {
    color: #000;
}
#dropmenu a:hover {
    color:#000;
}

#dropmenu li ul {
    border-left: 3px solid #8AB768;
    background: #f6f6f6 no-repeat 100% 100% ;
    width:16.8em;
    font-size:90%;
    margin-top:0px;
    position: absolute;
    font-weight:normal;
    left: -999em;
}
#dropmenu li:hover ul, 
#dropmenu li.sfhover ul {
    left: 0;
    z-index:99999;
}

#dropmenu li li {
    background:none;
    float:none;
    border:none;
    border-left: 3px solid #8AB768;
    border-top:0px solid #fff;
    border-right:none;
    border-left:none;
    padding-left:0;
}
#dropmenu li li.last {
    border-bottom:none;
}
#dropmenu li li.here,
#dropmenu li li a, 
#dropmenu li li a:link, 
#dropmenu li li a:visited,
#dropmenu li li a:hover {
    color:#000;
    padding: 3px 10px 2px;
    width:15em;
}
#dropmenu li li a:hover {
    color:#fff;
    background:#8AB768;
}

#dropmenu li.active {
    background: #8AB768;
    border-bottom: 3px solid #050;
}
#dropmenu li.active ul {
    border:none;
    background: #8AB768 no-repeat 100% 100%;
}
#dropmenu li.active a:link, 
#dropmenu li.active a:visited, 
#dropmenu li.active a:hover, 
#dropmenu li.active a:active {
}
#dropmenu li.active a:hover {
    color:#000;
}

#dropmenu li.active li {
    border:none;
    border-top: 1px solid #c15c5c;
    border-bottom: 1px solid #870000;
}
#dropmenu li.active li.last {
    border-bottom: none
}
#dropmenu li.active li a:link, 
#dropmenu li.active li a:visited, 
#dropmenu li.active li a:hover, 
#dropmenu li.active li a:active {
    color:#fff
}
#dropmenu li.active li a:hover {
    background: #666 repeat-x 0 99%;
    color:#fff;
}
#dropmenu li.active li.active a:link, 
#dropmenu li.active li.active a:visited, 
#dropmenu li.active li.active a:hover, 
#dropmenu li.active li.active a:active {
    color:#fff;
    font-weight:bold;
    background: #666 repeat-x 0 99%;
}

/* hide from IE mac \*/
#dropmenu li {
    width:auto;
}
/* end hiding from IE5 mac */

[reddevil]

begin is met de javascript fouten e.d. eruit te halen zou ik zeggen.

Daarna zou ik kijken naar loze 'returns' in je code, helpt best vaak om die weg te halen

[sariel]

Loze returns? Let uit aub?

Dubbele javascripts verwijderd.

De CSS fouten (filter & display) zijn IE-specifiek, en worden door IE gebruikt voor het weergeven van plaatjes in a fancy way.

[ Voor 56% gewijzigd door sariel op 09-08-2006 11:37 ]

[Boelie-Boelie]

/edit: je probleem ontstaat pas ná een klik, verkeerd gelezen.

Probeer eens

Cascading Stylesheet:

#dropmenu a:active {padding: 1px 10px 0;}

D.w.z. 2px vervangen door 0.

[ Voor 124% gewijzigd door Boelie-Boelie op 09-08-2006 13:20 . Reden: Nu een constructievere reply ]

[reddevil]

sariel schreef op woensdag 09 augustus 2006 @ 11:32:
Loze returns? Let uit aub?

Dubbele javascripts verwijderd.

De CSS fouten (filter & display) zijn IE-specifiek, en worden door IE gebruikt voor het weergeven van plaatjes in a fancy way.

Ik krijg nog steeds js foutmeldingen

Loze returns, etc geven soms loze ruimte, bv:

loze ruimte:

code:

<a href="...">
  <img src="...">
</a>

geen loze ruimte:

code:

<a href="..."><img src="..."></a>

idem dito bij <td> en </td>'s.

Daarnaast levert een <form> tag (en eindtag) soms loze ruimte.

Maar zoals hierboven gezegd wordt: je paddings

[ Voor 3% gewijzigd door reddevil op 09-08-2006 14:02 ]

[sariel]

Ik heb inderdaad opgelost dat dat vreemde balkje er zit. Bedankt

Met welke browser bekijk jij de site? Ik krijg nl. geen enkele foutmelding (op die 2 CSS IE-dingen na).

[reddevil]

IE6.0.2900.2180... maw, de laatste versie van IE6

ik krijg de melding:

regel 36, teken 2: document.getElementById(...) is geen object

Je doet:
document.getElementById("nav")

maar ik zie geen tag met id 'nav'?

[ Voor 22% gewijzigd door reddevil op 10-08-2006 10:28 ]