使用无序列表在css中删除菜单导航

Question

我已经在这几个星期了。我几乎直接从我的第一个项目复制，这是一个食谱中心。下面我将粘贴我的样式表和我的导航文件供所有人查看，并尝试帮助我找出当您将鼠标悬停在父列表项上时不会出现下拉菜单的原因。

nav.css

＆＃13;

＆＃13;

/* rules for navigation menu */


/* ======================================================== */

ul#nav,
ul.drop,
ul.toss {
  list-style-type: none;
  font-family: Arial, Helvetica, Sans-Serif;
  float: right;
  font-size: 12px;
  color: #f2f1f0;
  margin-right: 10px;
}

ul.drop {
  outline: 1px dotted red;
  /* for debugging purposes */
  width: 110px;
  background: forestgreen;
  border-radius: 0px 0px 10px 10px;
  -moz-border-radius: 0px 0px 10px 10px;
  -webkit-border-radius: 0px 0px 10px 10px;
  padding: 0px;
  padding-bottom: 10px;
}

ul.toss {
  width: 110px;
  background: forestgreen;
  border-radius: 0px 10px 10px 10px;
  -moz-border-radius: 0px 10px 10px 10px;
  -webkit-border-radius: 0px 10px 10px 10px;
  padding: 0px;
  padding-bottom: 10px;
}

ul#nav li {
  outline: 1px dotted red;
  /* for debugging purposes */
  height: 20px;
  width: 110px;
  text-align: center;
  position: relative;
  float: left;
  margin-right: 4px;
}

ul#nav a {
  height: 20px;
  display: block;
  padding: 4px;
  padding-top: 0px;
  position: relative;
  text-decoration: none;
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 12px;
  font-weight: bold;
  color: #f2f1f0;
  background: none;
}

ul#nav a:hover {
  background: darkseagreen;
  display: block;
  padding: 4px;
  padding-top: 0px;
  border-radius: 5px 5px 0px 0px;
  -moz-border-radius: 5px 5px 0px 0px;
  -webkit-border-radius: 5px 5px 0px 0px;
  text-decoration: none;
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 12px;
  font-weight: bold;
  color: #f2f1f0;
}

ul#nav .drop li {}

ul#nav li:hover {
  background-color: darkseagreen;
  border-radius: 5px 5px 0px 0px;
  -moz-border-radius: 5px 5px 0px 0px;
  -webkit-border-radius: 5px 5px 0px 0px;
}

ul#nav .drop a {
  padding: 0px;
  padding-top: 2px;
  margin-top: 3px;
}

ul#nav .toss a {
  padding: 0px;
  padding-top: 2px;
  margin-top: 3px;
  margin-left: 3px;
  margin-right: 3px;
}

ul#nav li:hover>a {
  background-color: darkseagreen;
}

ul#nav li:hover a:hover {
  background-color: darkseagreen;
}

ul#nav ul.drop li:hover a:hover {
  background-color: darkseagreen;
}

ul#nav ul.toss li:hover a:hover {
  background-color: darkseagreen;
}

ul#nav ul.drop {
  display: none;
  position: absolute;
  top: 16px;
  left: 0px;
}

ul#nav ul.toss {
  display: none;
  position: absolute;
  top: 0px;
  left: 95px;
}

ul#nav li.hover .drop {
  display: block;
}

ul#nav .drop li:hover .toss {
  display: block;
}


/*    rules for navigation menu END	*/


/* ==================================== */

＆＃13;

＆＃13;

＆＃13;

nav.inc.php

<ul id="nav">
<li><a href="index.php">Home</a></li>
<li><a href="index.php?card=About">About</a></li>
<li><a href="index.php?card=Contact">Contact</a></li>

<li>Projects 
    <ul class="drop">
        <li>Recipe Center</li>
        <li>Store</li>
        <li>Admin</li>
    </ul>
</li>

<li><a href="#">Blog</a></li>

Answer 1

你的css的以下部分是这样的：

ul#nav li.hover .drop {
  display: block;
}

它需要有一个冒号而不是li和hover之间的句点，现在它就像悬停是一个类而不是悬停操作。所以它应该如下所示：

ul#nav li:hover .drop {
  display: block;
}

以下是经过修改的代码段：

/* rules for navigation menu */


/* ======================================================== */

ul#nav,
ul.drop,
ul.toss {
  list-style-type: none;
  font-family: Arial, Helvetica, Sans-Serif;
  float: right;
  font-size: 12px;
  color: #f2f1f0;
  margin-right: 10px;
}

ul.drop {
  outline: 1px dotted red;
  /* for debugging purposes */
  width: 110px;
  background: forestgreen;
  border-radius: 0px 0px 10px 10px;
  -moz-border-radius: 0px 0px 10px 10px;
  -webkit-border-radius: 0px 0px 10px 10px;
  padding: 0px;
  padding-bottom: 10px;
}

ul.toss {
  width: 110px;
  background: forestgreen;
  border-radius: 0px 10px 10px 10px;
  -moz-border-radius: 0px 10px 10px 10px;
  -webkit-border-radius: 0px 10px 10px 10px;
  padding: 0px;
  padding-bottom: 10px;
}

ul#nav li {
  outline: 1px dotted red;
  /* for debugging purposes */
  height: 20px;
  width: 110px;
  text-align: center;
  position: relative;
  float: left;
  margin-right: 4px;
}

ul#nav a {
  height: 20px;
  display: block;
  padding: 4px;
  padding-top: 0px;
  position: relative;
  text-decoration: none;
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 12px;
  font-weight: bold;
  color: #f2f1f0;
  background: none;
}

ul#nav a:hover {
  background: darkseagreen;
  display: block;
  padding: 4px;
  padding-top: 0px;
  border-radius: 5px 5px 0px 0px;
  -moz-border-radius: 5px 5px 0px 0px;
  -webkit-border-radius: 5px 5px 0px 0px;
  text-decoration: none;
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 12px;
  font-weight: bold;
  color: #f2f1f0;
}

ul#nav .drop li {}

ul#nav li:hover {
  background-color: darkseagreen;
  border-radius: 5px 5px 0px 0px;
  -moz-border-radius: 5px 5px 0px 0px;
  -webkit-border-radius: 5px 5px 0px 0px;
}

ul#nav .drop a {
  padding: 0px;
  padding-top: 2px;
  margin-top: 3px;
}

ul#nav .toss a {
  padding: 0px;
  padding-top: 2px;
  margin-top: 3px;
  margin-left: 3px;
  margin-right: 3px;
}

ul#nav li:hover>a {
  background-color: darkseagreen;
}

ul#nav li:hover a:hover {
  background-color: darkseagreen;
}

ul#nav ul.drop li:hover a:hover {
  background-color: darkseagreen;
}

ul#nav ul.toss li:hover a:hover {
  background-color: darkseagreen;
}

ul#nav ul.drop {
  display: none;
  position: absolute;
  top: 16px;
  left: 0px;
}

ul#nav ul.toss {
  display: none;
  position: absolute;
  top: 0px;
  left: 95px;
}

ul#nav li:hover .drop {
  display: block;
}

ul#nav .drop li:hover .toss {
  display: block;
}


/*    rules for navigation menu END	*/


/* ==================================== */

<ul id="nav">
<li><a href="index.php">Home</a></li>
<li><a href="index.php?card=About">About</a></li>
<li><a href="index.php?card=Contact">Contact</a></li>

<li>Projects 
    <ul class="drop">
        <li>Recipe Center</li>
        <li>Store</li>
        <li>Admin</li>
    </ul>
</li>

<li><a href="#">Blog</a></li>