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

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

html css

如何在HTML和css中使用垂直菜单？,html,css,Html,Css,如何使用垂直菜单，我已经尝试了垂直菜单栏。我没有使用jquery或javascript只使用html和css。当我在垂直菜单上移动鼠标时，它不能正常工作。请帮助我代码如下： <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Vertical m

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

代码如下：

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


垂直菜单
.headerouter1{清除：两个；}
.headerinner1{边距：0自动；宽度：990px；}
.menustart{background:url（images/menustart.png）不重复；宽度：16px；高度：40px；float:left；}
.menumidle{background:url（images/menumidle.png）repeat-x；宽度：900px；高度：40px；float:left；}
.menumidle ul li{float:left；字体系列：Arial，Helvetica，无衬线；填充：15px 20px 0px 20px；字体大小：14px；背景：url（images/menudivider.png）无重复；}
.menumidle ul li a{文本装饰：无；字体系列：Arial，Helvetica，无衬线；填充：15px 20px 0 20px；颜色：#FFFFFF；}
menumiddle ul li a:悬停{color:#000；}
.menuend{background:url（images/menuend.png）不重复；宽度：15px；高度：40px；float:left；}
.menumidle ul{margin:0px；}
.menumidle ul li{列表样式：无；浮点：左；}
menumiddle ul li a{文本装饰：无；}
menumiddle ul li a:悬停{}
.menumiddle ul li a.active{}
.menumidle ul li ul{显示：无；}
.menumidle ul li:悬停ul{margin top:6px；位置：绝对；宽度：195px；显示：块；填充：15px 0px 0px 0px；背景：fff；左边距：-10px；边框底部：2px solid#000；边框左侧：2px solid#000；边框右侧：2px solid#000；}
.menumidle ul li:悬停ul li a{float:左；clear:两者；宽度：185px；字体：粗体12px arial；颜色：000；背景：无；填充：0px 5px 4px 5px；边框底部：1px实心#fafafa；边框半径：15px；左边距：-20px；}
.menumidle ul li:hover ul li a:hover{color:#009cff；}

拉格胡：你需要一些东西吗？当你悬停时，垂直下拉菜单会向下滑动

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

并更改一些填充，如fiddle中所示。

您的CSS编写得非常糟糕。您应该只列出一次元素以及其中定义的所有属性。另外，在创建HTML锚定时，请使用=而不是-

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

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

尝试检查google中的jQuery superfish菜单，查看它们的css以获得垂直实现。那可能会对你有帮助。拉古告诉我们确切的问题是什么……请让我知道你的具体问题是什么？如果我的答案是正确的，那么就把我问你的问题的原因标记为正确（在右边打勾）。现在我们知道你有什么问题了。让我看看。看更新的提琴，我在其中对一个标记进行了更正，在该标记中，您将连字符（-）替换为=运算符。再次检查此项，垂直菜单中没有鼠标悬停。很高兴为您提供帮助。。如果有任何其他问题，您可以提出任何问题。

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

.middlemenu li {display: inline;}