Question

在下面有关于menu1悬停的代码中，我想显示子菜单，但它不起作用。我在css下方应用。请修改我错的代码。

HTML

<div class="primary_nav_wrap">
        <ul>
            <li class="current-menu-item"><a href="#">Home</a></li>
            <li>
                <a href="#">Menu 1</a>
                <div class="sub_divsavedfun" id="Functions_1-5">
                    <ul>
                        <li><a href="#">Sub Menu 1</a></li>
                        <li><a href="#">Sub Menu 2</a></li>
                        <li><a href="#">Sub Menu 3</a></li>
                        <li>
                            <a href="#">Sub Menu 4</a>
                            <ul>
                                <li>
                                    <a href="#">Deep Menu 1</a>
                                    <ul>
                                        <li><a href="#">Sub Deep 1</a></li>
                                        <li><a href="#">Sub Deep 2</a></li>
                                        <li><a href="#">Sub Deep 3</a></li>
                                        <li><a href="#">Sub Deep 4</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">Deep Menu 2</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Sub Menu 5</a></li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>

CSS

<style>
        .primary_nav_wrap
{
    margin-top:15px
}

.primary_nav_wrap ul
{
    list-style:none;
    position:relative;
    float:left;
    margin:0;
    padding:0
}

.primary_nav_wrap ul a
{
    display:block;
    color:#333;
    text-decoration:none;
    font-weight:700;
    font-size:12px;
    line-height:32px;
    padding:0 15px;
    font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}

.primary_nav_wrap ul li
{
    position:relative;
    float:left;
    margin:0;
    padding:0
}

.primary_nav_wrap ul li.current-menu-item
{
    background:#ddd
}

.primary_nav_wrap ul li:hover
{
    background:#f6f6f6
}

.primary_nav_wrap ul ul 
{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    background:#fff;
    padding:0
}

.primary_nav_wrap ul ul li
{
    float:none;
    width:200px
}

.primary_nav_wrap ul ul a
{
    line-height:120%;
    padding:10px 15px
}

.primary_nav_wrap ul ul ul
{
    top:0;
    left:100%
}

.primary_nav_wrap ul li:hover > ul
{
    display:block
}
    </style>

如果我删除了<div class="sub_divsavedfun" id="Functions_1-5">，那么它就能正常工作。但根据要求我添加了div代码。

Answer 1

在css中添加它并且它正常工作

您在子ul之前添加div，因此在css .primary_nav_wrap ul li:hover > ul找不到任何ul。因为HTML元素的结构现在是.primary_nav_wrap ul > li > div > ul

.primary_nav_wrap ul li:hover > div > ul
{
    display:block
}

选中此Demo

Answer 2

添加此css

.primary_nav_wrap ul li:hover .sub_divsavedfun > ul
{
    display:block
}

https://jsfiddle.net/mrob21h7/1/

Answer 3

div而非li的{{1}}直接孩子。所以只需替换代码：

ul

to：

.primary_nav_wrap ul li:hover > ul {
  display: block
}

工作代码段

＆＃13;

.primary_nav_wrap ul li:hover div > ul, .primary_nav_wrap ul li:hover > ul  {
  display: block
}

＆＃13;

.primary_nav_wrap {
  margin-top: 15px
}
.primary_nav_wrap ul {
  list-style: none;
  position: relative;
  float: left;
  margin: 0;
  padding: 0
}
.primary_nav_wrap ul a {
  display: block;
  color: #333;
  text-decoration: none;
  font-weight: 700;
  font-size: 12px;
  line-height: 32px;
  padding: 0 15px;
  font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif
}
.primary_nav_wrap ul li {
  position: relative;
  float: left;
  margin: 0;
  padding: 0
}
.primary_nav_wrap ul li.current-menu-item {
  background: #ddd
}
.primary_nav_wrap ul li:hover {
  background: #f6f6f6
}
.primary_nav_wrap ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  padding: 0
}
.primary_nav_wrap ul ul li {
  float: none;
  width: 200px
}
.primary_nav_wrap ul ul a {
  line-height: 120%;
  padding: 10px 15px
}
.primary_nav_wrap ul ul ul {
  top: 0;
  left: 100%
}
/* CODE REPLACED BY BELOW
.primary_nav_wrap ul li:hover > ul {
  display: block
}
*/

/*Code added */
.primary_nav_wrap ul li:hover div > ul, .primary_nav_wrap ul li:hover > ul  {
  display: block
}

＆＃13;

绘画子菜单中的问题

3 个答案: