2 回答
TA贡献1884条经验 获得超4个赞
请将您的 CSS 代码替换为这些行。
.nav-wrap {
margin: 50px auto;
background-color: rgba(0, 0, 0, 0.6);
border-top: 2px solid white;
border-bottom: 2px solid white;
}
/* Clearfix */
.group:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
*:first-child+html .group {
zoom: 1;
}
/* IE7 */
/* Example One */
#example-one {
list-style: none;
position: relative;
display: grid;
max-width: 200px;
background: #F1F1F1;
padding: 0px;
}
#example-one li {
display: inline-block;
}
#example-one a {
color: #000;
font-family: sans-serif;
font-size: 14px;
width: 100%;
float: left;
padding: 11px;
text-decoration: none;
text-transform: capitalize;
}
#example-one a:hover {
color: #818181;
}
#magic-line {
position: absolute;
bottom: -2px;
left: 0;
width: 100px;
height: 2px;
background: #fe4902;
}
.current_page_item {
background: #4CAF50;
}
.current_page_item a {
color:white;
}
<div class="menu">
<ul class="group" id="example-one">
<li class="current_page_item" data-target="home" data-posmenu="-35px"><a href="index.php#home">hello</a></li>
<li class="" data-target="about"><a href="index.php#about">About</a></li>
<li class="" data-target="product"><a href="index.php#product">PRODUCTS</a></li>
<li class="" data-target="news"><a href="index.php#news">News</a></li>
<li class="" data-target="contact"><a href="index.php#contact">Contact</a></li>
<li class="" data-target="policy_privacy"><a href="<?php echo ABSOLUTE_PATH.BASE_PAGE; ?>?<?php echo PAGE_PARAM_KEY; ?>=privacy_policy">Privacy</a></li>
</ul>
</div>
TA贡献1871条经验 获得超8个赞
您正在使用float和display: inline-block。只需删除这些属性即可。
.nav-wrap {
margin: 50px auto;
background-color: rgba(0, 0, 0, 0.6);
border-top: 2px solid white;
border-bottom: 2px solid white;
}
/* Clearfix */
.group:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
*:first-child+html .group {
zoom: 1;
}
/* IE7 */
/* Example One */
#example-one {
margin: 0 auto;
list-style: none;
position: relative;
width: 200px;
}
#example-one a {
color: #bbb;
font-size: 14px;
padding: 6px 10px 4px 10px;
text-decoration: none;
text-transform: uppercase;
}
#example-one a:hover {
color: white;
}
#magic-line {
position: absolute;
bottom: -2px;
left: 0;
width: 100px;
height: 2px;
background: #fe4902;
}
.current_page_item a {
color: white !important;
}
.ie6 #magic-line {
bottom: -3px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
<ul class="group" id="example-one">
<li class="current_page_item" data-target="home" data-posmenu="-35px"><a href="index.php#home">hello</a></li>
<li class="" data-target="about"><a href="index.php#about">About</a></li>
<li class="" data-target="product"><a href="index.php#product">PRODUCTS</a></li>
<li class="" data-target="news"><a href="index.php#news">News</a></li>
<li class="" data-target="contact"><a href="index.php#contact">Contact</a></li>
<li class="" data-target="policy_privacy"><a href="<?php echo ABSOLUTE_PATH.BASE_PAGE; ?>?<?php echo PAGE_PARAM_KEY; ?>=privacy_policy">Privacy</a></li>
</ul>
</div>
- 2 回答
- 0 关注
- 86 浏览
添加回答
举报