Я не могу открыть подменю, я хочу открыть подменю при наведении курсора на подменю «Службы», я думаю, что у меня есть некоторые ошибки в CSS.
Я пытаюсь исправить меню, используя только CSS.
Я пытался этот код и этот , К сожалению, проблема не была решена.
Это код CSS и HTML:
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
/* Starter CSS for Flyout Menu */
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul ul {
list-style: none;
margin: 0;
padding: 0;
border: 0;
}
#cssmenu ul {
position: relative;
z-index: 597;
float: left;
}
#cssmenu ul li {
float: left;
min-height: 1px;
line-height: 1em;
vertical-align: middle;
}
#cssmenu ul li.hover,
#cssmenu ul li:hover {
position: relative;
z-index: 599;
cursor: default;
}
#cssmenu ul ul {
margin-top: 1px;
visibility: hidden;
position: absolute;
top: 1px;
left: 99%;
z-index: 598;
width: 100%;
}
#cssmenu ul ul li {
float: none;
}
#cssmenu ul ul ul {
top: 1px;
left: 99%;
}
#cssmenu ul li {
float: none;
}
#cssmenu ul ul li {
font-weight: normal;
}
/* Custom CSS Styles */
#cssmenu {
font-family: 'Lato', sans-serif;
font-size: 18px;
width: 200px;
}
#cssmenu ul a,
#cssmenu ul a:link,
#cssmenu ul a:visited {
display: block;
color: #848889;
text-decoration: none;
font-weight: 300;
}
#cssmenu > ul {
float: none;
}
#cssmenu ul {
background: #fff;
}
#cssmenu > ul > li {
border-left: 3px solid #d7d8da;
}
#cssmenu > ul > li > a {
padding: 10px 20px;
}
#cssmenu > ul > li:hover {
border-left: 3px solid #3dbd99;
}
#cssmenu ul li:hover > a {
color: #3dbd99;
}
#cssmenu > ul > li:hover {
background: #f6f6f6;
}
/* Sub Menu */
#cssmenu ul ul a:link,
#cssmenu ul ul a:visited {
font-weight: 400;
font-size: 14px;
}
#cssmenu ul ul {
width: 180px;
background: none;
border-left: 20px solid transparent;
}
#cssmenu ul ul a {
padding: 8px 0;
border-bottom: 1px solid #eeeeee;
}
#cssmenu ul ul li {
padding: 0 20px;
background: #fff;
}
#cssmenu ul ul li:last-child {
border-bottom: 3px solid #d7d8da;
padding-bottom: 10px;
}
#cssmenu ul ul li:first-child {
padding-top: 10px;
}
#cssmenu ul ul li:last-child > a {
border-bottom: none;
}
#cssmenu ul ul li:first-child:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: -20px;
top: 13px;
border-left: 10px solid transparent;
border-right: 10px solid #fff;
border-bottom: 10px solid transparent;
border-top: 10px solid transparent;
}
<!DOCTYPE html>
<html>
<head>
<!-- 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 class="active"><a href="#" target="_blank"><i class="fa fa-fw fa-home"></i> Home</a></li>
<li><a href="#"><i class="fa fa-fw fa-bars"></i> Services</a>
<ul>
<li><a href="#">S1</a>
<ul>
<li><a href="#">S1.1</a></li>
<li><a href="#">S1.2</a></li>
</ul>
</li>
<li><a href="#">S2</a></li>
</ul>
</li>
<li><a href="#"><i class="fa fa-fw fa-location-arrow"></i> Adress</a></li>
<li><a href="#"><i class="fa fa-fw fa-phone"></i> Contact</a></li>
</ul>
</div>
</body>
</html>
Можете ли вы помочь мне, пожалуйста
Заранее спасибо