Hi and thanks in advance. I am pretty much a novice in HTML and CSS and am I am building a dropdown menu for Sharepoint and I found some code on the net that I have adapted to my needs. The dropdown menu has a couple of levels with a top menu that drops down and some submenus. When hovered, the top menu button changes its background color to white and text color to black but when I hover the dropdown menus below, it returns to the previous colors. While I am hovering the dropdowns and submenus below, I want the top menu button to remain as background white and text color black. I am trying to accomplish this in CSS rather than JS if possible.
CSS:
<!DOCTYPE html
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style type="text/css">
body {overflow: hidden; width: auto; margin: 20px; padding: 45; font-family: Arial, sans-serif; font-size: 14px; line-height: 150%; background-color: #eee;
}
.center {
text-align: left;
max-width: 960px;
}
.padding {
padding: 10px;
}
/* Menu General Styles */
.menuBackground {
background-color: #164149; /* Dark Green */
color: White;
float: left:
text-align: left;
white-space: nowrap;
margin-left: 1px;
}
.dropDownMenu,
.dropDownMenu ul {
list-style: none;
margin: 0px;
padding: 0px;
font-weight: Normal;
}
/* This is the list at the top level */
.dropDownMenu li {
background-color: #164149; /* Dark Green */
color: White;
position: relative;
}
.dropDownMenu a {
padding: 10px 20px;
display: block;
text-decoration: none;
background-color: #164149; /* Dark Green */
color: White;
}
.dropDownMenu a:hover {
background-color: white; /* White with black font - when top menu hovered over */
color: black;
}
/* Level 1 Drop Down Menu */
.dropDownMenu > li {
display: inline-block;
vertical-align: top;
margin-left: -4px; /* solve the 4 pixels spacing between list-items */
background-color: #164149; /* Dark Green */
color: White;
}
.dropDownMenu > li:first-child {
margin-left: 0;
}
.dropDownMenu > li > a {
background-color: #164149; /* Dark Green */
color: White;
}
.dropDownMenu > li > a:hover {
/*background-color: #164149; Dark Green */
/* color: White; */
}
/* Level 2 */
.dropDownMenu > li > ul {
text-align: left;
width: auto; /* change auto value with 200px if you want a bigger menu */
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 9999999; /* if you have YouTube iframes, is good to have a bigger z-index so the video can appear above the video */
font-weight: normal;
font-size: 12px;
}
.dropDownMenu > li:hover > ul {
display: block;
background-color: #bddbdb; /* Light Blue - when menu droped down */
color: Black;
}
.dropDownMenu ul li a {
background-color: #bddbdb; /*Light Blue - when menu droped down */
color: Black;
}
.dropDownMenu ul li a:hover {
background-color: #164149; /* Dark Green */
color: White;
}
/* Level 3 */
.dropDownMenu > li > ul > li > ul {
text-align: left;
display: none;
background-color: #bddbdb; /* Light Blue - when menu droped down */
color: Black;
position: absolute;
left: 100%;
top: 0;
z-index: 9999999;
font-weight: normal;
font-size: 12px
}
.dropDownMenu > li > ul > li:hover > ul {
display: block;
background-color: #164149; /* Dark Green */
color: White;
}
.dropDownMenu ul ul li {}
.dropDownMenu ul ul li a {}
.dropDownMenu ul ul li a:hover {}
</Style>
</head>
<body>
<div class="menuBackground">
<div class="center">
<ul class="dropDownMenu">
<li><a>Home</a>
<ul>
<li><a href="#"> My Home Page</a></li>
<li><a href="#"> Another Home Page</a></li>
</ul>
</li>
<li><a>Teams</a>
<ul>
<li><a href="#"> Team 1</a></li>
<li><a href="#"> Team 2</a></li>
</ul>
</li>
<li><a>Archive Files</a>
<ul>
<li><a href="#"> 105 > 109</a>
<ul>
<li><a href="#">105</a></li>
<li><a href="#">106</a></li>
<li><a href="#">107</a></li>
<li><a href="#">108</a></li>
<li><a href="#">109</a></li>
</ul>
</li>
<li><a href="#"> 100 > 104</a>
<ul>
<li><a href="#">100</a></li>
<li><a href="#">101</a></li>
<li><a href="#">102</a></li>
<li><a href="#">103</a></li>
<li><a href="#">104</a></li>
</ul>
</li>
<li><a href="#"> 95 > 99</a>
<ul>
<li><a href="#">95</a></li>
<li><a href="#">96</a></li>
<li><a href="#">97</a></li>
<li><a href="#">98</a></li>
<li><a href="#">99</a></li>
</ul>
</li>
</ul>
</li>
<li><a>Charts</a>
<ul>
<li><a href="#">Chart 1</a></li>
<li><a href="#">Chart 2</a></li>
</ul>
</li>
<li><a>Plans</a>
<ul>
<li><a href="#">Plan 1</a></li>
<li><a href="#">Plan 2</a></li>
<li><a href="#">Plan 3</a></li>
<li><a href="#">Plan 4</a></li>
</ul>
</li>
<li><a>Documents</a>
<ul>
<li><a href="#">Document 1</a></li>
<li><a href="#">Document 2</a></li>
</ul>
</li>
<li><a>Engage with us</a>
<ul>
<li><a href="#">Email us</a></li>
<li><a href="#">Phone us</a></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
