2

如何使用垂直菜单，我已经尝试过垂直菜单栏。我没有使用 jquery 或 javascript，只使用 html 和 css。当 iam 将鼠标悬停在这个垂直菜单上时它不能正常工作。请帮助我。

这是代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vertical menu</title>
<style type="text/css">
.headerouter1{clear:both;}
.headerinner1{ margin:0 auto; width:990px;}
.menustart{ background:url(images/menustart.png) no-repeat; width:16px; height:40px; float:left;}
.menumiddle{background:url(images/menumiddle.png) repeat-x; width:900px; height:40px; float:left; }
.menumiddle ul li{ float:left; font-family:Arial, Helvetica, sans-serif; padding:15px 20px 0px 20px;font-size:14px; background:url(images/menudivider.png) no-repeat;}
.menumiddle ul li a{text-decoration:none; font-family:Arial, Helvetica, sans-serif;padding:15px 20px 0 20px;color:#FFFFFF;}
.menumiddle ul li a:hover{ color:#000;}
.menuend{ background:url(images/menuend.png) no-repeat; width:15px; height:40px;float:left;}
.menumiddle ul{ margin:0px; }
.menumiddle ul li{ list-style:none; float:left; }
.menumiddle ul li a{ text-decoration:none;}
.menumiddle ul li a:hover{ }
.menumiddle ul li a.active{ }
.menumiddle ul li ul{display: none;}
.menumiddle ul li:hover ul{ margin-top:6px;position:absolute;width:195px;display:block;padding:15px 0px 0px 0px;background:#fff;  margin-left:-10px;border-bottom:2px solid #000;border-left:2px solid #000;border-right:2px solid #000;}
.menumiddle ul li:hover ul li a{float:left;clear:both;width:185px;font:bold 12px arial;color:#000;background:none; padding:0px 5px 4px 5px; border-bottom:1px solid #fafafa; border-radius:15px;margin-left:-20px; }
.menumiddle ul li:hover ul li a:hover{ color:#009cff;}
</style>
</head>

<body>
<div class="headerouter1">
<div class="headerinner1 ">

<div class="menustart"></div>
        <div class="menumiddle">
            <ul>
            <li><a href="#">Home</a>
            <ul style="list-style:none;">
            <li><a href-"#">sdsd</a></li>
            <li><a href-"#">sdsd</a></li>
                        <li><a href-"#">sdsd</a></li>
                        <li><a href-"#">sdsd</a></li>
                        <li><a href-"#">sdsd</a></li>
            </ul></li>
            <li><a href="#">Home</a>
            <ul style="list-style:none;">
            <li><a href-"#">sdsd</a></li>
                        <li><a href-"#">sdsd</a></li>
                        <li><a href-"#">sdsd</a></li>
                        <li><a href-"#">sdsd</a></li>
            </ul></li>
            </li>

<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
</ul>
</div>
<div class="menuend"></div>

</div>
</div>
</div>
</div>
</body>
</html>
4

2 回答 2

1

Raghu 您是否需要类似http://jsfiddle.net/K6dvs/的东西，其中垂直下拉菜单在悬停时会向下滑动。

.menumiddle > ul{height:40px; overflow:hidden;}

并更改一些填充参见小提琴。

于 2012-12-07T09:31:53.533 回答
0

你的 CSS 写得很糟糕。您应该只列出一个元素并在其中定义所有属性。同样，在创建 HTML 锚点时，使用 = 而不是 -。

<a href="#">sdsd</a>

以下是您尝试在 HTML5 中实现的基础知识。

<!DOCTYPE html>
<html>
    <head>
        <title></title>

        <style type="text/css">
            .menumiddle ul {list-style: none; padding: 0px; font-family:Arial, Helvetica, sans-serif;}
            .menumiddle li a {text-decoration: none;}
            .menumiddle li a:hover {text-decoration: underline;}
        </style>


        <meta charset="UTF-8">
    </head>
    <body>
        <div class="menumiddle">
            <ul>
                <li><a href="page1.html">Page 1</a></li>
                <li><a href="page2.html">Page 2</a></li>
                <li><a href="page3.html">Page 3</a></li>
            </ul>
        </div>
    </body>
</html>

默认情况下，列表元素位于彼此下方（块），如果您希望将其更改为水平列表，请添加以下 CSS 语句。

.middlemenu li {display: inline;}

在列表中定位元素时，您不需要随时使用 float: left。

于 2012-12-07T09:47:35.313 回答