带有悬停垂直子菜单的 CSS 水平菜单
Posted
技术标签:
【中文标题】带有悬停垂直子菜单的 CSS 水平菜单【英文标题】：CSS horizontal menu with hover vertical submenu 【发布时间】：2015-03-18 13:04:00 【问题描述】：我试图让我的水平菜单栏在悬停时显示垂直子菜单，但它并没有按照我想要的方式显示。它应该像这样工作：http://cssmenumaker.com/menu/quartz-responsive-menu，动画和三角形元素根本不重要，只是功能。
这是 html：
<ul class="menu">
<li class="home-page current"><a href="index.html"><span></span></a></li>
<li><a href="o-nama.html">O nama</a>
<ul>
<li><a href="#">Tko smo mi?</a></li>
<li><a href="#">Sajmovi i seminari</a></li>
<li><a href="#">Posao</a></li>
</ul>
</li>
<li><a href="podrska-preuzimanja.html">Podrška i preuzimanja</a></li>
<li><a href="proizvodi.html">Proizvodi</a></li>
<li><a href="korisne-poveznice.html">Korisne poveznice</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
和 CSS：
ul.menu
margin:0 1px 0 0;
border-right:#df3126 1px solid;
display:inline-block;
float:left
ul.menu li
float:left;
line-height:17px;
margin:0 0 0 0;
background:url(../images/transp.png) 0 0 repeat;
border-right:#df3126 1px solid;
border-left:#DF3126 1px solid;
position:relative
ul.menu li a
font-size:13px;
line-height:17px;
color:#fff;
font-weight:bold;
display:block;
padding:23px 28px 24px 28px
ul.menu li.home-page
display:inline-block;
background:url(../images/transp.png) 0 0 repeat;
border-radius:8px 0 0 8px;
border:none !important
ul.menu li:hover,
ul.menu li.current
background:url(../images/current.jpg) 0 0 repeat-x #000000;
border-right:#000000 1px solid;
border-left:#000000 1px solid
ul.menu li.home-page a
padding:21px 22px 24px 23px !important
ul.menu li.home-page span
background:url(../images/home-page-img.png) 0 0 no-repeat;
width:19px;
height:19px;
display:block
.menu-toggle
padding:0px;
background:none;
border-radius: 2 2 2 2;
ul.menu li ul
display:none;
position:absolute;
top:100%;
left:0px;
width:inherit;
padding:0px;
ul.menu li:hover ul
display:block;
有什么建议吗？
【问题讨论】：
我在这里创建了一个小提琴 jsfiddle.net/dgarhecL 将 img 更改为黑色。究竟是什么不工作？ i59.tinypic.com/2yya34i.png 是这样显示的。只有当我将鼠标悬停在子菜单项上时，我才会看到它们。当我将鼠标悬停在父元素 (li) 上时，我想查看整个子菜单。 【参考方案1】：试试这个代码：
<!DOCTYPE html>
<html>
<style>
ul.menu
margin:0 1px 0 0;
display:inline-block;
float:left
ul.menu li
background: none repeat scroll 0 0 #000;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
float: left;
font-family: arial;
line-height: 17px;
margin: 0;
position: relative; list-style:none
ul.menu li a
color: #fff;
display: block;
font-size: 13px;
font-weight: bold;
height: 50px;
line-height: 50px;
padding: 0 10px;
text-decoration: none;
ul.menu li > ul li
width:100%;transition: all 0.7s ease-in 0s;
ul.menu li.home-page
display:inline-block;
background:#000;
border:none !important
ul.menu li:hover,
ul.menu li.current
background:#888;
border-right:#fff 1px solid;
border-left:#fff 1px solid;transition: all 0.7s ease-in 0s;
ul.menu li.home-page a
height: 40px;
line-height: 34px;
padding: 0 10px;
ul.menu li.home-page span
background-color:yellow;
width:19px;
height:19px;
display:block;
margin-top:10px;
.menu-toggle
padding:0px;
background:none;
border-radius: 2px;
ul.menu li ul
display: none;
left: 0;
padding: 13px 0 0;
position: absolute;
top: 50px;
width: 180px;transition: all 0.7s ease-in 0s;
ul.menu li:hover ul
display:block;transition: all 0.7s ease-in 0s;
.arrow
border-bottom: 14px solid #000;
border-left: 14px solid transparent;
border-right: 14px solid transparent;
content: "";
height: 0;
left: 34px;
position: absolute;
top: 0;
width: 0;
</style>
<body>
<ul class="menu">
<li class="home-page current"><a href="index.html"><span></span></a></li>
<li><a href="o-nama.html">O nama</a>
<ul>
<span class="arrow"></span>
<li><a href="#">Tko smo mi?</a></li>
<li><a href="#">Sajmovi i seminari</a></li>
<li><a href="#">Posao</a></li>
</ul>
</li>
<li><a href="podrska-preuzimanja.html">Podrška i preuzimanja</a></li>
<li><a href="proizvodi.html">Proizvodi</a></li>
<li><a href="korisne-poveznice.html">Korisne poveznice</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</body>
</html>
【讨论】：
谢谢，帮了大忙，我稍微改了一下以配合我的设计，放到style.css中。以上是关于带有悬停垂直子菜单的 CSS 水平菜单的主要内容，如果未能解决你的问题，请参考以下文章