在汉堡包中,<li>代码如何断开我的链接?

对不起,如果我的问题令人困惑!我是一个初学者,只真正了解非常基本的HTML!我购买了该引导程序模板,以用作我的网站布局。这些链接在台式机上有效,但在移动设备上或在台式机上调整屏幕大小时(当链接位于汉堡包中时),它们似乎无效。

这是我的index.html页面上的代码

<div class="nav-menu-icon">
           <a href="#"><i></i></a>
      </div>
      <nav class="menu">
        <ul>
            <li><a href="index.html">Portfolio</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="journal.html">Journal</a></li>
            <li><a href="contact.html">Contact</a></li>

        </ul>


      </nav> 
    </div>   

这是我的CSS代码:

    /*---header---*/

header {position: fixed; left: 0px; top: 0px; height: 130px; width: 100%; text-align: center; z-index: 5060; transition:all .2s ease-out;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-ms-transition:all .2s ease-out;}
header.fix {background:#fff; height: 75px;}
nav {position: absolute; right: 50%; top: 0px; padding-top: 90px; transform: translateX(50%);-webkit-transform: translateX(50%);-moz-transform: translateX(50%);-ms-transform: translateX(50%); transition:all .2s ease-out;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-ms-transition:all .2s ease-out;} 
nav > ul > li {position: relative; float: left; margin: 0px 21px; font-size: 14px; font-weight: 400; line-height: 16px; text-transform: uppercase;}
nav ul li a {color: #1a1a1a;letter-spacing: 3px; font-weight: 700;}
nav ul li a:hover {color: #999;}
nav > ul > li.active > a {color: #000; font-weight: 500;}
nav > ul > li.active > span {color: #000; transform: rotateX(-180deg);-webkit-transform: rotateX(-180deg);-moz-transform: rotateX(-180deg);-ms-transform: rotateX(-180deg);}
nav > ul > li > a > span {padding-left: 10px;transition:all .2s ease-out;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-ms-transition:all .2s ease-out;}
nav > ul > li > a > .fa {display: none;}
nav ul > li ul {opacity: 0; position: absolute; top: 27px; background: #fff; visibility: hidden; left: 0; display: block; min-width: 230px;  transition:all .2s ease-out;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-ms-transition:all .2s ease-out; border: 1px solid #f5f5f5;}
.menu ul > li > ul > li span {position: absolute; right: 12px; top: 7px; line-height: 15px; color: #1f1f1f; transform: rotate(-90deg);-webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg);-ms-transform: rotate(-90deg);}
.dropmenu:before {content: "";display: block;position: absolute;width: 10px;height: 10px;background-color: #fff;border: 1px solid #ebebeb; border-bottom: 0;border-right: 0;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);left: 10px;top: -5px;}
.menu ul > li:hover .dropmenu {opacity: 1; visibility: visible;}
.menu ul > li > ul > li > ul {opacity: 0; visibility: hidden; position: absolute; left: 100%; max-width: 150px; background: #fff; top: 0px;}
.menu ul > li > ul > li {position: relative;}
.menu ul > li > ul > li:last-child{border-bottom: 0px none;}
.menu ul > li > ul > li:hover ul {opacity: 1; visibility: visible;}
.menu ul li > ul li a {display: block; clear: both; padding: 8px 7px; position: relative; font-size: 10px; line-height: 14px; text-align: left; font-weight: 500; color: #1f1f1f; letter-spacing: 3px;}
.menu ul > li > ul > li > a:hover {background: #f5f5f5; color: #000;}
.logo {position: absolute;  display: block; z-index: 5; margin-top: 20px; left: 50%; transform: translateX(-50%);-webkit-transform: translateX(-50%);-moz-transform: translateX(-50%);-ms-transform: translateX(-50%); transition:all .2s ease-out;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-ms-transition:all .2s ease-out;}
.logo a { color: #000;font-size: 28px;line-height: 40px;text-align: center;font-weight: bold;text-transform: uppercase;letter-spacing: 5px;}
.animsition-overlay-slide {background: #fff; z-index: 6000;}
header.fix .logo {float: left; position: relative; left: 0px; transform: translateX(0%);-webkit-transform: translateX(0%);-moz-transform: translateX(0%);-ms-transform: translateX(0%);}
header.fix nav {transform: translateX(0%);-webkit-transform: translateX(0%);-moz-transform: translateX(0%);-ms-transform: translateX(0%); right: 0px; position: relative; float: right; padding-top: 30px;}

.second-heading {position: relative; width: 100%; padding: 0px 0px 40px; text-align: center; height: 200px;}
.second-heading-txt {position: relative; float: left; width: 100%; text-align: center;}
.second-heading-txt h2 {color: #fff; padding-bottom: 15px; font-weight: 700;}
.second-heading-txt .separ {position: relative; float: none; display: inline-block; width: 60px; height: 3px; background: #fff;}

/*---burger menu---*/

.nav-menu-icon {position: relative; float: right; width: 24px; height: 24px; z-index: 600; margin-right: 0px; margin-top: 30px; display: none; transition:all .2s ease-out;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-ms-transition:all .2s ease-out;}
.nav-menu-icon a {display: inline-block;width:24px;height:24px;cursor: pointer;text-decoration: none;}
.nav-menu-icon a i {position: relative;display: inline-block;width: 24px;height: 3px;color:#000;font:bold 14px/.4 Helvetica;text-transform: uppercase;text-indent:-55px;background: #000;transition:all .2s ease-out;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-ms-transition:all .2s ease-out;}
.nav-menu-icon a i:before, .nav-menu-icon a i:after {content:''; width: 24px;height: 3px;background: #262626;position: absolute;left:0;transition:all .2s ease-out;}
.nav-menu-icon a i:before {top: -7px;}
.nav-menu-icon a i:after {bottom: -7px;}
.nav-menu-icon a:hover i:before {top: -10px;}
.nav-menu-icon a:hover i:after {bottom: -10px;}
.nav-menu-icon a.active i {background: none;}
.nav-menu-icon a.active i:before {top:0;-webkit-transform: rotateZ(45deg);-moz-transform: rotateZ(45deg);-ms-transform: rotateZ(45deg);
-o-transform: rotateZ(45deg);transform: rotateZ(45deg);}
.nav-menu-icon a.active i:after {bottom:0;-webkit-transform: rotateZ(-45deg);-moz-transform: rotateZ(-45deg);-ms-transform: rotateZ(-45deg);
-o-transform: rotateZ(-45deg);transform: rotateZ(-45deg);}

/*---dropdown---*/

.drop-wrap {position: relative; float: left;}
.drop {position: absolute; display: block; height: 35px; left: 0px; top: 0px; min-width: 120px;}
.drop b {position:relative; float: left; width: 100%; height: 35px; padding-left: 10px; border: 1px solid #fff; font-size: 13px; cursor: pointer; text-transform: capitalize; font-weight: 300; padding-top: 8px;color: #999;}
.drop .drop-list {position: absolute; right: 16px;top: 3px;font-size: 16px;color:#999;}
.drop span {position:absolute; left:0px; top:-35px; width:100%; display: none; border: 1px solid #ebebeb; margin: 0px; z-index: 5;}
.drop-list.act {transform: rotate(180deg);-webkit-transform: rotate(180deg);-moz-transform: rotate(180deg);-ms-transform: rotate(180deg); z-index: 51; margin-top: 8px;}
.drop span a {color: #999; background: #fff; font-size: 13px; font-weight: 300; float: left; position: relative; width: 100%; height: 35px; text-decoration: none; text-align: left; line-height: 28px; padding: 3px 0 0 10px; transition:all 0.3s ease-in;-webkit-transition:all 0.3s ease-in;-moz-transition:all 0.3s ease-in;-o-transition:all 0.3s ease-in;-ms-transition:all 0.3s ease-in; z-index: 52; text-transform: capitalize;}
.drop span a:hover {background: #222; color:#fff;}

希望能对您有所帮助!

评论