本文介绍了样式菜单栏css的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在这里有一个菜单栏:
根据@Bojangles:
ul#menu {
font-size:0;
}
ul#menu li {
font-size:16px;
}
无需注释。
如果你想实现 hover
上的空格:
ul#menu li:not(.current)a:hover {
color:rgb(25,25,25)
background-color:#FF8800;
margin:0px 4px;
}
注意:这将移动所有元素 1px
到左边和 1px
到右边。
I have a menu bar here: http://jsfiddle.net/Qn3kh/1/
Here is the codes:
CSS:
ul#menu {
position: absolute;
width: 100%;
min-width: 1180px;
height: 35px;
background-color: rgb(25, 25, 25);
text-align: center;
line-height: 2px;
}
#menuborders1{
position: absolute;
left: 0px;
right: 0px;
top: 6px;
bottom: 6px;
border-top: 3px solid rgb(30, 174, 206);
border-bottom: 3px solid rgb(30, 174, 206);
}
#menuborders2{
position: absolute;
left: 0px;
right: 0px;
top: 5px;
bottom: 5px;
border-top: 1px solid rgb(255, 136, 0);
border-bottom: 1px solid rgb(255, 136, 0);
}
ul#menu li {
display: inline-block;
margin-right: -3px;
}
ul#menu li a {
position: relative;
text-decoration: none;
font-family: Arial;
padding: 10px 75px 7px 75px;
color: #fff;
}
ul#menu li.current a {
color: rgb(25, 25, 25);
background-color: #1EAECE;
}
ul#menu li a:hover {
color: rgb(25, 25, 25);
background-color: #FF8800;
}
HTML:
<ul id="menu">
<div id="menuborders1">
<div id="menuborders2">
<li class="current"><a href="#" data-id="div1">Description</a></li>
<li><a href="#" data-id="div2">Shipping and payment</a></li>
<li><a href="#" data-id="div3">Returns</a></li>
<li><a href="#" data-id="div4">Feedback</a></li>
</div>
</div>
</ul>
For me the menu displays like that(normal and hover):But I want it to display like that(normal and hover):
解决方案
Not sure if i understand, but try add bakground
to the a
element. After it looks like your second attached image.
ul#menu li a {
background:black;
}
And you must comment spaces between li
elements:
<ul id="menu">
<div id="menuborders1">
<div id="menuborders2"><!--
--><li class="current"><a href="#" data-id="div1">Description</a></li><!--
--><li><a href="#" data-id="div2">Shipping and payment</a></li><!--
--><li><a href="#" data-id="div3">Returns</a></li><!--
--><li><a href="#" data-id="div4">Feedback</a></li><!--
--></div>
</div>
</ul>
According to @Bojangles :
ul#menu{
font-size: 0;
}
ul#menu li{
font-size: 16px;
}
After is no comment needed.
If you want to achieve the space on hover
:
ul#menu li:not(.current) a:hover{
color: rgb(25, 25, 25);
background-color: #FF8800;
margin: 0px 4px;
}
Note: This will move all the elements 1px
to left and 1px
to right.
这篇关于样式菜单栏css的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!