CODEWITHSUNDEEP
htmlcss
WVW
WVW

Reputation: 231

Nav bar width/ CSS

How can menu_sub_a inherit menu_li width and height without javascript? I tried to use inheriton menu_sub_a class but that didn't work.

HTML:

<li class="menu_li"><a class="menu_drop_a" href="">Gold</a>
  <ul class="menu_sub_ul">
   <li><a class="menu_sub_a" href="">First</a></li>
   <li><a class="menu_sub_a" href="">Second</a></li>
   <li><a class="menu_sub_a" href="">Third</a></li>
  </ul>
 </li>

CSS:

li.menu_li {
display: inline;
float: right;
width: auto;
height: auto;
}
a.menu_a, a.menu_drop_a {
display: block;
width: auto;
height: auto;
text-decoration: none;
font-family: Century Gothic,sans-serif;
font-size: 22px;
color: #787878;
background-color: #3A3A3A;
padding: 0.7em 0.95em;
border-right: 1px solid #323232;
}
ul.menu_sub_ul {
list-style-type: none;
position: absolute;
top: 58px;
}
a.menu_sub_a {
width: 100%;
height: 100%;
display: none;
line-height: 50px;
text-align: center;
text-decoration: none;
font-family: Century Gothic,sans-serif;
font-size: 22px;
color: #787878;
background-color: #323232;
border-top: 1px solid #787878;
}

Upvotes: 1

Views: 52

Answers (2)

dfsq
dfsq

Reputation: 193261

.menu_li should be positioned relatively, and .menu_sub_ul should have width: 100%:

ul.menu_sub_ul {
    list-style-type: none;
    position: absolute;
    top: 58px;
    left: 0;
    width: 100%;
}

Demo: http://jsfiddle.net/4jW73/

Upvotes: 2

Fiodor
Fiodor

Reputation: 806

Since menu_sub_a is inside menu_li you can just add width:100% and height 100% to menu_sub_a, because this is percentage of the containing div.

Upvotes: 0

Related Questions