Question

我有一个带有子导航的导航栏，但每当我将鼠标悬停在导航的某个部分上时，子菜单会以非常奇怪的方式打开。这是我的代码：

＆＃13;

#menu {
  background-color: rgba(0, 0, 0, 0.6);
  width: 715px;
  margin-left: 600px;
  font-family: "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif;
  border-radius: 4px;
}
#menu ul li {
  display: inline-block;
  padding: 15px;
  margin-left: 90px;
}
#menu ul li a {
  text-decoration: none;
  color: #FFF;
}
/* Sub-menu */

#menu ul ul {
  display: none;
}
#menu ul li:hover > ul {
  display: block;
}

＆＃13;

<nav id="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Projecten<i class="material-icons" style="font-size:15px">arrow_drop_down</i>
    	<ul class="sub-menu">
    		<li><a href="ru.html">Russisch</a></li>
        </ul>
      </a>
    </li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

＆＃13;

它应该在＆＃34; Projecten＆＃34;下面打开。选项卡，但是这样做： problem

Answer 1

使用定位。方法如下：

将var filename = "dataFile.txt"; var fileDate; WinJS.UI.Pages.define("index.html", { ready: function (element, options) { loadDate(); console.log("main" + fileDate); this.fillYearSelect(); }, function loadDate() { return localFolder.getFileAsync(filename).then(function (file) { return Windows.Storage.FileIO.readTextAsync(file).then(function (fileContent) { fileDate = fileContent; console.log("fileContent " + fileContent); }, function (error) { console.log("Błąd odczytu"); }); }, function (error) { console.log("Nie znaleziono pliku"); }); }添加到position: relative元素。
将li添加到第二级position: absolute元素。
为第二级ul元素添加一些背景颜色。

这会将其显示为下拉菜单。

工作示例：

ul

#menu {
      background-color: rgba(0,0,0,0.6);
      width: 715px;
      margin-left: 600px;
      font-family: "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif;
      border-radius: 4px;
    }
    
    #menu ul li {
      display: inline-block;
      padding: 15px;
      margin-left: 90px;
      position: relative; /*Added this*/
    
    }
    
    #menu ul li a {
      text-decoration: none;
      color: #FFF;
    
    }
    
    /* Sub-menu */ 
    
    #menu ul ul {
      display: none;
      background-color: rgba(0,0,0,0.6); /*added this*/
      position: absolute; /*and this*/
      /*These two are positioning the dropdown relative to the bottom left corner of the parent item*/
      left: 0; 
      top: 100%;
    }
    
    #menu ul li:hover > ul {
      display:block;
    }

Answer 2

这是因为您在将display: none;设置为display: block;后立即向菜单添加元素。这会使所有东西都不成比例，并使它看起来像它。

解决方案是position: absolute;以从网站流中删除子菜单。我将使用您的代码向您展示一个示例：

＆＃13;

    #menu {
      background-color: rgba(0,0,0,0.6);
      width: 715px;
      margin-left: 600px;
      font-family: "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif;
      border-radius: 4px;
    }
    
    #menu ul li {
      display: inline-block;
      padding: 15px;
      margin-left: 90px;
      position: relative; /* This is needed to be able to set
                             the submenu relative to it's parent item */
    }
    
    #menu ul li a {
      text-decoration: none;
      color: #FFF;
    
    }
    
    /* Sub-menu */ 
    
    #menu ul ul {
        display: none;
        /* Here we'll place it at the bottom of the menu item */
        position: absolute;
        top: 100%; /* This should equal the bottom of the item */
        left: 0; /* To put it at the left side of the item */
        /** And some basic styling to make it visible */
        background: rgba(0,0,0,0.6);
    }
    
        #menu ul li:hover > ul {
            display:block;
        }

＆＃13;

    <nav id="menu">
    			<ul>
    				<li><a href="#">Home</a></li>
    				<li><a href="#">Projecten<i class="material-icons" style="font-size:15px">arrow_drop_down</i></a>
    				<ul class="sub-menu">
    					<li><a href="ru.html">Russisch</a></li>
    				</ul>
    				</li>
    				<li><a href="contact.html">Contact</a></li>
    			</ul>
    		</nav>

＆＃13;

我希望这一点能够让你继续工作。

编辑：还清理了HTML。您不应该在链接中打开新的UL。

Answer 3

/* edit by Manish*/
.sub-menu {
  background: #333 none repeat scroll 0 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 49px;
}
.parent{
    position: relative;
}
/* edit by Manish*/

添加＆＃34;父母＆＃34;上课到父母＆＃34; li＆＃34;

<nav id="menu">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li class="parent"><a href="#">Projecten<i class="material-icons" style="font-size:15px">arrow_drop_down</i>
                        <ul class="sub-menu">
                            <li><a href="ru.html">Russisch</a></li>
                        </ul>
                        </a></li>
                        <li><a href="contact.html">Contact</a></li>
                    </ul>
                </nav>

将鼠标悬停在导航栏上方

3 个答案: