#navigation_conatiner_7的背景和边框不可见。我尝试将overflow:auto添加到其父级,它只显示滚动条。后来我尝试添加相同的,但它完全隐藏。由于我已经没有想法了,我想也许有人可能会有答案。
以下是代码: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;
}
答案 0 :(得分:3)
从height=0px
#navigation_conatiner_7
答案 1 :(得分:0)
在以下ID中进行更改:
#navigation_category_7:hover {
background-color: #dd6a0c;
color: #111;
}
答案 2 :(得分:0)
代码问题在于您看到的颜色实际上是从容器内粘贴的链接派生的。
添加了这个
#navigation_category_7 #navigation_container_7 .navigation_link {
background-color: #eee;
}
现在可以使用了。查看http://jsfiddle.net/my5GV/2/
答案 3 :(得分:0)
尝试更改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;
}
到这个
#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;
}
答案 4 :(得分:0)
你不应该使用's菜单。 请尝试使用ul和li标签 像这样的东西:
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
}
答案 5 :(得分:-1)
更改
#navigation_category_2:hover,
#navigation_category_3:hover,
#navigation_category_7:hover {
background-color: #dd6a0c;
color: #eee;
}
到
#navigation_category_2:hover,
#navigation_category_3:hover,
#navigation_category_7:hover {
background-color: #dd6a0c !important;
color: #eee !important;
}
添加!重要以防止覆盖。