CSS导航栏错误

Question

我是新来的CSS，我需要导航栏帮助。我需要在ABOUT US部分获得该子主题，但我无法得到它，它似乎一直到右侧。任何东西将不胜感激。 如果需要，我可以提供HTML文件。

CSS：

container{ 
    position: relative; 
    height: 70px; 
    width: 1100px; 
} 

.masthead{ 
    background: #039be5; 
    width: 100%; 
    top: 0; 
    position: fixed; 
    color: white; 
} 

.logo{ 
    position: relative; 
    float: left; 
    left: 90px; 
    font-family: Josefin Slab; 
    font-size: 21px; 
    top: 17px; 

} 
.logo h1 a {color: white; text-decoration: none; } 

h1{ 
    margin: 0; 
} 

a:link {color: white; text-decoration: none; } 
a:visited {color: white; text-decoration: none; } 
a:hover {color: white; color: black; } 
a:active {color: white; text-decoration: none; } 

#navcontent{ 
    word-spacing: 4px; 
} 

li{ 
    position: relative; 
    left: 155px; 
    list-style: none; 
    font-family: Raleway; 
    float: left; 
    margin-left: 21px; 
    padding-top: 15px; 
    font-size: 20px; 
} 

.navigation{ 
    float: right; 
} 

.navigation ul>li ul{ 
    height: 100%; 
    position: relative; 
    bottom: 100%; 
} 

.navigation ul>li ul>li{ 
    bottom: 0px; 
    display: none; 
} 

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

.navigation>ul>li a:hover { 
    text-decoration: none; 
    cursor:pointer; 
} 

HTML

<div class="masthead"> 
    <div class="container"> 
     <div class="logo"> 
      <h1><a href="index.htm"> MY SITE</a></h1> 

     </div> 
     <div class="navigation"> 
      <ul> 
       <li><a href="courses.htm">Courses</a> 
       </li> 
       <li><a href="institution.htm">Places</a> 
       </li> 
       <li><a href="about.htm">More</a> 

        <ul> 
         <li><a href="#">Share</a> 
         </li> 
         <li><a href="#"> Help</a> 
         </li> 
        </ul> 
       </li> 
       <li id="navcontent">||<a href="signin.htm"> Sign In </a> 
       </li> 
       <li><a href="signup.htm">Sign Up</a> 
       </li> 
      </ul> 
     </div> 
    </div> 
</div> 

Fiddle

Answer 1

给点,,

CSS

ul{ 
    list-style:none; 
    position:relative; 
    float:left; 
    margin:0; 
    padding:0 
} 
ul a 
{ 
    display:block; 
    color:#333; 
    text-decoration:none; 
    font-weight:700; 
    font-size:12px; 
    line-height:32px; 
    padding:0 15px; 
} 
ul li 
{ 
    position:relative; 
    float:left; 
    margin:0; 
    padding:0 
} 
ul li:hover 
{ 
    background:#f6f6f6 
} 
ul ul 
{ 
    display:none; 
    position:absolute; 
    top:100%; 
    left:0; 
    background:#fff; 
    padding:0 
} 
ul ul li 
{ 
    float:none; 
    width:200px 
} 
ul ul a 
{ 
    line-height:120%; 
    padding:10px 15px 
} 
ul ul ul 
{ 
    top:0; 
    left:100% 
} 
ul li:hover > ul 
{ 
    display:block 
} 

Live result here。 希望这有助于

UPDATE

好了，原因是什么乔恩P请求我将描述该代码。 其实主要的关键是：

ul ul 
{ 
    display:none; 
    position:absolute; 
    top:100%; 
    left:0; 
    background:#fff; /*remove, no effect*/ 
    padding:0 /*remove, no effect*/ 
} 

首先，我们让孩子（<ul>）变为隐藏与display: none，并给它的属性position:absolute, top:100%, left:0;让它的MORE链接

然后我们想要什么下？当我们悬停MORE链接时显示它。要做到这一点，只需简单地通过让该孩子（<ul>）可见即可。当然，我们使用这个属性：

ul li:hover > ul 
{ 
    display:block 
}