• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Using CSS to set background and font color in top menu button

mjdeutz

Coder
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="#">&nbsp;&nbsp;My Home Page</a></li>
                    <li><a href="#">&nbsp;&nbsp;Another Home Page</a></li>
                </ul>
            </li>
            <li><a>Teams</a>
                <ul>
                    <li><a href="#">&nbsp;&nbsp;Team 1</a></li>
                    <li><a href="#">&nbsp;&nbsp;Team 2</a></li>
                </ul>
            </li>
            <li><a>Archive Files</a>
                <ul>
                    <li><a href="#">&nbsp;&nbsp;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="#">&nbsp;&nbsp;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="#">&nbsp;&nbsp;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>
 
Solution
You will need to add this to highlight your parent menu -
CSS:
.dropDownMenu > li:hover > a {
    background-color: white;
    color: Black;
}
Thanks Ganoss. That is as far as I have gotten with the code, which is posted. I can get the top menu on the menu bar to change color on hover but not when the dropdown menu part or the dropdown submenu parts below are hovered.
 
You will need to add this to highlight your parent menu -
CSS:
.dropDownMenu > li:hover > a {
    background-color: white;
    color: Black;
}
 
Solution

New Threads

Latest posts

Buy us a coffee!

300x250
Top Bottom