导航子菜单不会出现

Question

我创建了一个带子菜单的导航菜单。任何人都可以帮助我找出为什么子菜单将作为主菜单的一部分来？

导航有以下选项：主页，关于，我的投资组合...... 我的投资组合有菜单选项：Web Development，Motion ...

问题： Web开发应该有子菜单：Bootstrap，CSS，而是它作为主菜单的一部分。<div id="Navigation"><ul class="Navigation"><li><a href="#">Home</a></li></ul>/div>

body {
  background: #c4c7cb;
  background-image: -webkit-radial-gradient(cover, #FFF, #D1D1D1);
  background-image: -moz-radial-gradient(cover, #e8eaec, #a4a8ae);
  background-image: -o-radial-gradient(cover, #e8eaec, #a4a8ae);
  background-image: radial-gradient(cover, #e8eaec, #a4a8ae)
}
html {
  min-height: 100%;
}
.Navigation {
  height: 50px;
  padding: 0;
  margin: 0;
  position: absolute;
}
.Navigation li {
  height: auto;
  width: 150px;
  float: left;
  text-align: center;
  list-style: none;
  font: 12px"Bonveno", "Century Gothic";
  padding: 0;
  margin: 0;
  background-color: #eee;
  border: 1px solid #ccc;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 1px 3px rgba(0, 0, 0, .1);
  border-radius: 3px;
  margin-left: 10px;
}
.Navigation a {
  padding: 13px;
  text-decoration: none;
  color: #333;
  text-shadow: 0 1px #fff;
  display: block;
}
.Navigation li ul {
  display: none;
  height: auto;
  margin-left: -11px;
  padding: 0;
}
.Navigation li:hover ul {
  display: block;
}
.Navigation li:hover,
a:hover {
  background: #e8e8e8;
}

<div id="Navigation">
  <ul class="Navigation">
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">About</a>
    </li>
    <li><a href="#">My Portfolio</a>
      <ul>
        <li><a href="#">Web Development</a>
          <ul>
            <li><a href="#">Bootstrap</a>
            </li>
            <li><a href="#">CSS</a>
            </li>
          </ul>
        </li>
        <li><a href="#">Motion Graphics</a>
        </li>
        <li><a href="#">Flash Animation</a>
        </li>
        <li><a href="#">Logo Design</a>
        </li>
        <li><a href="#">Photography</a>
        </li>
      </ul>
    </li>
    <li><a href="#">Services</a>
    </li>
    <li><a href="#">Contact</a>
    </li>
  </ul>
</div>

Answer 1

这是因为你有.Navigation li:hover ul { display: block; }的CSS规则，我相信你想在第一级项目悬停时显示第二级菜单。但是这个规则也适用于第三级菜单（这意味着第一级项目悬停下的所有ul都被应用display: block;），您可能想要使用

.Navigation li:hover > ul而不是

Answer 2

试试这个......

＆＃13;

＆＃13;

body {
  background: #c4c7cb;
  background-image: -webkit-radial-gradient(cover, #FFF, #D1D1D1);
  background-image: -moz-radial-gradient(cover, #e8eaec, #a4a8ae);
  background-image: -o-radial-gradient(cover, #e8eaec, #a4a8ae);
  background-image: radial-gradient(cover, #e8eaec, #a4a8ae)
}
html {
  min-height: 100%;
}
.Navigation {
  height: 50px;
  padding: 0;
  margin: 0;
  position: absolute;
}
.Navigation li {
  height: auto;
  width: 150px;
  float: left;
  text-align: center;
  list-style: none;
  font: 12px"Bonveno", "Century Gothic";
  padding: 0;
  margin: 0;
  background-color: #eee;
  border: 1px solid #ccc;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 1px 3px rgba(0, 0, 0, .1);
  border-radius: 3px;
  margin-left: 10px;
}
.Navigation a {
  padding: 13px;
  text-decoration: none;
  color: #333;
  text-shadow: 0 1px #fff;
  display: block;
}
.Navigation li ul {
  display: none;
  height: auto;
  margin-left: -11px;
  padding: 0;
}
.Navigation li ul li ul {
  display: none !important;
  height: auto;
  margin-left: -11px;
  padding: 0;
}
.Navigation li:hover ul {
  display: block;
}
.Navigation li ul li:hover ul {
  display: block !important;
}
.Navigation li:hover,
a:hover {
  background: #e8e8e8;
}

＆＃13;

<div id="Navigation">
  <ul class="Navigation">
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">About</a>
    </li>
    <li><a href="#">My Portfolio</a>
      <ul>
        <li><a href="#">Web Development</a>
          <ul>
            <li><a href="#">Bootstrap</a>
            </li>
            <li><a href="#">CSS</a>
            </li>
          </ul>
        </li>
        <li><a href="#">Motion Graphics</a>
        </li>
        <li><a href="#">Flash Animation</a>
        </li>
        <li><a href="#">Logo Design</a>
        </li>
        <li><a href="#">Photography</a>
        </li>
      </ul>
    </li>
    <li><a href="#">Services</a>
    </li>
    <li><a href="#">Contact</a>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您只需调整悬停状态规则，以便它们适用于您需要时所需的元素。

.Navigation li:hover > ul {
    display: block;
}

.Navigation li > ul li:hover > ul {
    display: block;
}

请参阅下面的代码段（注意：我已略微缩小菜单项的宽度以使其适合预览窗格）

＆＃13;

＆＃13;

.Navigation li > ul li > ul {
    position: absolute;
    top: 0px;
    left: 127px;
}

.Navigation li > ul li > ul li {
    float: none;
}

.Navigation li > ul li {
    position: relative;
}

body{
  background: #c4c7cb;
  background-image: -webkit-radial-gradient(cover, #FFF,#D1D1D1	);
  background-image: -moz-radial-gradient(cover, #e8eaec, #a4a8ae);
  background-image: -o-radial-gradient(cover, #e8eaec, #a4a8ae);
  background-image: radial-gradient(cover, #e8eaec, #a4a8ae)
}

html{
  min-height:100%;
}

.Navigation{
	height: 50px;
    padding: 0;
	margin: 0;
	position: absolute;
}

.Navigation > li:first-child {
    margin: 0px;
}

.Navigation li 	{
	height: auto;
	width: 115px;
	float: left;
	text-align: center;
	list-style: none;
	font:12px "Bonveno", "Century Gothic";
	padding: 0;
	margin: 0;
	background-color: #eee;
	border: 1px solid #ccc;
	box-shadow: 0 1px 0 rgba(255,255,255, .9) inset, 0 1px 3px rgba(0,0,0, .1);
	border-radius: 3px;
  margin-left:10px;
}

.Navigation a{							
	padding:13px;
	text-decoration: none; 
	color:#333;
	text-shadow: 0 1px #fff;
	display: block;
}
.Navigation li ul{
	display: none;
	height: auto;									
	margin-left: -11px;
	padding: 0;		
}	

.Navigation li:hover > ul {
    display: block;
}

.Navigation li > ul li:hover > ul {
    display: block;
}

.Navigation li:hover, a:hover {
	 background: #e8e8e8;
}

＆＃13;

<div id="Navigation">
			<ul class="Navigation">
           		<li><a href="#">Home</a></li>
				      <li><a href="#">About</a></li>
            	<li><a href="#">My Portfolio</a>
					      <ul>
                  <li><a href="#">Web Development</a>
                      <ul>
                        <li><a href="#">Bootstrap</a></li>
                        <li><a href="#">CSS</a></li>
                      </ul>
                  </li>
                  <li><a href="#">Motion Graphics</a></li>
                  <li><a href="#">Flash Animation</a></li>
                  <li><a href="#">Logo Design</a></li>
                  <li><a href="#">Photography</a></li>
					      </ul>         
			 	      </li>
             	<li><a href="#">Services</a></li>
             	<li><a href="#">Contact</a></li>            
            </ul>
        </div>

＆＃13;

＆＃13;

＆＃13;

从这里开始，您可以简单地将更多样式（如有必要）添加到子菜单项2级或更深层，以显示在父菜单项的右侧（而不是下方）。

将子菜单对齐：

以下规则仅用于演示如何帮助您。我建议改进它们。

.Navigation li > ul li > ul {
    position: absolute;
    top: 0px;
    left: 127px;
}

.Navigation li > ul li > ul li {
    float: none;
}

.Navigation li > ul li {
    position: relative;
}

Answer 4

body {
  background: #c4c7cb;
  background-image: -webkit-radial-gradient(cover, #FFF, #D1D1D1);
  background-image: -moz-radial-gradient(cover, #e8eaec, #a4a8ae);
  background-image: -o-radial-gradient(cover, #e8eaec, #a4a8ae);
  background-image: radial-gradient(cover, #e8eaec, #a4a8ae)
}
html {
  min-height: 100%;
}
.Navigation {
  height: 50px;
  padding: 0;
  margin: 0;
  position: relative;
}
.Navigation li {
  height: auto;
  width: 150px;
  float: left;
  text-align: center;
  list-style: none;
  font: 12px"Bonveno", "Century Gothic";
  padding: 0;
  margin: 0;
  background-color: #eee;
  border: 1px solid #ccc;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 1px 3px rgba(0, 0, 0, .1);
  border-radius: 3px;
  margin-left: 10px;
}
.Navigation a {
  padding: 13px;
  text-decoration: none;
  color: #333;
  text-shadow: 0 1px #fff;
  display: block;
}
.Navigation li ul {
  display: none;
  height: auto;
  margin-left: -11px;
  padding: 0;
  position: absolute;
}
.Navigation li ul li ul {
  display: none !important;
  height: auto;
  margin-left: -11px;
  padding: 0;
}
.Navigation li:hover ul {
  display: block;
}
.Navigation li ul li:hover ul {
  display: block !important;
}
.Navigation li:hover,
a:hover {
  background: #e8e8e8;
}

<div id="Navigation">
  <ul class="Navigation">
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">About</a>
    </li>
    <li><a href="#">My Portfolio</a>
      <ul>
        <li><a href="#">Web Development</a>
          <ul>
            <li><a href="#">Bootstrap</a>
            </li>
            <li><a href="#">CSS</a>
            </li>
          </ul>
        </li>
        <li><a href="#">Motion Graphics</a>
        </li>
        <li><a href="#">Flash Animation</a>
        </li>
        <li><a href="#">Logo Design</a>
        </li>
        <li><a href="#">Photography</a>
        </li>
      </ul>
    </li>
    <li><a href="#">Services</a>
    </li>
    <li><a href="#">Contact</a>
    </li>
  </ul>
</div>