Question

如何使用垂直菜单，我已经尝试了垂直菜单栏。我没有使用jquery或javascript只有html和css.Hhile iam mouseover这个垂直菜单它没有正常工作。请帮助我。

以下是代码：

<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>

Answer 1

Raghu你需要像http://jsfiddle.net/K6dvs/这样的东西，你的垂直下拉菜单在悬停时会向下滑动。

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

并在小提琴中更改一些填充。

Answer 2

你的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。

如何在HTML和CSS中使用垂直菜单？

2 个答案: