Copy 2 en plak deze CSS code aan uw CSS-bestand of toevoegen aan de webpagina waar u de stijlen te definiëren :

# container
{ width : 780px ; margin : 0 auto ; position: relative ; }

# content
{ width : 520px ; min - height : 500px ;} a: link , a : visited {color : # 27b ; text - decoration : none; } a : hover { text - decoration : te onderstrepen ; } a img { border - width : 0 ; } # topnav { padding : 10px 0px 12px ; font-size : 11px ; line-height : 23px ; text-align : right ; } # topnav a.signin { background : # 88bbd4 ; padding : 4px 6px url ( " images /signin - nav - bg - ie.png " ) no -repeat 0 0 ; * padding : 12px 4px 6px ; } # topnav a.signin : hover { background : # 59B ​​; * achtergrond : transparant url ( " images /signin - nav - bg - hover - ie.png " ) no -repeat 0 0 ; * padding : 12px 4px 6px ; } # topnav a.signin , # topnav a.signin : hover { * background-position : 0 3px belangrijk ; }

a.signin
{position : relatieve ; margin -left : 3px ; } a.signin overspanning 50 % ; padding : 16px 4px 6px 0 ; } # topnav A.MENU open {background : # ddeef6 belangrijk ; color: # 666 van belang ; outline : none ; } # small_signup {weergeven : inline ; float : none ; lijn - height : 23px ; margin : 25px 0 0 ; width : 170px ; } a.signin.menu open overspanning { background-image : url ( " images /toggle_up_dark.png " ) ; color: # 789 ; }

deze CSS- code definieert de " Sign In " knop .

Kopieer 3 en plak deze CSS code aan uw CSS-bestand of naar de webpagina waar u de stijlen te definiëren om te bepalen de log - in vorm :

# signin_menu transparant ; text-align : left ; padding : 12px ; top : 24.5px ; rechts : 0px ; margin - top : 5px ; margin-right : 0px ; * margin-right : - 1px ; color: # 789 ; font-size : 11px ; }

# signin_menu ingang
[ type = text ] , # signin_menu ingang [ type = password ] { display: block ; - moz - border - radius : 4px ; - webkit - border - radius : 4px ; grens : 1px solid # ACE ; font-size : 13px ; margin : 0 0 5px ; padding : 5px ; width : 203px ; } # signin_menu p { margin : 0 ; } # signin_menu a {color : # 6AC ; } # signin_menu label { font-weight : normal ; } # signin_menu p.remember { padding : 10px 0 ; } # signin_menu p.forgot , # signin_menu p.complete { clear: both ; margin : 5px 0 ; } # signin_menu pa {color : # 27B ! belangrijk ; } # signin_submit { - moz - border - radius : 4px ; - webkit - border - radius : 4px ; background : # 39d url ( ' images /bg - btn - blue.png ' ) repeat - x scrollen 0 0 ; grens : 1px solid # 39D ; color: # fff ; text - shadow : 0 - 1px 0 # 39d ; padding : 10px 4px 5px ; font-size : 11px ; margin : 0 0 0 5px ; font-weight : bold ; } # signin_submit :: - moz -focus - innerlijke { padding : 0 ; border : 0 ; } # signin_submit : hover , # signin_submit : focus { background-position : 0 - 5px ; cursor : pointer ; }
4

Maak een nieuwe JavaScript-bestand . Gebruik deze JavaScript-code aan te tonen of verbergen van de drop-down log -in-box wanneer gebruikers klikken op de " Sign In " knop :

< script src = type " javascripts /jquery.js " = " ; . . text /javascript " . > < /script >