使用css html构建菜单
使用css html构建菜单
提问于 2014-03-17 15:22:53
当鼠标悬停在每个顶部菜单上时，我需要我的菜单改变颜色。问题是当我在鼠标上悬停时，Test1和Sub test1更改的背景色。在我将鼠标悬停在test1上之前，有没有办法不改变Sub的背景色？参见http://jsfiddle.net/r5YCU/22/的代码
任何帮助都将不胜感激。谢谢。
<div id="navbar">
<ul>
<li class="navbutton"><span><a id="button-1"
href="">Shop</a></span>
</li>
<li class="navbutton"> <span><a href="#">Test1</a></span>
<ul>
<li><br/><span><a href="#">Sub test1</a>
</span>
</li>
</ul>
</li>
<li class="navbutton"><span><a id="button-3"
href="#">Test2</a>
</span>
</li>
<li class="navbutton"><span><a id="button-4"
href="#">Test3</a></span>
</li>
<li class="navbutton"><span><a id="button-5"
href="#">Test4</a></span>
</li>回答 2
Stack Overflow用户
回答已采纳
发布于 2014-03-17 15:36:47
我会使用css :悬停伪类而不是javascript事件，比如：
li.navbutton:hover {
background-color:#345808 !important;
}
li.navbutton:hover li {
background-color: #5c8727!important;
}
li.navbutton li:hover {
background-color: #345808!important;
}完整的代码是：http://jsfiddle.net/r5YCU/31/
我对布局做了一些调整，使其看起来尽可能类似于原始菜单，但只使用css代码。
Stack Overflow用户
发布于 2014-03-18 04:07:50
这些事情与样式有关，应该用css.来完成
CSS
.ul{
list-style: none;
}
#navbar a{
text-decoration: none;
}
#main-ul{
background: yellow;
}
.navmenu{
float: left;
background: deeppink;
width: 60px;
height: 25px;
margin-right: 3px;
text-align: center;
line-height: 25px;
box-shadow: 0 0 2px 3px black;
}
.navmenu:hover{
outline: 1px solid white;
margin-top: 1px;
}
.navmenu:hover > #sub-ul{
display: block;
width: 100px;
background: red;
}
#sub-ul{
margin: 0;
padding: 0;
display: none;
}
.submenu{
margin: 0;
padding: 0;
margin-bottom: 2px;
background: black;
color: white;
}
.submenu:hover{
cursor: pointer;
color: black;
background: #585858;
} <div id="navbar">
<ul class="ul" id="main-ul">
<li class="navmenu"><a href="#">Test1</a></li>
<li class="navmenu"><a href="#">Test2</a>
<ul class="ul" id="sub-ul">
<li class="submenu">Test 1</li>
<li class="submenu">Test 2</li>
<li class="submenu">Test 3</li>
<li class="submenu">Test 4</li>
<li class="submenu">Test 5</li>
<li class="submenu">Test 6</li>
<li class="submenu">Test 7</li>
<li class="submenu">Test 8</li>
</ul>
</li>
<li class="navmenu"><a href="#">Test3</a></li>
<li class="navmenu"><a href="#">Test4</a></li>
<li class="navmenu"><a href="#">Test5</a></li>
<li class="navmenu"><a href="#">Test6</a></li>
<li class="navmenu"><a href="#">Test7</a></li>
</ul>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22458302
复制相关文章
相似问题
腾讯云开发者
