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 
}