html - 下拉菜单看起来很奇怪(纯 css)

当鼠标悬停在下拉菜单上时，下拉菜单的外观有问题。请注意，问题仅在我将导航栏从固定导航栏转换为流动导航栏时才出现。 (而不是在 px 中指定它，我在 % 中指定它)

这是我的代码:

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: arial, Helvetica, sans-serif;
  font-size: 100%;
  width: 99%;
  max-width: 800px;
  margin: 0 auto;
  background-color: rgba(255, 248, 228, 0.95);
  border: 2px solid #585858;
}

a:link {
  color: #e07400;
}

a:visited {
  color: gray;
}

a:hover,
a:focus {
  font-style: italic;
}

header img {
  float: left;
  width: 100%;
  max-width: 136.078px;
}

.orange_header {
  color: #e07400;
}

header h1 {
  margin: 0;
  font-size: 200%;
  text-shadow: 2px 1px 1px black;
  /*text-align: center;*/
  padding-left: 7em;
  padding-top: 0.7em;
  padding-bottom: 0.5em;
}


/*====================NAV MENU========================*/

#nav_menu a {
  margin: 0;
}

#nav_menu a.current {
  color: white;
  display: block;
  background-color: #a78349;
}

#nav_menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: relative;
  height: 34px;
}

#nav_menu ul li {
  float: left;
  /*width:165.985px;*/
  /*(800-136.06)/4 - fixed layout - uncomment to see that the dropdown menu at the lessons tab looks fine*/
  width: 20.748125%;
  /* 165.985/800*100 - here the dropdown menu looks strange...how to I fix this?*/
}

#nav_menu ul li a {
  display: block;
  text-align: center;
  text-decoration: none;
  padding: 0.5em 0;
  margin: 0;
  background-color: #ab6b06;
  color: white;
}

#nav_menu ul ul {
  display: none;
  position: absolute;
  top: 100%;
}

#nav_menu ul ul li {
  float: none;
}

#nav_menu ul li:hover>ul {
  display: block
}

#nav_menu>ul::after {
  content: "";
  clear: both;
  display: block;
}

<body>
  <header>
    <img src="images/guitarlogo2.png" alt="Guitar" height="109.93">
    <h1 class="orange_header">Annemie's Guitar School</h1>
  </header>
  <nav id="nav_menu">
    <ul>
      <li><a href="index.html" class="current">Home</a></li>
      <li><a href="useful_links.html">Useful links</a></li>
      <li><a href="lesson_intro.html">Lessons</a>
        <ul>
          <li><a href="sittingpos.html">Sitting position</a></li>
          <li><a href="readingmusic.html">Reading music</a></li>
          <li><a href="rhtech.html">Right Hand Technique</a></li>
          <li><a href="lhtech.html">Left Hand Technique</a></li>
          <li><a href="pracandmem.html">Practising and Memorization</a></li>
        </ul>
      </li>
      <li><a href="bio.html">Bio</a></li>
    </ul>
  </nav>
</body>

最佳答案

更改此 CSS:

#nav_menu ul li {
    float: left;
    /* width: 165.985px; */
    width: 20.748125%;
}

为此

#nav_menu > ul > li {
    float: left;
    /* width: 165.985px; */
    width: 20.748125%;
}

关于html - 下拉菜单看起来很奇怪(纯 css)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43698989/

html - 下拉菜单看起来很奇怪(纯 css)

上一篇：javascript - 手机网站呈现: ERROR : -> No such file or directory

下一篇：javascript - 拖放鼠标悬停