HTML：2導致問題的導航

Question

我對在css和html中編碼以下設計感到非常沮喪。我需要兩個導航（一個灰色和另一個黑色），它們擁有一個簡單的段落標籤，用於「呼叫我們」，然後是兩個按鈕（見右上角）。第一個按鈕很簡單，它打開觀衆的電子郵件客戶端，但其次是一個搜索欄，需要點擊時擴展。我不知道如何在JavaScript/CSS中做到這一點。在第二個導航中，我只能將h1標籤浮動到導航（主頁）旁邊。我將如何編碼這兩個導航在HTML和CSS？

我已經知道如何在漸變色格式化的背景，它的我需要

所有幫助幫助內容配售讚賞有萬分的感謝！ :)

編輯： 代碼添加（這是沒有在附近正確）

<div id="top-nav-bar"> 
<div class="container"> 

<ul class="top-nav"> 
<li><p>Call us 1234 567 891</p><li> 

<li> <a href="mailto:"><img src="img/mail.png"/></a></li> 
<li><form class="sidebar-search"><div class="input-box"><a class="remove"href="javascript:;"></a><input type="text"></input><input class="submit" type="button" value="text"></input></div></form></li> 
</ul> 

</div> 
</div> 

<header id="header"> 

<div class="container"> 
<div class="sixteen columns"> 

<nav id="nav"> 

<ul> 
    <li class="h1-logo"><h1>Logo</h1></li> 
    <li><a href="index.html">home</a></li> 
    <li><a href="properties.html">lease</a></li> 
    <li><a href="manage.html">manage</a></li> 
    <li><a href="contact.html">contact</a></li> 
</ul> 
</nav> 

</div> 
</div> 

Answer 1

我認爲這個代碼幫助您開發您的網站領先。 Goodluck，如果您有任何問題，請寫信給我。

HTML

<div class="top-menu"> 
    <h1>Call on 5455234523523</h1> 
    <div> 
     <a href="">mail</a> 
     <div class="search-box"> 
      <span id="search">search</span> 
      <input id="search-input" type="text" /> 
     </div>  
    </div> 
</div> 
<div class="bottom-menu"> 

</div> 

CSS

body { 
    font-size: 10px; 
    font-family: tahoma; 
    color: #fff; 
} 
a { 
    color: #999; 
    text-decoration: none; 
} 
a:hover { 
    text-decoration: underline;  
} 
.top-menu, .bottom-menu { 
    clear: both; 
    width: 100%; 
    height: 30px; 
    line-height: 30px; 
    vertical-align: middle; 
} 
.top-menu { 
    background-color: #000; 
} 
.bottom-menu { 
    background-color: #999;  
} 
.top-menu h1 { 
    float: left; 
    font-size: 11px; 
    margin: 0 0 0 10px; 
    font-weight: normal; 
    padding: 0; 
} 
.top-menu > div { 
    float: right; 
    width: 200px; 
} 
.top-menu > div * { 
    float: left; 
    margin: 0 5px; 
} 
.top-menu input { 
    display: none; 
    width: 100px; 
} 
.top-menu #search { 
    cursor: pointer; 
} 

jQuery的

$('#search').click(function(){ 
    $('#search-input').toggle(); 
}); 

DEMO

http://jsfiddle.net/LZYsA/