Question

我有一个快速响应的网站，但导航栏给我带来了问题。

第一个问题是点击链接的活动区域不是导航栏的完整高度，我需要它一直向下。

第二个问题是当我切换到移动视图时，菜单覆盖了电子邮件地址和电话号码。

我有导航和顶部固定，不确定这是否与它有关。

我有一个测试地址的页面，如果有人想看 - http://www.classic-travel.co.uk/index.html

Answer 1

第一个问题：不是最佳解决方案，只是一种解决方法：

#cssmenu > ul > li {
float: left;
display: inline-block;
background: yellow;
color: black;
height: 104px; //ADD HEIGHT OF THE ul
}

#cssmenu > ul > li > a {
padding: 40px 10px 10px 10px;
border-right: 1px solid rgba(80, 80, 80, 0.12);
text-decoration: none;
font-size: 14px;
font-weight: 500;
color: black;
text-transform: none;
letter-spacing: 1px;
height: 100%; //LET li PICK THE HEIGHT OF ul
}

如果你找到一种不使用高度像素的方法，那就更好了。

第二个问题是由位置引起的：标题的固定，你删除它，它将不被覆盖。

<header style="width: 100%; padding: 0px; background-color: rgb(255, 255, 255); z-index: 99; top: 0px; "><div class="gridContainer clearfix">

    ....
 </header>

另外，请不要使用css内联，将其放入.css文件并使用<link>标记包含在html文件中。

导航栏中的活动区域不是全高

1 个答案: