Question

我的参考站点：https://truththrulove.blogspot.com/

我是这一切的初学者，对于我使用的大多数html代码，我都只是使用了其他人的指南，而我对香肠的制作方法并不十分了解。我对编码不太感兴趣，而对我正在研究的内容更感兴趣。

话虽如此，我从“ https://xomisse.com/blog/add-drop-menu-can-styled-template-designer/”开始使用的指南从未进入子菜单，因此我在使用CSS时遇到了麻烦。子子菜单仅出现在其父菜单块内。（我相信这是对问题的正确陈述，但我不确定），尤其是菜单4。我真的不想更改任何我不需要的内容，因为花了我很长时间才能理解所有内容。这个。有人有智慧吗？请记住，我对此非常陌生。谢谢

<div id="navigationbar">
<ul id='cssnav'>
<li class="active"><a href='#'>Menu 1</a></li>
<li class="sub"><a href=''>Menu2</a>
    <ul>
        <li><a href=''>Menu 1-1</a></li>
        <li><a href=''>Menu 1-2</a></li>
        <li><a href=''>Menu 1-3</a></li>
        <li><a href=''>Menu 1-4</a></li>
        <li><a href=''>Menu 1-5</a></li>
    </ul>
<li class="sub"><a href=''>Menu 3</a>
    <ul>
        <li><a href=''>Menu 2-1</a></li>
        <li><a href=''>Menu 2-2</a></li>
    </ul>
</li>
<li class="sub"><a href=''>Menu 4</a>
    <ul>
        <li><a href=''>Menu 4-1</a></li>
        <li><a href=''>Menu 4-2</a></li>
        <li>
            <a href=''>Menu 4-3</a>
            <ul class="#">   
                <li><a href=''>Menu 4-3A</a></li>
                <li><a target="_blank" rel="noopener noreferrer" href="">Menu 4-3B</a></li>
                <li><a href=''>Menu 4-3C</a></li>
            </ul>
        </li>
        <li><a href=''>Menu 4-4</a></li>
        <li><a href=''>Menu 4-5</a></li>
        <li><a href=''>Menu 4-6</a></li>
        <li><a href=''>Menu 4-7</a></li>
    </ul>
<li class="sub"><a href=''>Menu 5</a>
    <ul>
        <li><a href=''>Menu 5-1</a></li>
        <li><a href=''>Menu 5-2</a></li>
    </ul>
<li class="sub"><a href='LINK'>Menu 6</a>
    <ul>
        <li><a href=''>Menu 6-1</a></li>
        <li><a href=''>Menu 6-2</a></li>
    </ul>
</li>
<li class="sub"><a href=''>Menu 7</a>
    <ul>
        <li><a href=''>Menu 7-1</a></li>
        <li><a href=''>Menu 7-2</a></li>
    </ul>
</li>
</ul>
</div>

/* ----- START DROPDOWN CSS BY XOMISSE ----- */
#cssnav { 
border: 1px;
margin: 0px;
padding: 0px;
width: auto;
font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */
color: $(tabs.text.color); /* Template Designer - Change Text Colour */
}

#cssnav ul {
background: $(tabs.background.color); /* Template Designer - Change Menu Background */
height: 100%; /* Change Height of Menu */
list-style: none;
margin: 0px;
padding: 0px;
}

#cssnav li {
float: none;
display: inline-block;
padding: 0px;
border: 1px solid #ffffff;
}

#cssnav li a {
background: $(tabs.background.color); /* Template Designer - Change Menu Background */
display: block;
margin: 0px;
text-align: center;
font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */
text-decoration: none;
}

#cssnav > ul > li > a {
color: $(tabs.text.color); /* Template Designer - Change Text Color */
}

#cssnav ul ul a { 
color: $(tabs.text.color); /* Template Designer - Change Text Color */
}

#cssnav li > a:hover, #cssnav ul li:hover {
color: $(tabs.selected.text.color); /* Template Designer - Change Text Color on Hover */
background-color: $(tabs.selected.background.color); /* Template Designer - Change Font Background on Hover */
text-decoration: none;
}


/*--- adjusts  menu width ---*/

#cssnav li ul {
background: $(tabs.background.color); /* Template Designer - Change Menu Background */
display: none;
height: auto;
padding: 5px;
margin: 0px;
border: 4px;
position: absolute;
width: auto; /* Change Width Of DropDown Menu */
z-index:9999;
}

#cssnav li:hover ul {
display: block;
height: auto;
}

#cssnav li ul :hover li {
display: block;
height: auto;
}


#cssnav li li {
background: $(tabs.background.color); /* Template Designer - Change Background */
display: block;
float: none;
margin: 0px;
padding: 0px;
width: auto; /* Change Width Of DropDown Menu */
}

#cssnav li:hover li a {
background: #FFFFFF; /* Template Designer - Change Background of Link on Hover */
}

#cssnav li ul a {
display: block;
height: 100%;
margin: 0px;
padding: 10px;
text-align: left;
}

#cssnav li ul a:hover, #cssnav li ul li:hover > a {
color: $(tabs.selected.text.color); /* Template Designer - Change Text Color on Hover */
background-color: $(tabs.selected.background.color); /* Template Designer - Change Background on Hover */
border: 4px;
text-decoration: none;
}











/*--- Sublist Styles ---*/

#cssnav li:hover ul ul {display:none;} /* hides sub-sublists */
#cssnav li li:hover ul {
    display:block; /* shows sub-sublist on hover */
    margin-left:100px; /* this should be the same width as the parent list item */
    margin-top:-30px; /* aligns top of sub menu with top of list item */
    }






/* ----- END DROPDOWN CSS BY XOMISSE ----- */

子子菜单不显示过去的父项

0 个答案: