remove height=0px
from #navigation_conatiner_7
CSS Not showing background (overflow:auto not helping)
-
26-06-2022 - |
Question
The background and border of #navigation_conatiner_7 are not visible. I tried adding overflow:auto to its parent, and it just displays scroll bars. Later I tried adding the same to it, but then it is completely hidden. Since I have run out of ideas, I thought maybe someone here might have the answer.
Here is the code: http://jsfiddle.net/Tamaki/my5GV/
HTML:
<div id="navigation">
<div id="holder">
<div id="navigation_category_2">articles</div>
<div id="navigation_category_3">columns</div>
<div id="navigation_category_7">submit
<div id="navigation_container_7">
<div class="navigation_link"><span style="margin-left: 10px;">submit</span></div>
<div class="navigation_link"><span style="margin-left: 10px;">applications</span></div>
<div class="navigation_link"><span style="margin-left: 10px;">points</span></div>
</div>
</div>
</div>
</div>
CSS:
#navigation {
top: 0px !important;
width: 100%;
height: 60px;
background-color: #eee;
border-bottom: solid 3px #dd6a0c;
position: fixed;
}
#holder {
width: 960px;
margin: 0 auto;
height: inherit;
}
/* Navigation
============================*/
#navigation_category_2, #navigation_category_3, #navigation_category_7 {
height: 60px;
float: left;
width: 120px;
text-align: center;
margin: 0 7px 0 8px;
cursor: pointer;
line-height: 60px;
font-family: Impact, Arial, sans-serif;
color: #111;
font-size: 18px;
}
#navigation_category_2:hover, #navigation_category_3:hover, #navigation_category_7:hover {
background-color: #dd6a0c;
color: #eee;
}
#navigation_category_7:hover {
background-color: #eee;
color: #111;
}
#navigation_container_7 {
top: 0;
position: relative;
display: none;
width: 160px;
left: -24px;
border: 3px solid #dd6a0c;
border-top: none;
height: 0px;
background-color: #eee;
}
#navigation_category_7:hover #navigation_container_7 {
display: block;
}
.navigation_link {
top: 0;
width: inherit;
height: 26px;
text-align: left;
font-size: 11px;
font-family: Verdana;
color: #111;
line-height: 26px;
text-transform: capitalize;
font-weight: bold;
}
.navigation_link:hover {
background-color: #dd6a0c;
color: #eee;
}
Solution
OTHER TIPS
Make changes in following id :
#navigation_category_7:hover {
background-color: #dd6a0c;
color: #111;
}
Problem with the code was that the color you saw was actually derived from the links pasted inside container.
Added this
#navigation_category_7 #navigation_container_7 .navigation_link {
background-color: #eee;
}
and it works now. Check http://jsfiddle.net/my5GV/2/
Try to change the css:
#navigation_category_2:hover, #navigation_category_3:hover, #navigation_category_7:hover {
background-color: #dd6a0c;
color: #eee;
}
#navigation_category_7:hover {
background-color: #eee;
color: #111;
}
to this
#navigation_category_2:hover, #navigation_category_3:hover {//you were calling #navigation_category_7 here to
background-color: #dd6a0c;
color: #eee;
}
#navigation_category_7:hover {
background-color: #eee; //this color is giving you the error, change if to 6 letter or rgba
color: #111;
}
you shouldn't be using 's for menus. Try using the ul and li tags instead something like this:
html:
<ul>
<li><a href="LINK">MENU#1</a></li>
<li><a href="LINK">MENU#2</a>
<ul class="submenu-1">
<li><a href="LINK">MENU#3</a>
<ul class="submenu-2">
<li><a href="LINK">MENU#4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="LINK">MENU#5</a>
<ul class="submenu-1">
<li><a href="LINK">MENU#6</a></li>
</ul>
</li>
</ul>
css:
ul li {
// All menus li
}
ul li ul { // All submenus
margin-top: 10px;
margin-left: 10px;
}
ul li ul li { // All submenus li
}
ul.submenu-1 { // UL > LI > UL
}
ul.submenu-2 { // UL > LI > UL > LI > UL
}
change
#navigation_category_2:hover,
#navigation_category_3:hover,
#navigation_category_7:hover {
background-color: #dd6a0c;
color: #eee;
}
to
#navigation_category_2:hover,
#navigation_category_3:hover,
#navigation_category_7:hover {
background-color: #dd6a0c !important;
color: #eee !important;
}
just add !important to prevent from overwritting.