1. 首页
  2. 问答
  3. 如何使用CSS创建具有垂直子菜单的水平HTML菜单？

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

2010-09-20 116 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

相关问题

 相关问题