html - 下拉菜单上没有边框

Question

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

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;
}

<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 1

左边框消失是因为 <a>的 .submenu重叠 .submenu .您的 CSS 声明 .submenu和 <li>的 .submenu宽度应为 200px。你的<a>是 block 级别的，因此它们将匹配其父级 <li> .

问题是使用 box-sizing: border-box; 引起的(使用起来非常酷)。当您使用此属性时，宽度将包括 填充和边框。所以你的 .submenu实际上是 190px 宽，每边有 5px 的边框，而 <li>的 .submenu宽度为 200 像素(并且 float )。

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

一个是删除 li 上的 float 的 .submenu并且不在 li 上设置通用宽度.更具体地说是哪个li应该是 width: 100px;并漂浮。将来您可能会在页面上使用 li 的某些内容。对于有序/无序(元素符号)列表。当 width: 100px; 时，您几乎无法获得每行的任何文本。应用于它(您可能也不希望它的高度为 60px)。我使用以下选择器完成了此操作:.topmenu > li .

li默认情况下是 block 级别的，将填充它们的父元素，利用它对你有利。

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

添加:

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

删除: ul, 李 { float :对； } 李{ 宽度: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; 时他们被逆转了。目前很难看到，因为它们都具有相同的标签。

例子:

ul, li {
  list-style: none;
}
li {
  float: right;
}

<ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
</ul>