Bir Sayfada iki ayrı css dosyası kullanma veya çakışması

Herkese merhabalar

Ben menülerime internetten bulduğum javascript+css li bir açılır menü ekledim bu menünün css dosyasını kendi css dosyama ekliyorum fakat menünün stillerini görmüyor kendi css dosyamdaki herşeyi silip sadece menününkini kullandığımda ise açılır menü gayet iyi çalışıyor ve menünün css dosyasını başka bir klasörden çağırmayı denedim sonuç değişmedi bu şekilde
<link href="menu_style.css" rel="Stylesheet" type="text/css" />
<link href="css/style.css" rel="Stylesheet" type="text/css"/>

acaba bu neden olabilir o menü css'ndeki verilerle benimkiler çakışıyor olabilirmi nasıl yapabilirim

senin ve o menülerin css kodlarını bir ekle görelim. Büyük ihtimalle sendekilerle o menüdeki classlar aynı olduğundan etkileniyorlardır birbirlerinden.

Buyur erbilen arkadaşım bende baktım ama gözden kaçırdığım bişey var demekki





MENÜNÜN CSS'İ
--------------------------------
ul.menu {list-style:none; margin:0; padding:0;}
ul.menu {list-style:none; margin:0; padding:0}
ul.menu * {margin:0; padding:0}
ul.menu a {display:block; color:#000; text-decoration:none}
ul.menu li {position:relative; float:left; margin-right:2px}
ul.menu ul {position:absolute; top:26px; left:0; background:#d1d1d1; display:none; opacity:0; list-style:none}
ul.menu ul li {position:relative; width:148px; margin:0}
ul.menu ul li a {display:block; padding:3px 7px 5px; background-color:#d1d1d1}
ul.menu ul li a:hover {background-color:#c5c5c5}
ul.menu ul ul {left:148px; top:-1px}
ul.menu .menulink {font-weight:bold; background:url(images/nav_bg.gif); font:bold 11px "Trebuchet MS",Arial, Helvetica, sans-serif; color:#EBEBEB; width:100px;height:26px; background-repeat:no-repeat;}
ul.menu .menulink:hover, ul.menu .menuhover {background:url(images/nav_bg_hover.gif); font:bold 11px "Trebuchet MS",Arial, Helvetica, sans-serif; color:#444444; background-repeat:no-repeat; width:100px;height:26px;}
ul.menu .menulink:hover, ul.menu .menuhover2 {font:bold 11px "Trebuchet MS",Arial, Helvetica, sans-serif; color:#444444; background:url(images/nav_bg_hover.gif); background-repeat:no-repeat; width:100px;height:26px;}

ul.menu .sub {background:#d1d1d1 url(images/arrow.gif) 136px 8px no-repeat}
ul.menu .topline {border-top:1px solid #aaa}




BENİM CSS
------------------------

body{
margin:0;
font-family:Arial, Helvetica, sans-serif;


}
.top
{
background-image:url(../images/top_bg.gif);
background-repeat:repeat-x;
width:100%;
height:200px;
}
.logo
{
padding:2px 0 0 12px;


}
.tursabLogo
{
padding:2px 12px 0 0;
}
.buttonTr
{
padding:0 0 0 100px;
}
.topButton a.hover
{
background-image:url(../images/nav_bg_hover.gif);
background-repeat:no-repeat;
width:100px;
height:26px;
padding:0 0 0 2px;
font:bold 11px "Trebuchet MS",Arial, Helvetica, sans-serif;
color:#444444;
display:block;
text-align:center;
text-decoration:none;
line-height:26px;

}
.topButton a:hover
{
background-image:url(../images/nav_bg_hover.gif);
background-repeat:no-repeat;
width:100px;
height:26px;
font:bold 11px "Trebuchet MS",Arial, Helvetica, sans-serif;
color:#444444;
display:block;
text-align:center;
text-decoration:none;
line-height:26px;
}

.topButton a
{
background-image:url(../images/nav_bg.gif);
background-repeat:no-repeat;
width:100px;
height:26px;
padding:0 0 0 2px;
font:bold 11px "Trebuchet MS",Arial, Helvetica, sans-serif;
color:#EBEBEB;
display:block;
text-align:center;
text-decoration:none;
line-height:26px;
}









#bodyAnatab
{
background-repeat:repeat-x;
background-image:url(../images/body_bg.gif);
background-color:#E8E8D0;
padding:45px 0 0 0;
}
div, h1, h2, h3, h4, p, form, label, input, textarea, img, span{
margin:0; padding:0;
}

ul{
margin:0;
padding:0;
list-style-type:none;
font-size:0;
line-height:0;
}
.spacer{
clear:both;
font-size:0;
line-height:0;
}
/*------------------------------------------------main--------------------*/

/*------------------------------------------------top--------------------*/
#topmain{
width:100%;
background:url(../images/top_bg.gif) 0 0 repeat-x;
height:134px;
padding:19px 0 0 0;
}

#top{
width:958px;
margin:0 auto;
height:90px;
padding:-100px 0 0 0 ;

}
#top img.logo{
display:block;
font-size:0;
line-height:0;
padding:0 0 0 0;
float:left;
margin:-19px 8px 22px -3px;
}
#top img.tursabLogo{
display:block;
font-size:0;
line-height:0;
padding:0 0 -10px 100px;
float:right;
margin:-16px -15px -22px 665px;
}

#top p.topTxt{
display:block;
width:365px;
font-size:12px;
line-height:19px;
color:#D4F5FF;
background-color:inherit;
float:left;
padding:21px 0 0 0;
}
#top p.topTxt span.yellow{
font-weight:bold;
color:#F4F23C;
background-color:inherit;
}
#top p.topTxt span.red{
font-weight:normal;
color:#fff;
background-color:#B70D0D;
padding:2px;
}
#top form{
background:url(../images/serch_bg.gif) 0 0 no-repeat;
width:249px;
height:47px;
float:right;
padding:17px 8px 0 53px;
}
#top form input.txtBox{
width:184px;
height:15px;
border-bottom:#D4D0C8 solid 1px;
border-right:#D4D0C8 solid 1px;
border-left:#404040 solid 1px;
border-top:#404040 solid 1px;
background-color:#fff;
color:#000;
float:left;
padding:4px 0 0 14px;
font-size:10px;
margin:0 0 5px 0;
line-height:15px;
}
#top form input.go{
background:url(../images/btn_go.gif) 0 0 no-repeat;
width:36px;
height:21px;
float:right;
font-size:12px;
line-height:21px;
font-weight:bold;
color:#333333;
background-color:#0D6C8A;
border:none;
cursorointer;
margin:0 0 5px 0;
}
#top form a{
font-size:11px;
line-height:14px;
font-weight:bold;
color:#D6DF43;
background-color:#0D6C8A;
float:left;
display:block;
width:89px;
text-decoration:none;
}
#top form a:hover{
text-decoration:underline;
}
#top ul.nav{
width:550px;
height:26px;
padding:0 0 0 210px;
float:left;
margin:-24px 0 0 0 ;
}
#top ul.nav li{
float:left;
margin:0 3px 0 0;
font-size:0;
line-height:0;
}
#top ul.nav li.noMargin{
margin:0;
}
#top ul.nav li a{
display:block;
background:url(../images/nav_bg.gif) 0 0 no-repeat;
width:82px;
height:26px;
font:bold 11px/26px "Trebuchet MS",Arial, Helvetica, sans-serif;
color:#EBEBEB;
background-color:inherit;
text-decoration:none;
text-align:center;
}
#top ul.nav li a:hover{
background:url(../images/nav_bg_hover.gif) 0 0 no-repeat;
color:#444444;
background-color:inherit;
}
#top ul.nav li a.hover{
display:block;
background:url(../images/nav_bg_hover.gif) 0 0 no-repeat;
width:82px;
height:26px;
font:bold 11px/26px "Trebuchet MS",Arial, Helvetica, sans-serif;
color:#444444;
background-color:inherit;
text-decoration:none;
text-align:center;
cursor:text;
}
#top ul.sub{
width:892px;
height:29px;
padding:0 0 0 65px;
float:left;
}
#top ul.sub li{
float:left;
background:url(../images/nav_div.gif) right top no-repeat;
padding:0 2px 0 0;
}
#top ul.sub li.noImg{
background-image:none;
}
#top ul.sub li a{
padding:0 14px;
font:normal 11px/29px "Trebuchet MS",Arial, Helvetica, sans-serif;
color:#1F2123;
background-color:inherit;
text-decoration:none;
}
#top ul.sub li a:hover{
color:#B70D0D;
background-color:inherit;
}
/*------------------------------------------------top--------------------*/

/*------------------------------------------------body--------------------*/
#bodyMain{
width:100%;
background:url(../images/body_bg.gif) 0 0 repeat-x #E8E8D0;
color:#000;
padding:35px 0 28px 0;
}
#body{
width:600px;
margin:0 auto;
padding-right:300px;
background-attachment: scroll;
/*background-image: url(../images/innerbg.gif);*/
background-repeat: repeat-y;
background-position: -23px;
}
#body2{

margin:0 auto;
padding-right:660px;
background-attachment: scroll;
/*background-image: url(../images/innerbg.gif);*/
background-repeat: repeat-y;
background-position: -23px;
}
/*------------------------------------------------left--------------------*/
#left{
width:202px;
float:left;
padding:35px 0 0 7px;
}
#left h2{
display:block;
width:186px;
height:22px;
background:url(../images/left_head_1px.gif) 0 0 repeat-x;
border-left:#404040 solid 1px;
border-right:#404040 solid 1px;
padding:4px 0 0 14px;
margin:0 0 1px 0;
}
#left h2 span{
background:url(../images/arrow.gif) 0 3px no-repeat;
padding:0 0 0 16px;
font-size:12px;
font-weight:bold;
color:#F3F3F3;
background-color:inherit;
}
#left ul{
width:202px;
}
#left ul li{
margin:0 0 1px 0;
}
#left ul li a{
display:block;
background:url(../images/arrow_green.gif) 19px 9px no-repeat #DBDBBE;
padding:0 21px 0 31px;
font-weight:normal;
color:#2F2F20;
font-size:11px;
line-height:24px;
text-decoration:none;
}
#left ul li a span.bg{
background-color:#F3F3DD;
color:#000;
width:15px;
height:15px;
font:normal 10px/15px Tahoma, Arial, Helvetica, sans-serif;
text-align:center;
float:right;
margin:4px 0 0 0;
}
#left ul li a span.nor{
color:#000;
background-color:inherit;
font:normal 10px/15px Tahoma, Arial, Helvetica, sans-serif;
float:right;
margin:4px 0 0 4px;
}
#left ul li a:hover{
color:#2F2F20;
background-color:#C6C6A5;
}
#left ul li a:hover span.bg{
color:#2F2F20;
background-color:#C6C6A5;
}
#left ul li a:hover span.nor{
color:#2F2F20;
background-color:#C6C6A5;
}
#left form{
width:210px;
padding:5px 15px 41px 15px;
background-color:#D2D2B4;
color:#000;
}
#left form label{
display:block;
font:bold 11px/23px Arial, Helvetica, sans-serif;
float:left;
}
#left form input.txtBox{
width:208px;
height:19px;
background-color:#fff;
color:#000;
border-bottom:#D4D0C8 solid 1px;
border-right:#D4D0C8 solid 1px;
border-left:#808080 solid 1px;
border-top:#808080 solid 1px;
float:left;
}
#left form a{
display:block;
font:bold 11px/21px Arial, Helvetica, sans-serif;
float:left;
color:#945E02;
background-color:inherit;
text-decoration:none;
margin:4px 0 0 0;
}
#left form a:hover{
text-decoration:underline;
}
#left input.login{
background:url(../images/btn_login.gif) 0 0 no-repeat;
width:66px;
height:21px;
float:right;
font:bold 11px/21px Arial, Helvetica, sans-serif;
color:#F2F2E2;
background-color:#D2D2B4;
border:none;
cursorointer;
margin:4px 0 0 0;
}
/*------------------------------------------------left--------------------*/

/*------------------------------------------------sag--------------------*/
#sag{
width:202px;
float:right;
padding:35px 3px 0 18px;

}
#sag h2{
display:block;
width:186px;
height:22px;
background:url(../images/left_head_1px.gif) 0 0 repeat-x;
border-left:#404040 solid 1px;
border-right:#404040 solid 1px;
padding:4px 0 0 14px;
margin:0 0 1px 0;
}
#sag h2 span{
background:url(../images/arrow.gif) 0 3px no-repeat;
padding:0 0 0 16px;
font-size:12px;
font-weight:bold;
color:#F3F3F3;
background-color:inherit;
}
#sag ul{
width:202px;
}
#sag ul li{
margin:0 0 1px 0;
}
#sag ul li a{
display:block;
background:url(../images/arrow_green.gif) 19px 9px no-repeat #DBDBBE;
padding:0 21px 0 31px;
font-weight:normal;
color:#2F2F20;
font-size:11px;
line-height:24px;
text-decoration:none;
}
#sag ul li a span.bg{
background-color:#F3F3DD;
color:#000;
width:15px;
height:15px;
font:normal 10px/15px Tahoma, Arial, Helvetica, sans-serif;
text-align:center;
float:right;
margin:4px 0 0 0;
}
#sag ul li a span.nor{
color:#000;
background-color:inherit;
font:normal 10px/15px Tahoma, Arial, Helvetica, sans-serif;
float:right;
margin:4px 0 0 4px;
}
#sag ul li a:hover{
color:#2F2F20;
background-color:#C6C6A5;
}
#sag ul li a:hover span.bg{
color:#2F2F20;
background-color:#C6C6A5;
}
#sag ul li a:hover span.nor{
color:#2F2F20;
background-color:#C6C6A5;
}
#sag form{
width:210px;
padding:5px 15px 41px 15px;
background-color:#D2D2B4;
color:#000;
}
#sag form label{
display:block;
font:bold 11px/23px Arial, Helvetica, sans-serif;
float:left;
}
#sag form input.txtBox{
width:208px;
height:19px;
background-color:#fff;
color:#000;
border-bottom:#D4D0C8 solid 1px;
border-right:#D4D0C8 solid 1px;
border-left:#808080 solid 1px;
border-top:#808080 solid 1px;
float:left;
}
#sag form a{
display:block;
font:bold 11px/21px Arial, Helvetica, sans-serif;
float:left;
color:#945E02;
background-color:inherit;
text-decoration:none;
margin:4px 0 0 0;
}
#sag form a:hover{
text-decoration:underline;
}
#sag input.login{
background:url(../images/btn_login.gif) 0 0 no-repeat;
width:66px;
height:21px;
float:right;
font:bold 11px/21px Arial, Helvetica, sans-serif;
color:#F2F2E2;
background-color:#D2D2B4;
border:none;
cursorointer;
margin:4px 0 0 0;
}
/*------------------------------------------------sag--------------------*/



/*------------------------------------------------right--------------------*/
#right{
width:600px;
padding:0 0 0 164px;

}
#green{
width:662px;
background:url(../images/green_bg.jpg) 0 0 no-repeat;
height:181px;
margin:0 0 16px 0;
padding:34px 0 0 32px;
}
#green h2{
display:block;
background:url(../images/why_ecode.gif) 0 0 no-repeat;
height:63px;
margin:0 0 10px 0;
text-indent:-2000px;
}
#green p{
display:block;
font:normal 13px/18px Arial, Helvetica, sans-serif;
color:#FFFFC1;
background-color:inherit;
width:256px;
}
#green p span{
font-weight:bold;
color:#fff;
background-color:inherit;
}
#right h3{
display:block;
height:30px;
border-bottom:#C5C5A8 solid 1px;
font:bold 28px/25px Arial, Helvetica, sans-serif;
color:#333333;
background-color:inherit;
margin:0;
}
#right h4{
display:block;
font:bold 17px/46px Arial, Helvetica, sans-serif;
color:#6B1420;
background-color:inherit;
margin:0;
}
#right p.rightTxt1{
display:block;
font:bold 16px/23px Arial, Helvetica, sans-serif;
color:#B3770F;
background-color:inherit;
margin:0 0 18px 0;
}
#right p.rightTxt1 span{
font:normal 13px/23px Arial, Helvetica, sans-serif;
color:#000;
background-color:inherit;
}
#right p.rightTxt2{
display:block;
font:normal 13px/19px Arial, Helvetica, sans-serif;
color:#000;
background-color:inherit;
margin:0 0 28px 0;
}
#right p.rightTxt2 span{
color:#000;
background-color:#F4F4E3;
}
#flash{
width:631px;
background:url(../images/flash_1px.gif) 0 0 repeat-x;
padding:22px 32px 17px 32px;
}
#flash img{
float:left;
font-size:0;
line-height:0;
}
#flash ul{
width:255px;
height:15px;
padding:0 230px 0 0;
float:right;
margin:0 0 10px 0;
}
#flash ul li.redBg{
display:block;
background:url(../images/red_bg.gif) 0 0 no-repeat;
width:76px;
height:15px;
font:bold 10px/15px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#fff;
background-color:inherit;
text-align:center;
margin:0 3px 0 0;
float:left;
}
#flash ul li.blackBg{
display:block;
background:url(../images/black_bg.gif) 0 0 no-repeat;
width:171px;
height:15px;
font:bold 10px/15px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#fff;
background-color:inherit;
margin:0;
float:left;
padding:0 0 0 5px;
}
#flash p{
float:right;
font:bold 13px/18px Arial, Helvetica, sans-serif;
font-style:italic;
color:#056888;
background-color:inherit;
display:block;
width:483px;
margin:0 0 3px 0;
}
#flash p span{
color:#959E07;
background-color:inherit;
}
#flash a{
display:block;
background:url(../images/read_more_bg.gif) 0 0 no-repeat;
width:76px;
height:21px;
font:bold 11px/21px Arial, Helvetica, sans-serif;
color:#F2F2E2;
background-color:inherit;
text-decoration:none;
margin:0 0 0 181px;
text-align:center;
float:right;
}
#flash a:hover{
color:#000;
background-color:inherit;
}
/*------------------------------------------------right--------------------*/

/*------------------------------------------------body--------------------*/

/*------------------------------------------------footer--------------------*/
#footerMain{
width:100%;
height:109px;
background:url(../images/footer_bg.gif) 0 0 repeat-x;
}
#footer{
width:958px;
margin:0 auto;
position:relative;
height:109px;
}
#footer ul{
width:712px;
position:absolute;
left:252px;
top:18px;
}
#footer ul li{
float:left;
font:normal 11px/18px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#fff;
background-color:inherit;
}
#footer ul li a{
padding:0 10px;
font:normal 11px/18px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#fff;
background-color:inherit;
text-decoration:none;
}
#footer ul li a:hover{
text-decoration:underline;
}
#footer p.copyright{
font:normal 11px/18px "Trebuchet MS", Arial, Helvetica, sans-serif;
position:absolute;
left:261px;
top:37px;
width:230px;
color:#FEDC3B;
background-color:inherit;
}
#footer p.design{
display:block;
width:245px;
height:18px;
padding:0;
position:absolute;
left:261px;
top:58px;
font:bold 17px/18px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#F5F5C7;
background-color:inherit;
}
#footer p.design a.link{
font:bold 17px/18px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#F5F5C7;
background-color:inherit;
text-decoration:none;
padding:2px;
}
#footer p.design a.link:hover{
color:#fff;
background-color:#000;
}
#footer a.xhtml{
display:block;
background:url(../images/xhtml_bg.gif) 0 0 no-repeat;
width:66px;
height:21px;
position:absolute;
left:0;
top:18px;
font:bold 12px/21px Arial, Helvetica, sans-serif;
color:#B70D0D;
background-color:inherit;
text-decoration:none;
text-align:center;
}
#footer a.xhtml:hover{
color:#000;
background-color:inherit;
}
#footer a.css{
display:block;
background:url(../images/xhtml_bg.gif) 0 0 no-repeat;
width:66px;
height:21px;
position:absolute;
left:72px;
top:18px;
font:bold 12px/21px Arial, Helvetica, sans-serif;
color:#B70D0D;
background-color:inherit;
text-decoration:none;
text-align:center;
}
#footer a.css:hover{
color:#000;
background-color:inherit;

hocam kodlarını okumadıum fazla zamanım yok ama şöyle bahsediyim kısaca. Eğer iki cssde de aynı seçicileri kullandıysan çakışma yapar. Peki hangisi etkili olur.css ini sayfana tanıtırken en son tanıttığın css deki kodlar geçerli olur. Yani başka klasör aynı klasör farketmez kaçıncı satırda tanımladığın çok önemli.

Bu mantık html in kodları yukarıdan aşağıya doğru okumasından ve uygulamasından kaynaklanır. Yalnız bu yapınında bozulduğu anlar vardır.

Mesela " #top ul " ile " ul " seçicisini karşılaştırırsak. "#top ul" seçicisi alttada olsa üsttede olsa her zaman ul dan daha kıymetlidir.

o zaman senin yapman gereken ul.menu classının başına hangi divin içerisinde duruyoprsa onun idsini vermek olucaktır.

#sol ul.menu {} gibi yani.
Böyle yaparsan çakışma olmayacaktır.

Umarım yardımcı olur.

Kesinlikle katılıyorum diyecektim ama kodlara baktığımda böyle bir durum göremedim

Arkadaşlar kendi css dosyamdaki bu kodla çakışma oluyormuş onu silince düzeldi herkese teşekkür ederim
ul{
margin:0;
padding:0;
list-style-type:none;
font-size:0;
line-height:0;
}

Adam 2010'da yazmış benim şimdi işimi gördü valla bu R10 çok faydalı