且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

HTML/CSS水平导航子菜单悬停显示错误

更新时间:2022-11-10 20:47:42

您的问题从设置宽度到13%.这样子菜单中的li也是其父级宽度的13%.您会在margin-right: -4px;中看到的另一个问题,我建议使用此代码:

Your problem goes from setting width to 13%. This way the li in the submenu also is 13% of its parrent width. Another issue you will see with margin-right: -4px; I suggest this code:

nav li {
    line-height: 40px;
    text-align: left;
    border-bottom: none;
    height: 50px;
    display: inline-block;
}


nav > ul > li {
    width: 13%;
  margin-right: -4px;
}

仅将对主菜单(菜单栏)重要的内容设置为该菜单,而不对其子菜单进行设置.

Set the things that are importaint for main menu (menu bar) only to it and not to its children.