When adding style to bmenu more importantly the margin/padding, font size,font weight to btmenu it apply them too all the ones under it like submenu li . How can I separate the styles to not apply them to submenues?
I dont want the text to look like its 50 pixels down, dont want the font weight or centered yet.. how can I only apply style to the classes and not effect the others?????.
Whatever style I apply to:
btmenu li a
it will apply to
submenu li a
and I dont want that I want each style separate.
#btmenu{
z-index:1;
position:relative;
width:100%;
list-style: none;
margin:0;
padding:0;
height:62px;
text-align:center;/* this is applied to submenu*/
}
#btmenu > a{
font-weight:bold;/* this is applied to submenu*/
font-size:15px;/* this is applied to submenu*/
height:62px;/* this is applied to submenu*/
line-height:62px;/* this is applied to submenu*/
text-align:center;/* this is applied to submenu*/
}
ul#btmenu > li{
padding:0;
margin:0;
display: inline;
}
#btmenu li > a{
margin-left:1%;
margin-right:1%;
text-align:center;
display:inline-block;
text-decoration:none;
color:#000;
padding-left:1%;
padding-right:1%;
text-transform:uppercase;
vertical-align: middle;
}
#btmenu > li > a:hover{
background-color:#333;
color:#FFF;
}
/* SUB MENU */
.sub_menu{
display:none;
}
#btmenu > li:hover > .sub_menu{
position:absolute;
display:inline-block;/*no need for height or width*/
vertical-align: middle;
margin:0 auto;
text-align:center;
background-color:#666;
list-style: none;
margin:0;
padding:0;
display:table;
padding-right:3px;
border:#333 solid 2px;
border-radius: 4px;
}
.sub_menu > li{
margin:0px;
border: 1px solid blue;
display:inline-block;
vertical-align: middle;
height:125px;
width:47%;
}
.sub_menu > li a{
display:block;
vertical-align: middle;
height:200px;
width:200px;
text-decoration:none;
color:#FFF;
margin:0;/* not applied??*/
padding:0;/* not applied???*/
}
.ee{margin:0;
padding:0;}<ul id="btmenu">
<li class="top_quote">
<a href="services">services</a>
<ul class="sub_menu">
<li class=""><a href="services"><img src="" width="189" height="189" alt=""></a></li>
<li class=""><a href="services"><img src="" width="189" height="189" alt=""></a></li>
<li class=""><a href="services"><img src="" width="189" height="189" alt=""></a></li>
<li class=""><a href="services"><img src="" width="189" height="189" alt=""></a></li>
<li class=""><a href="services"><img src="" width="189" height="189" alt=""></a></li>
</ul>
</li>
<li class="top_quote">
<a href="locations">locations</a>
<ul class="sub_menu">
<li class="ee"><a href="tel:16142585555">test1</a></li>
<li class="ee"><a href="tel:16148411111 ">test2</a></li>
<li class="ee"><a href="tel:16148859957">test3</a></li>
<li class="ee"><a href="tel:16148689999">test4</a></li>
<li class="ee"><a href="tel:16144212222">test5</a></li>
<li class="ee"><a href="tel:16144978888">test6</a></li>
<li class="ee"><a href="tel:16142585555">test7</a></li>
<li class="ee"><a href="tel:16148690006">test8</a></li>
</ul>
</li>
<li class="top_quote"><a href="partners">partners</a>
<ul class="sub_menu">
<li class=""><a href=""><img src="" width="189" height="189" alt=""></a></li>
<li class=""><a href=""><img src="" width="189" height="189" alt=""></a></li>
<li class=""><a href=""><img src="" width="189" height="189" alt=""></a></li>
<li class=""><a href=""><img src="" width="189" height="189" alt=""></a></li>
<li class=""><a href=""><img src="" width="189" height="189" alt=""></a></li>
<li class=""><a href=""><img src="" width="189" height="189" alt=""></a></li>
<li class=""><a href=""><img src="" width="189" height="189" alt=""></a></li>
<li class=""><a href=""><img src="" width="189" height="189" alt=""></a></li>
</ul>
</li>
<li class="top_quote"><a href="ourwork">our work</a></li>
<li class="top_quote"><a href="contact">contact</a></li>
</ul>moved the style from .btmenu to
#btmenu > a {
font-weight:bold;/* this is applied to submenu*/
font-size:15px;/* this is applied to submenu*/
height:62px;/* this is applied to submenu*/
line-height:62px;/* this is applied to submenu*/
}