在哪里放置＆＃34;位置：相对;＆＃34;？

时间：2017-09-30 11:01:06

标签： html css

我发现，要显示我的下拉菜单，我必须添加位置：相对于我的CSS。但无论我在哪里添加它，它都会像这样显示（导航栏增加其宽度。请参见图片：

image

代码：

＆＃13;
＆＃13; 
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background-image: linear-gradient(rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0.3)), url('img/tape-measure.jpg');
  background-size: cover;
  min-height: 2000px;
  color: #000305;
  font-size: 100%;
  font-family: 'Coming Soon', 'Lucida Sans Unicode', cursive;
  line-height: 1.5;
}

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

.mainHeader {
  width: 90%;
  margin: 0 auto;
}

.mainHeader nav {
  background-color: #9cb34f;
  border-radius: 5px;
}

.mainHeader nav ul {
  list-style: none;
  margin: 2em;
  padding: 0;
}

nav:first-of-type ul {
  display: flex;
  flex-flow: row wrap;
}

nav:first-of-type li {
  flex: 1 0 15em;
  padding: 0.125em;
}

nav a {
  display: block;
  padding: 1em;
  transition: all linear 0.15s;
  text-decoration: inherit;
}

.mainHeader nav a:link,
.mainHeader nav a:visited {
  color: #fff;
}

.mainHeader nav a:hover,
.mainHeader nav a.Home:link,
.mainHeader nav a.Home:visited {
  background-color: #CF5C3F;
  text-shadow: none;
}

.mainHeader nav ul li a {
  border-radius: 5px;
}

.menu li:hover .sub-menu {
  position: relative;
  z-index: 1;
  opacity: 1;
}

.menu .arrow {
  font-size: 11px;
  line-height: 0%;
}

.sub-menu {
  width: 140%;
  padding: 1em;
  position: absolute;
  top: 100%;
  left: 0px;
  z-index: -1;
  opacity: 0;
  transition: opacity linear 0.15s;
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
  background: #CF5C3F;
}

.sub-menu li {
  display: block;
  font-size: 16px;
}

.sub-menu li a {
  padding: 10px 30px;
  display: block;
}

.sub-menu li a:hover {
  background: #3e3436;
}
＆＃13; 
<!DOCTYPE html>
<html lang="de">

<head>
  <meta charset="utf-8">
  <title>Couture Anni</title>
  <link rel="stylesheet" type="text/css" href="resources/css/ionicons.css">
  <link rel="stylesheet" type="text/css" href="resources/css/style.css">
  <link href="https://fonts.googleapis.com/css?family=Coming+Soon" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <header class="mainHeader">
    <img class="Logo" src="resources/img/Content%5Cvariation_800_e.png" alt="Logo">
    <img class="Margrit" src="resources/img/IMG_5347_small.jpg" alt="Annamaria Hofstetter">

    <div class="menu-wrap">
      <nav class="menu">
        <ul class="clearfix">
          <li><a href="#">Home</a></li>
          <li>
            <a href="#">Movies <span class="arrow">&#9660;</span></a>

            <ul class="sub-menu">
              <li><a href="#">In Cinemas Now</a></li>
              <li><a href="#">Coming Soon</a></li>
              <li><a href="#">On DVD/Blu-ray</a></li>
              <li><a href="#">Showtimes &amp; Tickets</a></li>
            </ul>
          </li>
          <li><a href="#">T.V. Shows</a></li>
          <li><a href="#">Site Help</a></li>
        </ul>
      </nav>
    </div>


    <p class="Schneiderei"><strong>Schneiderei<br>&amp; Handwerk</strong></p>

    <p class="Willkommen"><strong>Willkommen auf meiner Homepage.<br>Schön, dass Sie mich gefunden haben!</strong></p>

    <p class="inBearbeitung"><strong>Diese Seite ist unter Bearbeitung.<br>Bis demnächst!</strong></p>

  </header>

  <footer class="mainFooter">

    <p>Copyright © <a href="#" title="couture-anni">couture-anni.ch</a></p>

  </footer>

</body>


</html>
＆＃13;
＆＃13;
＆＃13;

当显示下拉列表时，我只是不知道如何阻止导航栏增加其宽度。

3 个答案:

答案 0 :(得分：1)

首先需要position: relative，因为想要在下拉菜单的内容中使用position: absolute。绝对定位的元素根据最接近的position: relative父级定义其位置。因此，子菜单的父级是定义position: relative的正确位置。

将这些添加到您的CSS：

.dropdown-trigger {      /* New class */
  position: relative;
}
.sub-menu {              /* Existing class */
  position: absolute;
}

最后将.dropdown-trigger类添加到第二个nav ul li元素（包含子菜单）。一些保证金调整，你就完成了。

答案 1 :(得分：0)

请检查一下。您必须将相对于position:relative课程的职位设置为“{1}}”，并且不要将.menu li:hover .sub-menu提供给课程*, *::before, *::after { box-sizing: border-box; } body { background-image: linear-gradient(rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0.3)), url('img/tape-measure.jpg'); background-size: cover; min-height: 2000px; color: #000305; font-size: 100%; font-family: 'Coming Soon', 'Lucida Sans Unicode', cursive; line-height: 1.5; } a { text-decoration: none; color: #CF5C3F; } .mainHeader { width: 90%; margin: 0 auto; } .mainHeader nav { background-color: #9cb34f; border-radius: 5px; } .mainHeader nav ul { list-style: none; margin: 2em; padding: 0; } nav:first-of-type ul { display: flex; flex-flow: row wrap; } nav:first-of-type li { flex: 1 0 15em; padding: 0.125em; position:relative; } nav a { display: block; padding: 1em; transition:all linear 0.15s; text-decoration: inherit; } .mainHeader nav a:link, .mainHeader nav a:visited { color: #fff; } .mainHeader nav a:hover, .mainHeader nav a.Home:link, .mainHeader nav a.Home:visited { background-color: #CF5C3F; text-shadow: none; } .mainHeader nav ul li a { border-radius: 5px; } .menu li:hover .sub-menu { z-index:1; opacity:1; } .menu .arrow { font-size:11px; line-height:0%; } .sub-menu { width:110%; padding:1em; position:absolute; top:100%; left:0px; z-index:-1; opacity:0; transition:opacity linear 0.15s; box-shadow:0px 2px 3px rgba(0,0,0,0.2); background:#CF5C3F; } .sub-menu li { display:block; font-size:16px; } .sub-menu li a { padding:10px 30px; display:block; } .sub-menu li a:hover { background:#3e3436; } .mainHeader nav ul.sub-menu{ margin:0; }。

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html lang="de">
   <head>
      <meta charset="utf-8">
      <title>Couture Anni</title>
      <link rel="stylesheet" type="text/css" href="resources/css/ionicons.css">
      <link rel="stylesheet" type="text/css" href="resources/css/style.css">
      <link href="https://fonts.googleapis.com/css?family=Coming+Soon" rel="stylesheet">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
   <body>
      <header class="mainHeader">
         <img class="Logo" src="resources/img/Content%5Cvariation_800_e.png" alt="Logo">
         <img class="Margrit" src="resources/img/IMG_5347_small.jpg" alt="Annamaria Hofstetter">
         <div class="menu-wrap">
            <nav class="menu">
               <ul class="clearfix">
                  <li><a href="#">Home</a></li>
                  <li>
                     <a href="#">Movies <span class="arrow">&#9660;</span></a>
                     <ul class="sub-menu">
                        <li><a href="#">In Cinemas Now</a></li>
                        <li><a href="#">Coming Soon</a></li>
                        <li><a href="#">On DVD/Blu-ray</a></li>
                        <li><a href="#">Showtimes &amp; Tickets</a></li>
                     </ul>
                  </li>
                  <li><a href="#">T.V. Shows</a></li>
                  <li><a href="#">Site Help</a></li>
               </ul>
            </nav>
         </div>
         <p class="Schneiderei"><strong>Schneiderei<br>&amp; Handwerk</strong></p>
         <p class="Willkommen"><strong>Willkommen auf meiner Homepage.<br>Schön, dass Sie mich gefunden haben!</strong></p>
         <p class="inBearbeitung"><strong>Diese Seite ist unter Bearbeitung.<br>Bis demnächst!</strong></p>
      </header>
      <footer class="mainFooter">
         <p>Copyright © <a href="#" title="couture-anni">couture-anni.ch</a></p>
      </footer>
   </body>
</html>
＆＃13; 
{{1}}
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

试试这个： 

.mainHeader nav ul li {
    position: relative;
}

.menu li:hover .sub-menu {
  position: absolute;
  //more code...
}

.sub-menu {
  top: 1.7em;
  left: -1.8em;
  //more code...
}


*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background-image: linear-gradient(rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0.3)), url('img/tape-measure.jpg');
  background-size: cover;
  min-height: 2000px;
  color: #000305;
  font-size: 100%;
  font-family: 'Coming Soon', 'Lucida Sans Unicode', cursive;
  line-height: 1.5;
}

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

.mainHeader {
  width: 90%;
  margin: 0 auto;
}

.mainHeader nav {
  background-color: #9cb34f;
  border-radius: 5px;
}

.mainHeader nav ul {
  list-style: none;
  margin: 2em;
  padding: 0;
}
.mainHeader nav ul li {
	position: relative;
}

nav:first-of-type ul {
  display: flex;
  flex-flow: row wrap;
}

nav:first-of-type li {
  flex: 1 0 15em;
  padding: 0.125em;
}

nav a {
  display: block;
  padding: 1em;
  transition: all linear 0.15s;
  text-decoration: inherit;
}

.mainHeader nav a:link,
.mainHeader nav a:visited {
  color: #fff;
}

.mainHeader nav a:hover,
.mainHeader nav a.Home:link,
.mainHeader nav a.Home:visited {
  background-color: #CF5C3F;
  text-shadow: none;
}

.mainHeader nav ul li a {
  border-radius: 5px;
}

.menu li:hover .sub-menu {
  position: absolute;
  z-index: 1;
  opacity: 1;
}

.menu .arrow {
  font-size: 11px;
  line-height: 0%;
}

.sub-menu {
  width: 140%;
  padding: 1em;
  position: absolute;
  top:1.7em;
  left: -1.8em;
  z-index: -1;
  opacity: 0;
  transition: opacity linear 0.15s;
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
  background: #CF5C3F;
}

.sub-menu li {
  display: block;
  font-size: 16px;
}

.sub-menu li a {
  padding: 10px 30px;
  display: block;
}

.sub-menu li a:hover {
  background: #3e3436;
}
<!DOCTYPE html>
<html lang="de">

<head>
  <meta charset="utf-8">
  <title>Couture Anni</title>
  <link rel="stylesheet" type="text/css" href="css/1.css">
  <link href="https://fonts.googleapis.com/css?family=Coming+Soon" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <header class="mainHeader">
    <img class="Logo" src="resources/img/Content%5Cvariation_800_e.png" alt="Logo">
    <img class="Margrit" src="resources/img/IMG_5347_small.jpg" alt="Annamaria Hofstetter">

    <div class="menu-wrap">
      <nav class="menu">
        <ul class="clearfix">
          <li><a href="#">Home</a></li>
          <li>
            <a href="#">Movies <span class="arrow">&#9660;</span></a>

            <ul class="sub-menu">
              <li><a href="#">In Cinemas Now</a></li>
              <li><a href="#">Coming Soon</a></li>
              <li><a href="#">On DVD/Blu-ray</a></li>
              <li><a href="#">Showtimes &amp; Tickets</a></li>
            </ul>
          </li>
          <li><a href="#">T.V. Shows</a></li>
          <li><a href="#">Site Help</a></li>
        </ul>
      </nav>
    </div>


    <p class="Schneiderei"><strong>Schneiderei<br>&amp; Handwerk</strong></p>

    <p class="Willkommen"><strong>Willkommen auf meiner Homepage.<br>Schön, dass Sie mich gefunden haben!</strong></p>

    <p class="inBearbeitung"><strong>Diese Seite ist unter Bearbeitung.<br>Bis demnächst!</strong></p>

  </header>

  <footer class="mainFooter">

    <p>Copyright © <a href="#" title="couture-anni">couture-anni.ch</a></p>

  </footer>

</body>


</html>

相关问题
最新问题