1. 首頁
  2. 問答
  3. 如何使用CSS創建具有垂直子菜單的水平HTML菜單？

如何使用CSS創建具有垂直子菜單的水平HTML菜單？

2010-09-20 139 views
2

我想設計一個水平菜單和onMouseover我想要一個垂直子菜單出現。 我衝浪了很多，發現了一些代碼，但是當我執行時，幾乎所有代碼都正確地得到了水平菜單，但是子菜單根本不顯示。如何使用CSS創建具有垂直子菜單的水平HTML菜單？

我在Windows上使用ActivePerl 5.12進行編程。

我正在使用IE7進行顯示，這是爲什麼沒有得到正確的結果？ 請幫助我找到解決方案。謝謝。

下面是一段代碼，我試圖執行..

<style type="text/css"> 
    * { 
     margin: 0; 
     padding: 0; 
    } 

    body { 
     font-family: "Trebuchet MS", Helvetica, Sans-Serif; 
     font-size: 14px; 
    } 

    a { 
     text-decoration: none; 
     color: #838383; 
    } 

    a:hover { 
     color: black; 
    } 

    menu { 
     position: relative; 
     margin-left: 30px; 
    } 

    menu a { 
     display: block; 
     width: 140px; 
    } 

    menu ul { 
     list-style-type: none; 
     padding-top: 5px; 
    } 

    menu li { 
     float: left; 
     position: relative; 
     padding: 3px 0; 
     text-align: center; 
    } 

    menu ul.sub-menu { 
     display: none; 
     position: absolute; 
     top: 20px; 
     left: -10px; 
     padding: 10px; 
     z-index: 90; 
    } 

    menu ul.sub-menu li { 
     text-align: left; 
    } 

    menu li:hover ul.sub-menu { 
     display: block; 
     border: 1px solid #ececec; 
    } 
</style>

HTML部分

<div id="menu"> 
    <ul> 
     <li> 
      <a href="#">Home</a> 
      <ul class="sub-menu"> 
       <li><a href="#">Pages</a></li> 
       <li><a href="#">Archives</a></li> 
       <li><a href="#">New Posts</a></li> 
       <li><a href="#">Recent Comments</a></li> 
      </ul> 
     </li> 
     <li> 
      <a href="#" >About</a> 
      <ul class="sub-menu"> 
       <li><a href="#">Get to know us</a></li> 
       <li><a href="#">Find out what we do</a></li> 
      </ul> 
     </li> 
     <li> 
      <a href="#">Contact</a> 
      <ul class="sub-menu"> 
       <li><a href="#">E-mail Us</a></li> 
       <li><a href="#">Use Our Contact Form</a></li> 
      </ul> 
     </li> 
    </ul> 
</div>

來源

2010-09-20 sonya

+0

可能的重複[如何在CGI Perl程序中創建水平菜單？]（http://stackoverflow.com/questions/3657093/how-do-i-create-a-horizo​​ntal-menu-in- a-cgi-perl-program） – 2010-09-20 14:01:00

+0

你已經問過了。這不是Perl的問題。您可以輸出正確的HTML，就像您使用其他語言一樣。 – 2010-09-20 14:01:38

+0

雖然這是一個古老的問題，但我會建議嘗試看看現場示例：www.blended-menu.com – 2014-02-14 21:44:00

回答

4

首先，如果你有一個選擇，升級到IE8。 IE7真的沒有理由被使用。 :-)也就是說，IE7應該做你想做的事......只是要意識到它有顯着的缺失功能，所以它可能會讓你的生活更加艱難。其次，你的問題說你已經找到了一些'代碼'（教程？），但你沒有得到你想要的結果;如果你告訴我們你已經使用過哪些教程，或者至少向我們展示了一些不起作用的代碼，並告訴我們你遇到了什麼問題，它會有所幫助。

我會盡量提供一個答案，但...

你的問題意味着你要編寫僅由CSS控制的菜單。

考慮到這一點，它並沒有真正不管你用什麼語言來生成HTML，因爲你的HTML應該只需要由嵌套的<ul>和<li>標籤，有幾個ID或類要告訴你的CSS哪裏應用其風格。

從這個角度來看，Perl代碼（或任何其他語言）不應該特別複雜。 CSS可能很複雜，但是這與Perl代碼是分開的。

在CSS中，懸停樣式將允許您構建鼠標懸停下拉功能。不需要Perl（或Javascript）。我建議看看A List Apart網站;這是一個很好的CSS教程網站，並且有一些CSS驅動菜單的很好的例子。

來源

2010-09-20 14:13:29 Spudley

+0

對於不完整的信息，我真的很抱歉。現在我粘貼了我正在工作的代碼。請檢查並幫助我。謝謝。 – sonya 2010-09-21 05:17:28

1 
<html xmlns="http://www.w3.org/1999/xhtml">

CSS代碼

div { 
    width: 550px; 
    margin: 0px auto; 
} 
div ul li a:link, div ul li a:visited { 
    display: block; 
    background-color: #98bf21; 
    font-family: Arial, Helvetica, sans-serif; 
    font-weight: bold; 
    font-size: 14px; 
    color: Red; 
    text-align: center; 
    text-decoration: none; 
    padding: 4px; 
    border-bottom: 1px solid #fff; 
    width: 170px;   
} 
div ul li a:hover{ 
    background-color: #030; 
} 
li ul li a:link, li ul li a:visited { 
    display: block; 
    background-color: #98bf21; 
    font-family: Arial, Helvetica, sans-serif; 
    font-weight: normal; 
    font-size: 12px; 
    color: Blue; 
    text-align: center; 
    text-decoration: none; 
    padding: 4px; 
    border-bottom: 1px solid #fff; 
    width: 170px; 
} 
li ul li a:hover { 
    background-color: #050; 
} 
ul { 
    list-style-type: none; 
    margin: 0px; 
    padding: 0px; 
} 
div ul li { 
    float: left; 
    margin-left: 5px; 
} 
ul li ul li { 
    float: none; 
    margin-left: 0px; 
} 
li ul { 
    display: none; 
} 
li:hover ul{ 
    display: block; 
}

HTML

<div> 
    <ul> 
     <li><a href="#">Menu 1</a></li> 
     <li><a href="#">Menu 1</a> 
      <ul> 
       <li><a href="#">Sub 1</a></li> 
       <li><a href="#">Sub 2</a></li> 
       <li><a href="#">Sub 3</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Menu 3</a> 
      <ul> 
       <li><a href="#">Sub 4</a></li> 
       <li><a href="#">Sub 5</a></li> 
       <li><a href="#">Sub 6</a></li>   
      </ul> 
     </li> 
    </ul> 
</div>

來源

2013-03-12 13:51:19 user2161297

相關問題

 相關問題