带有悬停垂直子菜单的 CSS 水平菜单答案

【问题标题】：CSS horizontal menu with hover vertical submenu带有悬停垂直子菜单的 CSS 水平菜单
【发布时间】：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) 上时，我想查看整个子菜单。

标签： css drop-down-menu navigation hover submenu

【解决方案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中。