Need help with the Generic template

[vasy]

Hope you really can help me because i have tried every different combination but i can't get it to work.

When i change the menu color it also change the color of the drop down menu.

I want the color of the menu to be White with black borders and text.

On hover of the menu i want the menu link to change color to black with white text.

The dropdown should be white background with black text (This i can't get to work, because if i want the menu do be black the dropdown automaticly becomes black.

Also i would like to remove so the when i go over the dropdown menu links the area does not get wider then the dropdown menu. Right now when you go over e dropdown menu link it stretches out 10-20%

Code: [Select]

/* andreas08 - an open source xhtml/css website layout by Andreas Viklund - http://andreasviklund.com . Free to use in any way and for any purpose as long as the proper credits are given to the original designer. Version: 1.0, November 28, 2005 */

/**************** Body and tag styles ****************/

*{margin:0; padding:0;}

body{
font:76% Verdana,Tahoma,Arial,sans-serif;
line-height:1.4em;
text-align:center;
color:#000000;
background:#000000;
margin: 0px 0px 10px 0px;
}

a{
color:#000000;
font-weight:bold;
text-decoration:none;
background-color:inherit;
}

a:hover{color:#000000; text-decoration:none; background-color:inherit;}
a img{border:none;}

p{padding:0 0 1.6em 0;}
p form{margin-top:0; margin-bottom:20px;}

img.left,img.center,img.right{padding:4px; border:1px solid #a0a0a0;}
img.left{float:left; margin:0 12px 5px 0;}
img.center{display:block; margin:0 auto 5px auto;}
img.right{float:right; margin:0 0 5px 12px;}

/**************** Header and navigation styles ****************/

#container{
width:760px;
margin:20px auto;
padding:1px 0;
text-align:left;
background:#ffffff;
color:#303030;
border:2px solid #a0a0a0;
}

#header{
height:200px;
width:758px;
margin:0 1px 1px 1px;
background:#ffffff;
color:#ffffff;
}

#header h1{
padding:35px 0 0 20px;
font-size:2.4em;
background-color:inherit;
color:#ffffff;
letter-spacing:-2px;
font-weight:normal;
}

#header h1 a{
color:#ffffff;
text-decoration:none;
}

#header h1 a:hover {
color:#000000; text-decoration:none; background-color:inherit;
}

#header h2{
margin:10px 0 0 40px;
font-size:1.4em;
background-color:inherit;
color:#000000;
letter-spacing:-1px;
font-weight:normal;
}

#navigation{
height:2.2em;
line-height:2.2em;
width:758px;
margin:0 1px;
background:#000000;
color:#ffffff;
}

#navigation li{
float:left;
list-style-type:none;
border-right:1px solid #ffffff;
white-space:nowrap;
display: inline;
position: relative;
}

#navigation li a{
display:block;
padding:0 10px;
font-size:0.8em;
font-weight:normal;
text-transform:uppercase; /* transformed text to uppercase */
text-decoration:none;
background-color:inherit;
color: #ffffff;
}

* html #navigation a {width:1%;}

#navigation .selected,#navigation a:hover{
background:#ffffff;
color:#000000;
text-decoration:none;
}

/* Navigation for drop downs*/

    ul li#bypass {
        display            : none;
    }

    #navigation ul {
        height            : 18px; /* you will also need to change #navigation a padding and #navigation li ul margin-top*/
        width            : 100%;
        margin            : 0;
        padding            : 0;
        background:#000000; /* background coor of the drop downs */
        color: #ffffff;
        list-style-type    : none;
    }

        #navigation li ul {
            border-top        : 1px solid #ffffff;
            margin-top        : 3px;        /* How far down the drop down menus start  - you will also need to change #navigation ul height and #navigation a padding */
            display            : none;
            left            : 0;
            position        : absolute;
            width            : 152px;        /* width of the drop down menus? */
            height            : auto;
        }
       
        #navigation li li {
            width            : 150px;        /* width of the drop down menus? */
            border            : 1px solid #FFFFFF; /* color of drop down borders */
            border-top        : 0;
        }
       
        #navigation li li a {
        display:block;
        padding:0 10px;
        font-size:0.8em;
        font-weight:normal;
        text-transform:uppercase; /* transformed text to uppercase */
        text-decoration:none;
        background-color:inherit;
        color: #ffffff;
        border-right: none;
        width: 145px;
        }
       
        #navigation a:hover, #navigation a:focus {
        background-color:#ffffff;
        color: #000000;
        }
       
        #navigation .sel a {
        background-color:#000000;
        color: #ffffff;
        }

        #navivation a:active {
        background-color:#ffffff;
        color: #000000;
        }

/**************** Content styles ****************/

#content{
float:left;
width:530px;
font-size:0.9em;
padding:20px 0 0 20px;
}

#content h1{
display:block;
margin:0 0 16px 0;
font-size:2.4em;
font-weight:normal;
letter-spacing:-1px;
color:#000000;
background-color:inherit;
}

#content h2{
display:block;
margin:0 0 16px 0;
font-size:1.7em;
font-weight:normal;
letter-spacing:-1px;
color:#000000;
background-color:inherit;
}

#content h2 a{font-weight:normal;}
#content h3{margin:0 0 5px 0; font-size:1.4em; letter-spacing:-1px;}
#content a:hover,#subcontent a:hover{text-decoration:underline;}
#content ul,#content ol{margin:0 5px 16px 35px;}
#content dl{margin:0 5px 10px 25px;}
#content dt{font-weight:bold; margin-bottom:5px;}
#content dd{margin:0 0 10px 15px;}

/**************** Sidebar styles ****************/

#subcontent{
float:right;
width:170px;
padding:20px 20px 10px 0;
line-height:1.4em;
}

#subcontent h2{
display:block;
margin:0 0 15px 0;
font-size:1.6em;
font-weight:normal;
text-align:left;
letter-spacing:-1px;
color:#000000;
background-color:inherit;
}

#subcontent p{margin:0 0 16px 0; font-size:0.9em;}

/**************** Menublock styles ****************/

.menublock{margin:0 0 20px 8px; font-size:0.9em;}
.menublock li{list-style:none; display:block; padding:2px; margin-bottom:2px;}
.menublock li a{font-weight:bold; text-decoration:none;}
.menublock li a:hover{text-decoration:none;}
.menublock li ul{margin:3px 0 3px 15px; font-size:1em; font-weight:normal;}
.menublock li ul li{margin-bottom:0;}
.menublock li ul a{font-weight:normal;}

/**************** Searchbar styles ****************/

#searchbar{margin:0 0 20px 0;}
#searchbar form fieldset{margin-left:10px; border:0 solid;}

#searchbar #s{
height:1.2em;
width:110px;
margin:0 5px 0 0;
border:1px solid #a0a0a0;
}

#searchbar #searchbutton{
width:auto;
padding:0 1px;
border:1px solid #808080;
font-size:0.9em;
text-align:center;
}

/**************** Footer styles ****************/

#footer{
clear:both;
width:758px;
padding:5px 0;
margin:0 1px;
font-size:0.9em;
color:#f0f0f0;
background:#000000;
}

#footer p{padding:0; margin:0; text-align:center;}
#footer a{color:#f0f0f0; background-color:inherit; font-weight:bold;}
#footer a:hover{color:#ffffff; background-color:inherit; text-decoration: underline;}

/**************** Misc classes and styles ****************/

.splitcontentleft{float:left; width:48%;}
.splitcontentright{float:right; width:48%;}
.clear{clear:both;}
.small{font-size:0.8em;}
.hide{display:none;}
.textcenter{text-align:center;}
.textright{text-align:right;}
.important{color:#f02025; background-color:inherit; font-weight:bold;}

.box{
margin:0 0 20px 0;
padding:10px;
border:1px solid #c0c0c0;
background-color:#fafbfc;
color:#505050;
line-height:1.5em;
}

[DGEC]

Actually, you might want to consider switching to the AllCSS2 template, because Generic has it's own menu system that didn't work very well with my test of WB 2.7 rc2 and seems to have clobbered my 2.6.7 install. Might have been the rc2 problems though, not sure.

Plus, it's all CSS as well.  Well, except for the .htc file for lower versions of IE to get hover effects.