【发布时间】：2018-07-11 11:07:09
【问题描述】：
我为菜单和子菜单创建了带有 css 的示例 HTML 模板。当我将鼠标悬停时，所有菜单的子菜单都位于左侧第一个菜单下。找到代码并提供正确的 css。
<style>
/*------------------------Menu-Bar in ClientLayout------------------------*/
.menu-bar {
background-color: #428bca;
border-color: #428bca;
margin-top: 47px;
}
.menu-bar .container .main-menu-category {
list-style-type: none;
margin: 0;
padding: 15px 0px;
overflow: hidden;
background-color: #428bca;
}
.menu-bar .container .main-menu-category>li {
display: inline;
color: #ffffff;
/*padding: 15px 0px;*/
}
.menu-bar .container .main-menu-category li>a {
color: #ffffff;
padding: 15px 0px 15px 0px;
padding-right: 25px;
}
.electronics-submenu,
.tvappliances-submenu,
.men-submenu,
.women-submenu,
.babykids-submenu,
.homefurniture-submenu,
.sportsbooks-submenu,
.offerzone-submenu,
.myaccount-submenu,
.contactus-submenu {
list-style-type: none;
display: none;
position: absolute;
background-color: #428bca;
min-width: 160px;
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.electronics-submenu li,
tvappliances-submenu li,
women-submenu li,
babykids-submenu li,
homefurniture-submenu li,
sportsbooks-submenu li,
offerzone-submenu li,
myaccount-submenu li {
color: black;
padding: 10px 0px;
position: absolute;
text-decoration: none;
display: inline-block;
/* text-align: left;*/
}
.electronics-submenu li {
color: black;
padding: 10px 0px;
text-decoration: none;
display: block;
text-align: left;
}
.electronics:hover .electronics-submenu,
.tvappliances:hover .tvappliances-submenu,
.men:hover .men-submenu,
.women:hover .women-submenu,
.babykids:hover .babykids-submenu,
.homefurniture:hover .homefurniture-submenu,
.sportsbooks:hover .sportsbooks-submenu,
.offerzone:hover .offerzone-submenu,
.myaccount:hover .myaccount-submenu,
.contactus:hover .contactus-submenu {
display: block;
}
</style><!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="menu-bar">
<div class="container" style="width:1170px;">
<ul class="main-menu-category">
<li class="electronics">
<a href="#">
Electronics
<i class="fa fa-angle-down"></i>
</a>
<ul class="electronics-submenu">
<li><a href="/Home/About">Apple</a></li>
<li><a href="/Home/Contact">Google Fixel</a></li>
</ul>
</li>
<li class="tvappliances">
<a href="#">
TVs & Appliances
<i class="fa fa-angle-down"></i>
</a>
<ul class="tvappliances-submenu">
<li><a href="/Home/About">Apple2</a></li>
<li><a href="/Home/Contact">Google Fixel2</a></li>
</ul>
</li>
<li class="offerzone">
<a href="#">
Offer Zone
<i class="fa fa-angle-down"></i>
</a>
<ul class="offerzone-submenu">
<li><a href="/Home/About">Apple8</a></li>
<li><a href="/Home/Contact">Google Fixel8</a></li>
</ul>
</li>
<li class="myaccount">
<a href="#">
My Account
<i class="fa fa-angle-down"></i>
</a>
<ul class="myaccount-submenu">
<li>
<a href="/Admin/Account/Register">Register</a>
</li>
<li>
<a href="/Admin">Login</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>更正我的 css 并为我提供菜单的确切 css 及其对应的菜单。我想在哪里更改 css 属性和修改 css。
【问题讨论】：
标签： html css menu hover submenu