下拉菜单上没有边框

Question

在下面我没有在下拉菜单上看到边框。这可能与左边有关：0;但调整这个并没有什么不同。我也试图发布这个，但它一直在询问更多细节，是否有某种单词min？

＆＃13;

＆＃13;

html, body, div, span, applet, object, iframe, h1, h2, h3,
h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address,
big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article,
aside, canvas, details, embed, figure, figcaption, footer,
header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, footer, header,
hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* setting below are not found in meyers */

a {
  text-decoration: none;
  color: #000;
}

/*MASTER ONLY*/

img {
  max-width: 100%;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.container {
  width: 80%;
  margin: 20px auto;
  height: 400px;
  background: linen;
  border: 4px solid black;
}
nav {
  width: 100%;
  height: 100px;
  margin: 0 auto;
  border-top: 4px solid black;
  border-bottom: 4px solid black;
}

/* Topmenu */

ul, li {
  float: right;
}
li {
  position: relative;
}
ul.topmenu {
  height: 100px;
}
li {
  width: 100px;
  height: 60px;
  margin: 20px;
}
li a {
  height: 100%;
  display: block;
  background: linen;
  font-size: 25px;
  color: black;
}
li a:hover {
  /*border-bottom: 1px solid black;*/
}

/* Submenu */

.topmenu li:hover ul {
  top: 40px;
  left: 0;
}
ul.submenu {
  width: 200px;
  position: absolute;
  left: -9000px;
  background: linen;
  border: 5px solid black;
}
ul.submenu li {
  width: 200px;
  height: 60px;
  margin: 0px;
}
ul.submenu li a {
  height: 60px;
  padding-left: 20px;
}
ul.submenu li a:hover {
  background: #121212;
  color: white;
}

＆＃13;

<div class="container">
  <nav>
    <ul class="topmenu">
      <li><a href="#">three</a>
        <ul class="submenu">
          <li><a href="#">three</a></li>
          <li><a href="#">three</a></li>
          <li><a href="#">three</a></li>
        </ul>
      </li>
      <li><a href="#">three</a>
        <ul class="submenu">
          <li><a href="#">three</a></li>
          <li><a href="#">three</a></li>
          <li><a href="#">three</a></li>
        </ul>
      </li>
      <li><a href="#">three</a>
        <ul class="submenu">
          <li><a href="#">three</a></li>
          <li><a href="#">three</a></li>
          <li><a href="#">three</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这是因为你正在使用：

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

这导致a具有100％的宽度以与边界重叠。我只是删除了边框和tadaa！

html, body, div, span, applet, object, iframe, h1, h2, h3,
h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address,
big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article,
aside, canvas, details, embed, figure, figcaption, footer,
header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, footer, header,
hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* setting below are not found in meyers */

a {
  text-decoration: none;
  color: #000;
}

/*MASTER ONLY*/

img {
  max-width: 100%;
}

.container {
  width: 80%;
  margin: 20px auto;
  height: 400px;
  background: linen;
  border: 4px solid black;
}
nav {
  width: 100%;
  height: 100px;
  margin: 0 auto;
  border-top: 4px solid black;
  border-bottom: 4px solid black;
}

/* Topmenu */

ul, li {
  float: right;
}
li {
  position: relative;
}
ul.topmenu {
  height: 100px;
}
li {
  width: 100px;
  height: 60px;
  margin: 20px;
}
li a {
  height: 100%;
  display: block;
  background: linen;
  font-size: 25px;
  color: black;
}
li a:hover {
  /*border-bottom: 1px solid black;*/
}

/* Submenu */

.topmenu li:hover ul {
  top: 40px;
  left: 0;
}
ul.submenu {
  width: 200px;
  position: absolute;
  left: -9000px;
  background: linen;
  border: 5px solid black;
}
ul.submenu li {
  width: 200px;
  height: 60px;
  margin: 0px;
}
ul.submenu li a {
  height: 60px;
  padding-left: 20px;
}
ul.submenu li a:hover {
  background: #121212;
  color: white;
}

<div class="container">
  <nav>
    <ul class="topmenu">
      <li><a href="#">three</a>
        <ul class="submenu">
          <li><a href="#">three</a></li>
          <li><a href="#">three</a></li>
          <li><a href="#">three</a></li>
        </ul>
      </li>
      <li><a href="#">three</a>
        <ul class="submenu">
          <li><a href="#">three</a></li>
          <li><a href="#">three</a></li>
          <li><a href="#">three</a></li>
        </ul>
      </li>
      <li><a href="#">three</a>
        <ul class="submenu">
          <li><a href="#">three</a></li>
          <li><a href="#">three</a></li>
          <li><a href="#">three</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</div>

Answer 2

左边框正在消失，因为<a>的{​​{1}}重叠.submenu。您的CSS指出.submenu和.submenu <li>的宽度应为200px。您的.submenu是块级别，因此它们将与其父<a>匹配。

问题来自于使用<li>（使用起来非常酷）。使用此属性时，宽度将包括填充和边框。因此，box-sizing: border-box;实际上是190px宽，每边有5px边框，而.submenu的{​​{1}}宽200px（并且已浮动）。

您可以使用许多修复程序。

一种方法是移除<li> .submenu上的浮动，而不是li上设置通用宽度。更具体地说明哪个.submenu应该是li并且要浮动。将来，您可能在页面上有一些内容将使用li作为有序/无序（项目符号）列表。当width: 100px;应用于它时，您几乎无法获得每行的任何文本（您可能不希望它的高度为60px）。我通过使用以下选择器完成了此操作：li。

默认情况下，

width: 100px;是块级别，并将填充其父元素，使用它对您有利。

注意： 您可以将许多选择器限定在菜单范围内，这样它们就不会无意中影响同类的未来元素，请参见上文。

添加

.topmenu > li

删除：     ul，li {       漂浮：对;     }     li {       宽度：100px;     }

更改：

li

.topmenu > li {
  float: right;
  width: 100px;
}

ul.submenu li {
  height: 60px;
  margin: 0px;
}

另请注意，您的菜单项可能与使用html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* setting below are not found in meyers */ a { text-decoration: none; color: #000; } /*MASTER ONLY*/ img { max-width: 100%; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .container { width: 80%; margin: 20px auto; height: 400px; background: linen; border: 4px solid black; } nav { width: 100%; height: 100px; margin: 0 auto; border-top: 4px solid black; border-bottom: 4px solid black; } /* Topmenu */ ul, li { float: right; } li { position: relative; } ul.topmenu { height: 100px; } .topmenu > li { width: 100px; } li { height: 60px; margin: 20px; } li a { height: 100%; display: block; background: linen; font-size: 25px; color: black; } li a:hover { /*border-bottom: 1px solid black;*/ } /* Submenu */ .topmenu li:hover ul { top: 40px; left: 0; } ul.submenu { width: 200px; position: absolute; left: -9000px; background: linen; border: 5px solid black; } ul.submenu li { float: none; height: 60px; margin: 0px; } ul.submenu li a { height: 60px; padding-left: 20px; } ul.submenu li a:hover { background: #121212; color: white; }时的预期顺序不同。使用<div class="container"> <nav> <ul class="topmenu"> <li><a href="#">three</a> <ul class="submenu"> <li><a href="#">three</a></li> <li><a href="#">three</a></li> <li><a href="#">three</a></li> </ul> </li> <li><a href="#">three</a> <ul class="submenu"> <li><a href="#">three</a></li> <li><a href="#">three</a></li> <li><a href="#">three</a></li> </ul> </li> <li><a href="#">three</a> <ul class="submenu"> <li><a href="#">three</a></li> <li><a href="#">three</a></li> <li><a href="#">three</a></li> </ul> </li> </ul> </nav> </div>时，它们会被颠倒过来。目前很难看到它们都有相同的标签。

示例：

float: right;

float: right;

Answer 3

边框框码导致左边框保持隐藏状态。您只需要从CSS中删除此代码：

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

这是一个没有边框CSS的工作JSFiddle。

https://jsfiddle.net/rf29hry5/