我有一个水平导航栏，我将子菜单设置为仅当您将鼠标悬停在父级上方时显示，但是当我将鼠标移动到父母下方几英寸处时子菜单显示出来。我不知道如何解决这个问题。
HTML：
<body>
<header>
<div class="nav">
<ul class="mainmenu">
<li><a href="home.html">Home</a></li>
<li><a href="photography.html">Photography</a>
<ul class="submenu">
<li><a href="#belize">Belize</a></li>
<li><a href="#fernie">Fernie BC</a></li>
<li><a href="#montana">Montana</a></li>
<li><a href="#philippines">Philippines</a></li>
<li><a href="#tahoe">Lake Tahoe</a></li>
<li><a href="#kids">The Kids</a></li>
</ul>
</li>
<li><a href="woodworking.html">Woodworking</a>
<ul class="submenu">
<li><a href="woodworking.html#furniture">Furniture</a></li>
<li><a href="woodworking.html#cutting">Cutting Boards</a></li>
<li><a href="woodworking.html#bandsaw">Bandsaw Boxes</a></li>
<li><a href="woodworking.html#keepsake">Keepsake Boxes</a></li>
<li><a href="woodworking.html#odds">Odds & Ends</a></li>
</ul>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</header>
</body>
</html>
CSS：
body {
background-color: rgb(51,51,51);
color: white;
}
.nav > ul {
list-style: none;
background-color: rgba(0, 0, 0, 0.6);
text-align: center;
padding: 10px;
width: 100%;
}
.nav > li {
width: 230px;
border-bottom: none;
height: 50px;
line-height: 40px;
display: inline-block;
margin-right: -4px;
}
.nav > ul > li {
list-style-type: none;
display:inline-block;
padding: 5px 35px 5px 35px;
position: relative;
text-align: left;
line-height: 40px;
font-size: 25px;
}
.nav > ul > li:hover {
background-color: #009933;
}
ul.submenu {
position: absolute;
background-color: #141414;
list-style-type: none;
width: 190px;
padding-left: 0px;
padding-top: 5px;
padding-right: 60px;
margin-top: 15px;
margin-left: -35px;
opacity: 0;
}
ul.submenu li {
padding-left: 25px;
padding-top: 5px;
padding-bottom: 5px;
}
.nav li:hover .submenu {
opacity: 1;
}
ul.submenu li:hover {
color: white;
}
.nav a {
text-decoration: none;
color: white;
display: block;
padding-left: 15px;
padding-right: 15px;
transition: .3s background-color;
}
.nav a:hover {
background-color: #009933;
color: black;
}
答案 0 :(得分：0)
将您的css更改margin-top: 15px更新为margin-top: 5px
隐藏时设置display: none;，因此将鼠标悬停在导航菜单下方不会触发它。
ul.submenu {
position: absolute;
background-color: #141414;
list-style-type: none;
width: 190px;
padding-left: 0px;
padding-top: 5px;
padding-right: 60px;
margin-top: 5px;
margin-left: -35px;
opacity: 0;
display: none;
}
将其添加到.submenu，以便将其设置为display:block;：
.nav li:hover .submenu {
opacity: 1;
display: block;
z-index: 9999;
}
/* ************************************* HOME PAGE **************************************** */
#homeImage {
background: url("fernielow.jpg");
background-repeat: no-repeat;
background-size: cover;
font-family: 'Oswald', sans-serif;
color: white;
letter-spacing: 2px;
}
h1 {
background-color: rgba(0, 0, 0, 0.6);
text-align: center;
padding: 10px;
width: 99%;
margin-top: 450px;
}
h1 a {
text-decoration: none;
}
h1 a:visited {
text-decoration: none;
color: white;
}
h1 a:hover {
background-color: #009933;
padding: 10px 20px 10px 20px;
color: black;
}
h1 a:active {
text-decoration: underline;
}
/* ************************************* NAVIGATION **************************************** */
body {
background: url("");
background-color: rgb(51, 51, 51);
background-repeat: no-repeat;
background-size: cover;
font-family: 'Oswald', sans-serif;
color: white;
letter-spacing: 2px;
}
/* LOOK @ NAV AND THEN @ UL */
.nav>ul {
list-style: none;
background-color: rgba(0, 0, 0, 0.6);
text-align: center;
padding: 10px;
width: 100%;
}
.nav>li {
width: 230px;
border-bottom: none;
height: 50px;
line-height: 40px;
display: inline-block;
margin-right: -4px;
}
/* LOOK @ NAV THEN @ UL THEN @ LI*/
.nav>ul>li {
list-style-type: none;
display: inline-block;
padding: 5px 35px 5px 35px;
position: relative;
text-align: left;
line-height: 40px;
font-size: 25px;
}
.nav>ul>li:hover {
background-color: #009933;
}
ul.submenu {
position: absolute;
background-color: #141414;
list-style-type: none;
width: 190px;
padding-left: 0px;
padding-top: 5px;
padding-right: 60px;
margin-top: 5px;
margin-left: -35px;
opacity: 0;
display: none;
}
ul.submenu li {
padding-left: 25px;
padding-top: 5px;
padding-bottom: 5px;
}
/* WHEN HOVER OVER NAV LIST, I WANT SUBMENU TO CHANGE */
.nav li:hover .submenu {
opacity: 1;
display: block;
z-index: 9999;
}
ul.submenu li:hover {
color: white;
}
.nav a {
text-decoration: none;
color: white;
display: block;
padding-left: 15px;
padding-right: 15px;
transition: .3s background-color;
}
.nav a:hover {
background-color: #009933;
color: black;
}
/* ************************************* CONTACT PAGE **************************************** */
#contactInfo ul {
list-style: none;
background: rgba(0, 0, 0, 0.8);
border: 5px black solid;
margin-top: 175px;
margin-left: 750px;
width: 300px;
}
.contactAddress {
font-size: 25px;
text-align: center;
padding: 10px;
display: inline-block;
line-height: 40px;
}
#contactInfo ul li a:link {
text-decoration: none;
background-color: rgba(0, 153, 51, 0.8);
padding: 1px 5px 1px 5px;
color: black;
font-weight: bold;
}
#contactInfo ul li a:visited {
text-decoration: none;
}
#contactInfo ul li a:hover {
text-decoration: underline;
}
#contactInfo ul li a:active {
text-decoration: underline;
}
/* ************************************* ABOUT PAGE **************************************** */
#aboutMe {
font-size: 25px;
text-align: center;
padding: 20px;
display: inline-block;
border: 5px black solid;
background-color: rgba(0, 0, 0, 0.8);
width: 800px;
margin-top: 50px;
margin-left: 550px;
line-height: 35px;
}
/* ************************************* PHOTOGRAPHY PAGE **************************************** */
.picContainer {
width: 1032px;
float: left;
margin-top: 50px;
margin-left: 23%;
background-color: rgba(0, 0, 0, 0.8);
border: 5px black solid;
}
.picContainer h2 {
text-align: center;
font-size: 30px;
}
.pic {
width: 300px;
height: 300px;
margin: 15px;
border: 5px black solid;
}
hr {
height: 10px;
border: 0;
box-shadow: 0 10px 10px -3px black inset;
}
/* ************************************* TOP TO PAGE **************************************** */
#myBtn {
display: none;
/* Hidden by default */
position: fixed;
/* Fixed/sticky position */
bottom: 50px;
/* Place the button at the bottom of the page */
right: 50px;
/* Place the button 30px from the right */
z-index: 99;
/* Make sure it does not overlap */
border: none;
/* Remove borders */
outline: none;
/* Remove outline */
background-color: white;
/* Set a background color */
color: black;
/* Text color */
cursor: pointer;
/* Add a mouse pointer on hover */
padding: 10px;
/* Some padding */
border-radius: 3px;
/* Rounded corners */
font-family: 'Oswald', sans-serif;
letter-spacing: 2px;
font-weight: bolder;
font-size: 15px;
}
#myBtn:hover {
background-color: #009933;
/* Add a dark-grey background on hover */
}<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="sawdust.css" />
<title>Sawdust & Splinters</title>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<header>
<div class="nav">
<ul class="mainmenu">
<li><a href="home.html">Home</a></li>
<li><a href="photography.html">Photography</a>
<ul class="submenu">
<li><a href="#belize">Belize</a></li>
<li><a href="#fernie">Fernie BC</a></li>
<li><a href="#montana">Montana</a></li>
<li><a href="#philippines">Philippines</a></li>
<li><a href="#tahoe">Lake Tahoe</a></li>
<li><a href="#kids">The Kids</a></li>
</ul>
</li>
<li><a href="woodworking.html">Woodworking</a>
<ul class="submenu">
<li><a href="woodworking.html#furniture">Furniture</a></li>
<li><a href="woodworking.html#cutting">Cutting Boards</a></li>
<li><a href="woodworking.html#bandsaw">Bandsaw Boxes</a></li>
<li><a href="woodworking.html#keepsake">Keepsake Boxes</a></li>
<li><a href="woodworking.html#odds">Odds & Ends</a></li>
</ul>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</header>
<button onclick="topFunction()" id="myBtn" title="Go to top">Go back to top</button>
<div class=picContainer>
<span id="belize">
<h2>BELIZE</h2>
<a href="photos/belize/pano.jpg"><img class="pic" src="photos/belize/pano-thumb.jpg" alt="San Pedro Panoramic"/></a>
<a href="photos/belize/broken.jpg"><img class="pic" src="photos/belize/broken-thumb.jpg" alt="San Pedro Broken Bridge"/></a>
<a href="photos/belize/beach.jpg"><img class="pic" src="photos/belize/beach-thumb.jpg" alt="San Pedro Beach"/></a>
<a href="photos/belize/ruins.jpg"><img class="pic" src="photos/belize/ruins-thumb.jpg" alt="Xunantunich Ruins"/></a>
<a href="photos/belize/zoo1.jpg"><img class="pic" src="photos/belize/zoo1-thumb.jpg" alt="San Pedro Zoo"/></a>
<a href="photos/belize/zoo2.jpg"><img class="pic" src="photos/belize/zoo2-thumb.jpg" alt="San Pedro Zoo"/></a>
<a href="photos/belize/zoo3.jpg"><img class="pic" src="photos/belize/zoo3-thumb.jpg" alt="San Pedro Zoo"/></a>
<a href="photos/belize/zoo4.jpg"><img class="pic" src="photos/belize/zoo4-thumb.jpg" alt="San Pedro Zoo"/></a>
<a href="photos/belize/cotton-tree.jpg"><img class="pic" src="photos/belize/cotton-tree-thumb.jpg" alt="Belize Cotton Tree"/></a>
</span>
<br>
<br>
<br>
<br>
<hr>
<span id="fernie">
<h2>FERNIE, BC</h2>
<a href="photos/fernie/fernie.jpg"><img class="pic" src="photos/fernie/fernie-thumb.jpg" alt="Fernie"/></a>
</span>
<br>
<br>
<br>
<br>
<hr>
<span id="montana">
<h2>MONTANA</h2>
<a href="photos/montana/dog-park-mtns.jpg"><img class="pic" src="photos/montana/dog-park-mtns-thumb.jpg" alt="Spanish Peaks"/></a>
<a href="photos/montana/fairy-lake-bw.jpg"><img class="pic" src="photos/montana/fairy-lake-bw-thumb.jpg" alt="Fairy Lake"/></a>
<a href="photos/montana/gallatin.jpg"><img class="pic" src="photos/montana/gallatin-thumb.jpg" alt="Gallatin River"/></a>
<a href="photos/montana/grotto.jpg"><img class="pic" src="photos/montana/grotto-thumb.jpg" alt="Grott Falls"/></a>
<a href="photos/montana/hyalite.jpg"><img class="pic" src="photos/montana/hyalite-thumb.jpg" alt="Hyalite River"/></a>
<a href="photos/montana/mtns.jpg"><img class="pic" src="photos/montana/mtns-thumb.jpg" alt="Mountains"/></a>
<a href="photos/montana/natural.jpg"><img class="pic" src="photos/montana/natural-thumb.jpg" alt="Natural Bridge Falls"/></a>
<a href="photos/montana/palisades1.jpg"><img class="pic" src="photos/montana/palisades1-thumb.jpg" alt="Palisades Mountain"/></a>
<a href="photos/montana/palisades2.jpg"><img class="pic" src="photos/montana/palisades2-thumb.jpg" alt="Palisades Falls"/></a>
<a href="photos/montana/sunset1.jpg"><img class="pic" src="photos/montana/sunset1-thumb.jpg" alt="Sunset"/></a>
<a href="photos/montana/sunset2.jpg"><img class="pic" src="photos/montana/sunset2-thumb.jpg" alt="Sunset"/></a>
<a href="photos/montana/sunset3.jpg"><img class="pic" src="photos/montana/sunset3-thumb.jpg" alt="Sunset"/></a>
</span>
<br>
<br>
<br>
<br>
<hr>
<span id="philippines">
<h2>PHILIPPINES</h2>
<a href="photos/philippines/temple.jpg"><img class="pic" src="photos/philippines/temple-thumb.jpg" alt="Sunken Temple"/></a>
<a href="photos/philippines/katibawasan.jpg"><img class="pic" src="photos/philippines/katibawasan-thumb.jpg" alt="Katibawasan Falls"/></a>
<a href="photos/philippines/camiguin1.jpg"><img class="pic" src="photos/philippines/camiguin1-thumb.jpg" alt="Camiguin"/></a>
<a href="photos/philippines/camiguin2.jpg"><img class="pic" src="photos/philippines/camiguin2-thumb.jpg" alt="Camiguin"/></a>
<a href="photos/philippines/camiguin3.jpg"><img class="pic" src="photos/philippines/camiguin3-thumb.jpg" alt="Camiguin"/></a>
<a href="photos/philippines/camiguin4.jpg"><img class="pic" src="photos/philippines/camiguin4-thumb.jpg" alt="Camiguin"/></a>
<a href="photos/philippines/camiguin5.jpg"><img class="pic" src="photos/philippines/camiguin5-thumb.jpg" alt="Camiguin"/></a>
</span>
<br>
<br>
<br>
<br>
<hr>
<span id="tahoe">
<h2>LAKE TAHOE</h2>
<a href="photos/tahoe/tahoe1.jpg"><img class="pic" src="photos/tahoe/tahoe1-thumb.jpg" alt="Lake Tahoe"/></a>
<a href="photos/tahoe/tahoe2.jpg"><img class="pic" src="photos/tahoe/tahoe2-thumb.jpg" alt="Lake Tahoe"/></a>
<a href="photos/tahoe/tahoe3.jpg"><img class="pic" src="photos/tahoe/tahoe3-thumb.jpg" alt="Lake Tahoe"/></a>
<a href="photos/tahoe/tahoe4.jpg"><img class="pic" src="photos/tahoe/tahoe4-thumb.jpg" alt="Lake Tahoe"/></a>
<a href="photos/tahoe/tahoe5.jpg"><img class="pic" src="photos/tahoe/tahoe5-thumb.jpg" alt="Lake Tahoe"/></a>
</span>
</div>
</body>
</html>
答案 1 :(得分：0)
将建议添加要隐藏在“li”元素上的visibility属性。不透明度0仍然使“li”存在，而“li”元素随子菜单一起延伸。请参阅下面的代码，希望它有所帮助。
body {
background-color: rgb(51,51,51);
color: white;
}
.nav > ul {
list-style: none;
background-color: rgba(0, 0, 0, 0.6);
text-align: center;
padding: 10px;
width: 100%;
}
.nav > li {
width: 230px;
border-bottom: none;
height: 50px;
line-height: 40px;
display: inline-block;
margin-right: -4px;
}
.nav > ul > li {
list-style-type: none;
display:inline-block;
padding: 5px 35px 5px 35px;
position: relative;
text-align: left;
line-height: 40px;
font-size: 25px;
}
.nav > ul > li:hover {
background-color: #009933;
}
ul.submenu {
position: absolute;
background-color: #141414;
list-style-type: none;
width: 190px;
padding-left: 0px;
padding-top: 5px;
padding-right: 60px;
margin-top: 15px;
margin-left: -35px;
opacity: 0;
visibility: hidden;
}
ul.submenu li {
padding-left: 25px;
padding-top: 5px;
padding-bottom: 5px;
}
.nav li:hover .submenu {
opacity: 1;
visibility: visible;
}
ul.submenu li:hover {
color: white;
}
.nav a {
text-decoration: none;
color: white;
display: block;
padding-left: 15px;
padding-right: 15px;
transition: .3s background-color;
}
.nav a:hover {
background-color: #009933;
color: black;
}<body>
<header>
<div class="nav">
<ul class="mainmenu">
<li><a href="home.html">Home</a></li>
<li><a href="photography.html">Photography</a>
<ul class="submenu">
<li><a href="#belize">Belize</a></li>
<li><a href="#fernie">Fernie BC</a></li>
<li><a href="#montana">Montana</a></li>
<li><a href="#philippines">Philippines</a></li>
<li><a href="#tahoe">Lake Tahoe</a></li>
<li><a href="#kids">The Kids</a></li>
</ul>
</li>
<li><a href="woodworking.html">Woodworking</a>
<ul class="submenu">
<li><a href="woodworking.html#furniture">Furniture</a></li>
<li><a href="woodworking.html#cutting">Cutting Boards</a></li>
<li><a href="woodworking.html#bandsaw">Bandsaw Boxes</a></li>
<li><a href="woodworking.html#keepsake">Keepsake Boxes</a></li>
<li><a href="woodworking.html#odds">Odds & Ends</a></li>
</ul>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</header>
</body>
答案 2 :(得分：0)
只需添加可见性：隐藏;和可见性：可见;
ul.submenu {
position: absolute;
background-color: #141414;
list-style-type: none;
width: 190px;
padding-left: 0px;
padding-top: 5px;
padding-right: 60px;
margin-top: 15px;
margin-left: -35px;
opacity: 0;
visibility:hidden; //add this
}
.nav li:hover .submenu {
opacity: 1;
visibility:visible; //add this
}
答案 3 :(得分：0)
$("#cssmenu").menumaker({
title: "Menu",
breakpoint: 768,
format: "multitoggle"
});@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu {
font-family: Montserrat, sans-serif;
background: #333333;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu.align-center > ul {
font-size: 0;
text-align: center;
}
#cssmenu.align-center > ul > li {
display: inline-block;
float: none;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu > ul > li > a {
padding: 17px;
font-size: 12px;
letter-spacing: 1px;
text-decoration: none;
color: #dddddd;
font-weight: 700;
text-transform: uppercase;
}
#cssmenu > ul > li:hover > a {
color: #00ff00;
}
#cssmenu > ul > li.has-sub > a {
padding-right: 30px;
}
#cssmenu > ul > li.has-sub > a:after {
position: absolute;
top: 22px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu > ul > li.has-sub > a:before {
position: absolute;
top: 19px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu > ul > li.has-sub:hover > a:before {
top: 23px;
height: 0;
}
#cssmenu ul ul {
position: absolute;
left: -9999px;
}
#cssmenu.align-right ul ul {
text-align: right;
}
#cssmenu ul ul li {
height: 0;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu li:hover > ul {
left: auto;
}
#cssmenu.align-right li:hover > ul {
left: auto;
right: 0;
}
#cssmenu li:hover > ul > li {
height: 35px;
}
#cssmenu ul ul ul {
margin-left: 100%;
top: 0;
}
#cssmenu.align-right ul ul ul {
margin-left: 0;
margin-right: 100%;
}
#cssmenu ul ul li a {
border-bottom: 1px solid rgba(150, 150, 150, 0.15);
padding: 11px 15px;
width: 170px;
font-size: 12px;
text-decoration: none;
color: #dddddd;
font-weight: 400;
background: #333333;
}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last-item > a {
border-bottom: 0;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
color: #00ff00;
}
#cssmenu ul ul li.has-sub > a:after {
position: absolute;
top: 16px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu.align-right ul ul li.has-sub > a:after {
right: auto;
left: 11px;
}
#cssmenu ul ul li.has-sub > a:before {
position: absolute;
top: 13px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu.align-right ul ul li.has-sub > a:before {
right: auto;
left: 14px;
}
#cssmenu ul ul > li.has-sub:hover > a:before {
top: 17px;
height: 0;
}
#cssmenu.small-screen {
width: 100%;
}
#cssmenu.small-screen ul {
width: 100%;
display: none;
}
#cssmenu.small-screen.align-center > ul {
text-align: left;
}
#cssmenu.small-screen ul li {
width: 100%;
border-top: 1px solid rgba(120, 120, 120, 0.2);
}
#cssmenu.small-screen ul ul li,
#cssmenu.small-screen li:hover > ul > li {
height: auto;
}
#cssmenu.small-screen ul li a,
#cssmenu.small-screen ul ul li a {
width: 100%;
border-bottom: 0;
}
#cssmenu.small-screen > ul > li {
float: none;
}
#cssmenu.small-screen ul ul li a {
padding-left: 25px;
}
#cssmenu.small-screen ul ul ul li a {
padding-left: 35px;
}
#cssmenu.small-screen ul ul li a {
color: #dddddd;
background: none;
}
#cssmenu.small-screen ul ul li:hover > a,
#cssmenu.small-screen ul ul li.active > a {
color: #00ff00;
}
#cssmenu.small-screen ul ul,
#cssmenu.small-screen ul ul ul,
#cssmenu.small-screen.align-right ul ul {
position: relative;
left: 0;
width: 100%;
margin: 0;
text-align: left;
}
#cssmenu.small-screen > ul > li.has-sub > a:after,
#cssmenu.small-screen > ul > li.has-sub > a:before,
#cssmenu.small-screen ul ul > li.has-sub > a:after,
#cssmenu.small-screen ul ul > li.has-sub > a:before {
display: none;
}
#cssmenu.small-screen #menu-button {
display: block;
padding: 17px;
color: #dddddd;
cursor: pointer;
font-size: 12px;
text-transform: uppercase;
font-weight: 700;
}
#cssmenu.small-screen #menu-button:after {
position: absolute;
top: 22px;
right: 17px;
display: block;
height: 4px;
width: 20px;
border-top: 2px solid #dddddd;
border-bottom: 2px solid #dddddd;
content: '';
box-sizing: content-box;
}
#cssmenu.small-screen #menu-button:before {
position: absolute;
top: 16px;
right: 17px;
display: block;
height: 2px;
width: 20px;
background: #dddddd;
content: '';
box-sizing: content-box;
}
#cssmenu.small-screen #menu-button.menu-opened:after {
top: 23px;
border: 0;
height: 2px;
width: 15px;
background: #00ff00;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#cssmenu.small-screen #menu-button.menu-opened:before {
top: 23px;
background: #00ff00;
width: 15px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#cssmenu.small-screen .submenu-button {
position: absolute;
z-index: 99;
right: 0;
top: 0;
display: block;
border-left: 1px solid rgba(120, 120, 120, 0.2);
height: 46px;
width: 46px;
cursor: pointer;
}
#cssmenu.small-screen .submenu-button.submenu-opened {
background: #262626;
}
#cssmenu.small-screen ul ul .submenu-button {
height: 34px;
width: 34px;
}
#cssmenu.small-screen .submenu-button:after {
position: absolute;
top: 22px;
right: 19px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu.small-screen ul ul .submenu-button:after {
top: 15px;
right: 13px;
}
#cssmenu.small-screen .submenu-button.submenu-opened:after {
background: #00ff00;
}
#cssmenu.small-screen .submenu-button:before {
position: absolute;
top: 19px;
right: 22px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
}
#cssmenu.small-screen ul ul .submenu-button:before {
top: 12px;
right: 16px;
}
#cssmenu.small-screen .submenu-button.submenu-opened:before {
display: none;
}
#cssmenu.small-screen.select-list {
padding: 5px;
}<!DOCTYPE html>
<html>
<head><meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- jQuery -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- MenuMaker Plugin -->
<script src="https://s3.amazonaws.com/menumaker/menumaker.min.js"></script>
<!-- Icon Library -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="cssmenu">
<ul>
<li><a href="#" target="_blank"><i class="fa fa-fw fa-home"></i> Home</a></li>
<li><a href="#"><i class="fa fa-fw fa-camera"></i> Photography</a>
<ul>
<li><a href="#">Belize</a></li>
<li><a href="#">Fernie BC</a></li>
<li><a href="#">Montana</a></li>
<li><a href="#">Philippines</a></li>
<li><a href="#">Lake Tahoe</a></li>
<li><a href="#">The Kids</a></li>
</ul>
</li>
<li><a href="#"><i class="fa fa-fw fa-magic"></i> Woodworking</a>
<ul>
<li><a href="#">Furniture</a></li>
<li><a href="#">Cutting Boards</a></li>
<li><a href="#">Bandsaw Boxes</a></li>
<li><a href="#">Keepsake Boxes</a></li>
<li><a href="#">Odds & Ends</a></li>
</ul>
</li>
<li><a href="#"><i class="fa fa-fw fa-info"></i> About</a></li>
<li><a href="#"><i class="fa fa-fw fa-phone"></i> Contact</a></li>
</ul>
</div>
</body>
</html>