[css] uitklapmenu

[the_cyberspace]

Ik ben bezig om een menuutje in elkaar te steken met css. Maar ik loop tegen een probleem aan waar ik de hele avond al mee bezig ben om het op te lossen maar ik kan de oplossing maar niet vinden.

Het gaat om dit menu: klik
En hier vind je de css file: klik

Oke, nu het probleem. Zodra je op een menu item gaat staan met je muis zie je een uitklap menuutje verschijnen en hier begint mijn probleem. Het menuutje opent niet helemaal zoals ik wil, het springt iets teveel naar rechts open namelijk terwijl het de bedoeling is dat er links en rechts geen verschil is te zien.
En de eerste hyperlink in het uitklapmenu heeft bovenin geen border heeft terwijl dit wel mijn bedoeling is.

Iemand die me uit de brand kan helpen? Want ik zie door de bomen het bos even niet meer...

[To_Tall]

Ik heb zelf deze website ooit eens gemaakt...
http://web.archive.org/we...http://www.ho-yellow.com/

en zelfde probleem gehad.
Hier mijn style sheet

code:

body {
    background-color: #030040;
}

.frame {
    background-color : #FDFDE6;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    color: #000066;
    text-align: center;
}

.style2 {
    background-color : #FDFDE6;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    color: #000066;
    letter-spacing: normal;
    white-space: normal;
    padding: 5px;
    height: auto;
    width: 99%;
    margin: 5px;
    border-top: 2px ridge #000066;
    border-right: 2px ridge #000066;
    border-bottom: 2px ridge #000066;
    border-left: 2px ridge #000066;
}

.note {
    font-size: 18px;
    color: #666666;
    font-style: normal;
    font-weight: bold;
    
}

#menu {
background-color : #375BA3; 
color:black;
position : absolute; 
top : 10px; 
left : 10px; 
visibility : hidden; 
width : 150px; 
border-bottom-color : white;
border-bottom-style : solid;
border-bottom-width : 1px; 
} 
#menu2 {
background-color : #375BA3; 
color:black;
position : absolute; 
top : 10px; 
left : 10px; 
visibility : hidden; 
width : 150px; 
border-bottom-color : white;
border-bottom-style : solid;
border-bottom-width : 1px; 
} 
#menu3 {
background-color : #375BA3; 
color:black;
position : absolute; 
top : 10px; 
left : 10px; 
visibility : hidden; 
width : 150px; 
border-bottom-color : white;
border-bottom-style : solid;
border-bottom-width : 1px; 
} 
#menu4 {
background-color : #375BA3; 
color:black;
position : absolute; 
top : 10px; 
left : 10px; 
visibility : hidden; 
width : 150px; 
border-bottom-color : white;
border-bottom-style : solid;
border-bottom-width : 1px; 
} 
#menu5 {
background-color : #375BA3; 
color:black;
position : absolute; 
top : 10px; 
left : 10px; 
visibility : hidden; 
width : 150px; 
border-bottom-color : white;
border-bottom-style : solid;
border-bottom-width : 1px; 
} 

#menu6 {
background-color : #375BA3; 
color:black;
position : absolute; 
top : 10px; 
left : 10px; 
visibility : hidden; 
width : 150px; 
border-bottom-color : white;
border-bottom-style : solid;
border-bottom-width : 1px; 
} 

#navbar {
position : relative;
} 
A.nav1 {
background-color : #FDFDE6; 
color : green       ;
font : normal 8pt Geneva, Arial, Helvetica, sans-serif; 
text-decoration : none; 
border-bottom : 1px solid #C9C800;
border-left : 1px solid #C9C800; 
border-top : 1px solid #C9C800; 
border-right : 1px solid #C9C800; 
padding-left : 0; 
padding-right : 0; 
padding-top : 0; 
padding-bottom : 0; 
text-align : center; 
width : 95%; 
height: 18px;
display : block; 
} 
A.nav1:hover {
background-color : #FDFDE6;
color: green;
font : normal 8pt verdana, sans-serif;
text-decoration : none;
border-bottom : 1px solid C9C800;
border-left : 1px solid C9C800; 
border-top : 1px solid C9C800;
border-right : 1px solid C9C800; 
padding-left : 0; 
padding-right : 0; 
padding-top : 0; 
padding-bottom : 0; 
text-align : center; 
vertical-align : middle;
width : 95%;
height: 18px;
display : block; 
} 
A.menulink1 {
background-color : #5A30F6; 
color: black;
font : normal 8pt verdana, sans-serif; 
text-decoration : none; 
border-bottom : 1px solid black;
border-left : 1px solid black; 
border-top : 1px solid black; 
border-right : 1px solid black; 
padding-left : 0; 
padding-right : 0; 
padding-top : 0; 
padding-bottom : 0; 
width : 150px; 
height: 18px;
display : block; 
} 
A.menulink1:hover {
background-color : #5A30F6;
color:#ffffff;
font : normal 8pt verdana, sans-serif; 
text-decoration : none; 
border-bottom : 1px solid black; 
border-left : 1px solid black; 
border-top : 1px solid black; 
border-right : 1px solid black; 
padding-left : 0; 
padding-right : 0; 
padding-top : 0; 
padding-bottom : 0; 
width : 150px; 
height: 18px;
display : block; 
} 

.menutitle {
background-color : #D7D7D7; 
color: #375BA3;
font : normal 8pt verdana, sans-serif; 
text-decoration : none; 
border-bottom : 1px solid black;
border-left : 1px solid black; 
border-top : 1px solid black; 
border-right : 1px solid black; 
padding-left : 0; 
padding-right : 0; 
padding-top : 0; 
padding-bottom : 0; 
width : 150px; 
height: 18px;
display : block; 
} 

INPUT,SELECT,TEXTAREA {
background-color : #ffffff; 
color:#375BA3;
font : bold 8pt verdana, sans-serif; 
}

[bakakaizoku]

Wellicht niet de beste oplossing,

Cascading Stylesheet:

.navcontainer ul ul {
    width: 150px;
    height: 19px;
    float: left;
    position: relative;
    left: -1px;
}

[the_cyberspace]

mattttt schreef op zaterdag 02 februari 2008 @ 22:56:
Wellicht niet de beste oplossing,

Cascading Stylesheet:

.navcontainer ul ul {
    width: 150px;
    height: 19px;
    float: left;
    position: relative;
    left: -1px;
}

Of het netjes is.. ja dat is de vraag, maar het 1e probleem is ermee opgelost! dank!

EDIT: En ook het probleem van de border is nu opgelost

[ Voor 5% gewijzigd door the_cyberspace op 03-02-2008 08:39 ]