<ul> <li>中的href链接不起作用</li> <li>除了我在新标签页中单击打开

时间:2018-02-02 10:20:25

标签: html css

我的链接不起作用,除非我在一个新标签中打开它,所以这是我的代码,所以如果我但没有ul或菜单的href无法在新标签中打开,现在如果我点击它关闭菜单,但不要重定向,除非我在新标签中打开我试图添加目标空白但它也不起作用:

<body  onload="init();">
<div id="top-content" class="container-fluid">
  <div class="color-overlay accent-color-bg"></div>
  <div class="container-fluid logo-menu">
    <div class="container">
      <div class="row">
        <div class="col-xs-6 text-left">
          <canvas id="logo-canvas" width="50" height="50"></canvas>
          <div class="logo-txt">Vingo</div>
        </div>
        <div class="col-xs-6 text-right">
          <div id="default-button" class="menu-button">
            <div class="fa fa-circle-o"></div>
            <div class="fa fa-circle-o"></div>
            <div class="fa fa-circle-o"></div>
          </div>
            <div id="default-menu" class="fullpage-menu">
                <div class="close-btn"><img src="images/close-btn.png" alt=""></div>
                <div class="menu-holder">
                          <ul>
                        <li><a class="menu-link" href="index.html">Home</a></li>
                        <li><a class="menu-link" href="vps.html">VPS Hosting</a></li>
                        <li><a class="menu-link" href="domains.html">Domains</a></li>
                        <li><a class="menu-link" href="dedicated.html">Dedicated Servers</a></li>
                    </ul>
                </div>
            </div>
        </div>
      </div>
    </div>
  </div>

这是Css如果

.accent-color-bg{
    background-color:#4d2692;
}
.accent-color-text{
    color:#4d2692;
}
.accent-color-border{
    border-color:#4d2692;
}
.menu-holder ul li a:hover{
    color:#4d2692;
}
/*---- Accent Color End ------*/

/*---- Template Colors --------*/
.color1-bg{
    background-color:#0eb2e8;
}
.color2-bg{
    background-color:#e619aa;
}
.color3-bg{
    background-color:#8cc726;
}
.color4-bg{
    background-color:#ff6a06;
}

.color1{
    color:#0eb2e8;
}
.color2{
    color:#e619aa;
}
.color3{
    color:#8cc726;
}
.color4{
    color:#ff6a06;
}

.color1-border{
    border-color:#0eb2e8 !important;
}
.color2-border{
    border-color:#e619aa !important;
}
.color3-border{
    border-color:#8cc726 !important;
}
.color4-border{
    border-color:#ff6a06 !important;
}
/*---- Template Colors End --------*/
.row-title{
    text-align:center;
    font-size:28px;
    margin-top:30px;
    margin-bottom:30px;
    font-weight:100;
}
.row-sub-title{
    font-size:21px;
    text-align:center;
    margin-bottom:20px;
}

/*-----------------------------------
    Menu Styles
-----------------------------------*/

.blur{
    opacity:0.5;
}
.menu-button-opened{
    opacity:0;
    visibility:hidden;
}
.fullpage-menu{
    position:fixed;
    top:0 !important;
    width:100%;
    height:100%;
    z-index:9999;
    background-color:rgba(0,0,0,0.85);
    overflow-y: scroll;
    visibility:hidden;
    opacity:0;
    left: 0;
}
.menu-opened{
    visibility:visible;
    opacity:1;

    transform:scale(1);
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
}

.fullpage-menu .menu-holder{
    width:300px;
    position:absolute;
    left:50%;
    margin-left:-150px;
    top:50%;
    margin-top:-100px;
    text-align:center;
}
.fullpage-menu .menu-holder ul{
    list-style:none;
    padding-left:0;
}
.fullpage-menu .menu-holder ul li{
    text-align:center;
    font-size:30px;
    font-weight:100;
    color:#ffffff;
    margin-bottom:15px;
}
.fullpage-menu .menu-holder ul li a{
    color:#ffffff;
    text-decoration:none;
}
.fullpage-menu .close-btn{
    position:fixed;
    right:0;
    top:0;
    padding:10px;
    cursor:pointer;
}
.fullpage-menu .close-btn:hover{
    opacity:0.8;
}
.inline-menu{
    display: inline-block;
}
.inline-menu .menu-holder{
    margin-top: 0 !important;
}
.inline-menu .menu-holder ul{
    list-style:none;
    padding-left:0;
    height: 70px;
}
.inline-menu .menu-holder ul li{
    font-size:15px;
    color:#ffffff;
    display: inline-block;
    padding-left: 10px;
    padding-right: 10px;
    height: 70px;
}
.inline-menu .menu-holder ul li a{
    color:#ffffff;
    text-decoration: none;
    height: 70px;
    padding-top: 25px;
    display: inline-block;
    outline: 0;
}
.inline-menu .menu-holder ul li a:hover{
    opacity: 0.7;
}
.inline-menu .close-btn{
    display: none;
}

0 个答案:

没有答案