Question

我遇到子菜单问题。您可以通过将鼠标悬停在主页链接上来查看http://responsiveradio.radiobrandbuilders.com。

填充不会显示子菜单中的项目，但只要将鼠标悬停在它们上面，填充就会起作用。

我确信这是一件很简单的事情我会忽略，但任何帮助都会受到赞赏。

nav {
  height: 60px;
}
nav ul {
  list-style: none;
  margin-top: 19px;
  padding: 0;
}
nav li {
  display: inline-block;
  margin: 0;
  position: relative;
}
nav li a {
 color: #000;
 font-size: 16px;
 font-weight: 500;
 padding: 15px;
 text-transform: uppercase;
}
nav li:last-child {
  margin-right: 0;
}
nav li a:hover {
  color: #fff;
  cursor: pointer;
}
.sub-menu {
  display: none;
  left: 0;
  padding: 0;
  position: absolute;
  top: 10px;
  width: 200px;
 }
 .sub-menu li {
   display: block;
   margin: 0;
   padding: 0;
  }
  .sub-menu li a {
    color: #fff;
    width: 100%;
  }
  .sub-menu li a:hover {
    background: #fff;
    color: #000;
  }

Answer 1

在css中

 .sub-menu li{

    padding:15px;

 }

在你的CSS中你设置了填充：0px;

Answer 2

修改你的风格，如

.sub-menu li a {
    color: #fff;
    width: 100%;
    display: inline-block;
}

Answer 3

.sub-menu li a{padding:0}

添加此样式并刷新页面。

Answer 4

要进行css的更改...标记是内联标记...所以你必须制作显示块。

nav li a {
color: #000;
font-size: 16px;
font-weight: 500;
padding: 15px;
text-transform: uppercase;
display: block;               /*changes done */
}
nav ul {
list-style: none;

padding: 0;
margin-top: 0; /*changes done */
}
.sub-menu{
display: none;
left: 0;
padding: 0;
position: absolute;
top: 52px;            /*changes done */
width: 200px;
}

CSS子菜单填充问题

4 个答案: