I have a CSS Menu which i have had some help with getting sorted, it nearly works as i would like.
i just want to be able to change the text colour on LI hover and also the sub menu seems to be displaying more to the right when it should be directly underneath
CSS:
.menu-my-integra-container {
border:1px solid black;
display:block;
float:left;
}
#menu-my-integra, ul.sub-menu {
list-style: none;
padding: 0;
margin: 0;
}
#menu-my-integra > li {
float:left;
display: block;
margin-right:0px;
position:relative;
background:#F36F25;
padding:8px;
color:#FFFFFF;
text-decoration:none;
}
#menu-my-integra > li:hover {
background:#FFFFFF;
color:#F36F25;
}
ul.sub-menu {
display:none;
width:200px;
position:absolute;
z-index:1;
}
#menu-my-integra li:hover ul.sub-menu {
display: block;
max-height: 200px;
background:#F36F25;
}
ul.sub-menu li {
color:#FFFFFF;
float:none;
padding:5px;
}
ul.sub-menu li:hover {
color:#F36F25;
background:#FFFFFF;
float:none;
padding:5px;
}
http://jsfiddle.net/c2u21366/
This will change the texts color to the parents:
#menu-my-integra li > a {
color: inherit;
}
Add left: 0; to ul.sub-menu to align your sub-menu to the left.
ul.sub-menu {
left: 0;
}
You color attribute needs to point to the anchor tag rather than the list tag. The colour choice is being overwritten by the default browser style. You need a more direct style path. The following CSS will colour your list as
.menu-item a{
color:#FFFFFF;
}
.menu-item a:hover {
color:#F36F25;
}
css file
<body class="news">
<header>
<div class="nav">
<ul>
<li class="home">Home</li>
<li class="tutorials">Tutorials
<ul>
<li>Tutorial #1##</li>
<li>Tutorial #2</li>
<li>Tutorial #3</li>
</ul>
</li>
<li class="about"><a class="active" href="#">About</a></li>
<li class="news">Newsletter
<ul>
<li>News #1</li>
<li>News #2###</li>
<li>News #3</li>
</ul>
</li>
<li class="contact">Contact</li>
</ul>
</div>
</header>
</body>
body {
margin: 0;
padding: 0;
background: #ccc;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
text-align: left;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
border-bottom: 1px solid #888;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #aaa;
color: #444;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: .8em;
}
/*******************************************
Style menu for larger screens
Using 650px (130px each * 5 items), but ems
or other values could be used depending on other factors
********************************************/
#media screen and (min-width: 650px) {
.nav li {
width: 130px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
Your submenu is not properly positioned. You're missing left: 0;. That should fix the positioning.
ul.sub-menu {
display: none;
width: 200px;
position: absolute;
z-index: 1;
left: 0;
}
In regards to hover color
a:hover {
color: #000 !important;
}
Ofcourse I used !important cause I don't understand which color you actually want to change.
Related
i am trying to learn how to make hover on image in
navbar
my goal is to make the div-image "pic-index" to be
affcted by hover on "HOME" link in navbar and make the div to be
changed into another image by hover .
i really dont have any idea
how i can do such thing .
here is my HTML :
I added an snippet to my question, so you can see what I current have in my code
body {
margin: 0;
padding: 0;
background: white;
}
.nav ul {
list-style: none;
background-color: white;
text-align: center;
padding: 0;
margin: 0;
}
.logo{
position: absolute;
float: right;
margin-left: 1136px;
margin-top:-3px;
}
.mainul {
height: 145px;
box-shadow: 1px 1px 1px #7e7e7ea6;
}
.mainul2{
height: 145px;
box-shadow: 5px 9px 29px -2px #0000005e;
}
.pic-index{
position:absolute;margin-left:936px;margin-top:62px;
}
.nav li {
font-family: Varela Round;
font-size: 1.2em;
line-height: 40px;
text-align: left;
padding-right:;
}
.nav a {
font-size:15px;
margin-top:50px;
margin-left:20px;
text-decoration: none;
color: #5a5a5a;
display: block;
padding-left: 15px;
transition: .3s background-color;
}
.nav a:hover {
color:#57c0ea;
}
.nav a.active {
color: #444;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: .8em;
}
/*******************************************
Style menu for larger screens
Using 650px (130px each * 5 items), but ems
or other values could be used depending on other factors
********************************************/
#media screen and (min-width: 650px) {
.nav li {
width: 130px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
<div class="nav"> <ul class="mainul"> <ul class="mainul2">
<div class="logo"><img src="images/Logo-1.png"></div>
<div class="pic-index"><img src="images/nav-home-normal.png"></div> <li class="contact">צור קשר <ul>
</ul> </li> <li class="services">שירותים <ul> <li>Tutorial #1##</li> <li>Tutorial #2</li> <li>Tutorial #3</li> </ul> </li>
<li class="about">אודות
</li> <li class="home">דף הבית</li>
</ul> </ul> </div>
Once your .home is after the .pic-index you only can achieve that with some JS or jQuery, here's a solution with jQuery.
If .pic-index comes before .home, then you would be able to use only CSS, but it's not the case.
(I Added an image just to represent the effect, run the snippet in FULLSCREEN to better visualization)
EDIT
Another thing, I made a small update in the css, but it's up for you to keep it or no (added css to img class).
ALSO, you have some HTML structure errors in the lists, some ul and li starts and ends on wrong places
/* HOVER */
$(function() {
$('.home').mouseenter(function() {
$('.pic-index img').attr(
'src', 'http://icons.iconarchive.com/icons/paomedia/small-n-flat/256/sign-check-icon.png'
);
});
$('.home').mouseleave(function() {
$('.pic-index img').attr(
'src', 'http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-help-about-icon.png'
);
});
});
body {
margin: 0;
padding: 0;
background: white;
}
.nav ul {
list-style: none;
background-color: white;
text-align: center;
padding: 0;
margin: 0;
}
.logo{
position: absolute;
float: right;
margin-left: 1136px;
margin-top:-3px;
}
.mainul {
height: 145px;
box-shadow: 1px 1px 1px #7e7e7ea6;
}
.mainul2{
height: 145px;
box-shadow: 5px 9px 29px -2px #0000005e;
}
.pic-index{
position:relative;
top:30%;
float: right;
margin-right: 50px;
}
.pic-index img{
max-width: 48px;
max-height: 48px;
}
.nav li {
font-family: Varela Round;
font-size: 1.2em;
line-height: 40px;
text-align: left;
padding-right:;
}
.nav a {
font-size:15px;
margin-top:50px;
margin-left:20px;
text-decoration: none;
color: #5a5a5a;
display: block;
padding-left: 15px;
transition: .3s background-color;
}
.nav a:hover {
color:#57c0ea;
}
.nav a.active {
color: #444;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: .8em;
}
/*******************************************
Style menu for larger screens
Using 650px (130px each * 5 items), but ems
or other values could be used depending on other factors
********************************************/
#media screen and (min-width: 650px) {
.nav li {
width: 130px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav"> <ul class="mainul">
<ul class="mainul2">
<div class="logo"><img src="images/Logo-1.png"></div>
<div class="pic-index"><img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-help-about-icon.png"></div>
<li class="contact">צור קשר
<ul>
</li>
</ul>
<li class="services">שירותים
<ul>
<li>Tutorial #1##</li>
<li>Tutorial #2</li>
<li>Tutorial #3</li>
</ul>
</li>
<li class="about">אודות</li>
<li class="home">דף הבית</li>
</ul>
</div>
I'm new to html and css. I follow a tutorial in youtube. This is all about navigational bar and drop down in html and css.
The name Ria, Kezia, and Gelia should be display when I hover my mouse in Support option.
* {
margin: 0px;
padding: 0px;
}
#container ul {
list-style: none;
/*This will remove the bullet*/
}
#container ul li {
background-color: #3C4794;
/*Adds a back-color.*/
width: 150px;
border: 1px solid white;
height: 50px;
line-height: 50px;
text-align: center;
/*Show the text in the middle*/
float: left;
color: white;
/*Font color*/
font-size: 18px;
}
#container ul li:hover {
background-color: #388222;
/*Change the color when hovering the mouse.*/
}
<div id="container">
<ul>
<li>Support</li>
<ul>
<li>Ria</li>
<li>Kezia</li>
<li>Gelia</li>
</ul>
<li>CCD</li>
<li>Scanning</li>
<li>Claims</li>
</ul>
Add CSS styles to dropdown button and try this code.
<head>
<style>
*{
margin:0px;
padding:0px;
}
#container ul{
list-style:none; /*This will remove the bullet*/
}
#container ul li{
background-color:#3C4794; /*Adds a back-color.*/
width:150px;
border:1px solid white;
height:50px;
line-height:50px;
text-align:center; /*Show the text in the middle*/
float:left;
color:white; /*Font color*/
font-size:18px;
}
#container ul li:hover {
background-color:#388222; /*Change the color when hovering the mouse.*/
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
top:50px;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div id="container">
<ul>
<li>
<div class="dropdown">
<ul>
<li>Support</li>
</ul>
<div class="dropdown-content">
<ul>
<li>Ria</li>
<li>Kezia</li>
<li>Gelia</li>
</ul>
</div>
</div>
</li>
<li>CCD</li>
<li>Scanning</li>
<li>Claims</li>
</ul>
</body>
* {
margin: 0px;
padding: 0px;
}
#container ul {
list-style: none;
/*This will remove the bullet*/
}
#container ul li {
background-color: #3C4794;
/*Adds a back-color.*/
width: 150px;
border: 1px solid white;
height: 50px;
line-height: 50px;
text-align: center;
/*Show the text in the middle*/
float: left;
color: white;
/*Font color*/
font-size: 18px;
}
#container ul li:hover {
background-color: #388222;
/*Change the color when hovering the mouse.*/
}
#container ul li ul {
display: none;
z-index: 100;
position: relative;
}
#container ul li:hover ul {
display: block;
}
<div id="container">
<ul>
<li>Support
<ul>
<li>Ria</li>
<li>Kezia</li>
<li>Gelia</li>
</ul>
</li>
<li>CCD</li>
<li>Scanning</li>
<li>Claims</li>
</ul>
</div>
You can do it this way:
* {
margin: 0px;
padding: 0px;
}
#container ul {
list-style: none;
position:absolute;
/*This will remove the bullet*/
}
#container ul li {
background-color: #3C4794;
/*Adds a back-color.*/
width: 150px;
border: 1px solid white;
height: 50px;
line-height: 50px;
text-align: center;
/*Show the text in the middle*/
float: left;
color: white;
/*Font color*/
font-size: 18px;
}
#container ul li:hover {
background-color: #388222;
/*Change the color when hovering the mouse.*/
}
#sub {
display: none;
}
#container ul li:hover #sub {
display: block;
}
<div id="container">
<ul>
<li>Support
<ol id="sub">
<li>Ria</li>
<li>Kezia</li>
<li>Gelia</li>
</ol>
</li>
<li>CCD</li>
<li>Scanning</li>
<li>Claims</li>
</ul>
</div>
JSFiddle
Old JSFiddle (with JS)
You have to add some css property for dropdown. Here you code has been edited
* {
margin: 0px;
padding: 0px;
}
#container ul {
list-style: none;
/*This will remove the bullet*/
}
#container ul li {
background-color: #3C4794;
/*Adds a back-color.*/
width: 150px;
border: 1px solid white;
height: 50px;
line-height: 50px;
text-align: center;
/*Show the text in the middle*/
float: left;
color: white;
/*Font color*/
font-size: 18px;
}
#container ul li:hover {
background-color: #388222;
/*Change the color when hovering the
mouse.*/
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div id="container">
<ul>
<li class="dropdown">Support
<ul class="dropdown-content">
<li>Ria</li>
<li>Kezia</li>
<li>Gelia</li>
</ul>
</li>
<li>CCD</li>
<li>Scanning</li>
<li>Claims</li>
</ul>
here i added some css code in your style and added some clss in your html elements
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
You need to place your submenu in li element and hide it by CSS, then you can write styles for pseudo-class if you want that submenu to appear on hover
So, first that you need, move inner ul element in li, like that:
<li>Support
<ul>
<li>Ria</li>
<li>Kezia</li>
<li>Gelia</li>
</ul>
</li>
Further you need set right styles.
li need to have position: relative, this is let inner ul element take the right position
Inner ul should be hidden by default state and be appearing on hover on parent element;
This styles should help:
ul > li {
position: relative;
}
li > ul {
display: none;
bottom: 0;
left: 0;
}
li:hover > ul {
display: block
}
Got a slightly annoying issue that I am at my wits end with so looking for some help.
I have made a CodePen for a navigation - http://codepen.io/nickelse/pen/yNwPwv
When you hover over one of the nav links it covers the left divider but shows the right divider, anyone got any suggestions on how I can have the link hover either cover both dividers or sit in the middle of the two?
Cheers,
Nick
<div class="navigation cf">
<div class="menu cf">
<ul>
<li>Poker Chips</li>
<li>
Poker Chip Sets<i class="fa fa-caret-down"></i>
<ul class="sub-menu">
<li>Sub Link 1</li>
<li>Sub Link 2</li>
<li>Sub Link 3</li>
<li>Sub Link 4</li>
</ul>
</li>
<li>Poker Tables</li>
<li>Poker Chip Cases</li>
<li>Poker Playing Cards</li>
<li>Poker Accessories</li>
</ul>
</div>
</div>
body {
background: #272727;
}
/*----- Menu Outline -----*/
.navigation {
width: 100%;
background: #454545;
border-bottom: 3px solid #666;
}
.menu {
width: 1000px;
margin: 0px auto;
text-align: center;
font-size: 0;
}
.menu li {
margin: 0px;
}
.menu a {
transition: all linear 0.15s;
color: #fff;
}
.menu li:hover > a {
text-decoration: none;
color: #ddd;
}
.menu .arrow {
font-size: 11px;
line-height: 0%;
}
/*----- Top Level -----*/
.menu > ul {
margin: 0;
padding: 0;
}
.menu > ul > li {
display: inline-block;
position: relative;
font-size: 14px;
background: url(http://i.imgur.com/ijNENpN.png) no-repeat left 50%;
}
.menu > ul > li:first-child {
background: none;
}
.menu > ul > li > a {
padding: 20px 24px;
display: block;
}
.menu > ul > li:hover > a{
background: #666;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
z-index: 1;
opacity: 1;
}
.sub-menu {
width: 280px;
padding: 0;
position: absolute;
top: 100%;
left: 0px;
z-index: -1;
opacity: 0;
transition: opacity linear 0.2s;
background: #666;
text-align: left;
}
.sub-menu li {
display: block;
font-size: 14px;
}
.sub-menu li a {
padding: 10px 24px;
display: block;
color: #fff;
}
.sub-menu li a:hover {
background: #353535;
}
.navigation .fa.fa-caret-down {
margin-left: 6px;
}
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
/** For IE 6/7 only - Include this rule to trigger hasLayout and contain floats. */
.cf {
*zoom: 1;
}
The divider is actually associated with the li next to the one being hovered so the quick solution is to hide it so:
.menu li:hover + li {
background-image: none;
}
Codepen Demo
Add padding:3px; for li tag
.menu > ul > li {
padding:3px; //added this
display: inline-block;
position: relative;
font-size: 14px;
background: url(http://i.imgur.com/ijNENpN.png) no-repeat left 50%;
}
Demo here
Don't mess around with padding or margin, just define that the <li> to the right of the focussed <li> should not have the background that displays the border.
Add this bit of CSS code:
.menu > ul > li:hover + li {
background: none;
}
http://codepen.io/anon/pen/MwxrGx
This menu bar works as it should, until hyperlinks are involved, as the browser inserts its own text formatting.
I tried using the pseudo selectors (a:link a:visited) to counteract this, but that prevents the styling I have already created from showing, (as I want the text to change from grey to white upon hover). I also tried #menubar ul li a:link{} but didn't work. How do I prevent the links from changing colour when they are in lists?
Fiddle here: http://jsfiddle.net/CWB9C/1/
HTML:
<div id="menubar">
<ul>
<li> Home
</li>
<li>Facebook
<ul>
<li>One
</li>
<li>Two
</li>
<li>Three
</li>
</ul>
</li>
<li>Google.com
<ul>
<li>One
</li>
<li>Two
</li>
<li>Three
</li>
</ul>
</li>
<li>Search</li>
</ul>
</div>
CSS:
body {
text-align: center;
}
#menubar ul{
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
}
#menubar ul li{
font: 18px;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff;
color:#666;
text-decoration:none;
}
#menubar ul li{
font: 18px;
font-family: latolight;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff;
}
#menubar ul li:hover {
background: #A03C3A;
color: #D6D6D6;
}
#menubar ul li ul{
padding: 0;
position: absolute;
top: 43px;
left: 0;
width: 150px;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
color:#666;
text-decoration:none;
}
#menubar ul li ul {
padding: 0;
position: absolute;
top: 43px;
left: 0;
width: 150px;
display: none;
opacity: 0;
visibility: hidden;
}
#menubar ul li ul li {
background:#A03C3A;
display: block;
color: #FFF;
}
#menubar ul li ul li {
background:#A03C3A;
display: block;
color: #FFF;
text-shadow: 0 -1px 0 #000;
z-index:10;
color:#666;
text-decoration:none;
}
#menubar ul li ul li:hover {
background:#4F529F; z-index:10;
}
#menubar ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
z-index:10;
}
Style the a's not li's, or just set to all the a's
a { color:inherit; text-decoration:none; }
Just create a style that will apply to both li and li > a:
#menubar ul li, #menubar ul li a {
color:#666;
font: 18px;
font-family: latolight;
text-decoration: none;
/* Add whatever additional style you want */
}
jsFiddle
From what I'm reading, I think this is what you want
#menubar a {
color: #whatevershadeofgrayhere;
text-decoration: none;
}
#menubar a:hover {
color: #whatevershadeofwhitehere;
}
#menubar ul li:hover a{
color:#fff;
}
You can use the inherit value for color.
#menubar ul li a {
color: inherit;
}
Then it will inherit from the closest parent with a color style. You can then do something like this for the colors.
#menubar ul li ul li {
color: black;
}
fiddle
(nice menu by the way)
Below is my code, currently when I hover on "About Us" everything below the dropdown menu opens; how can i change the css so that it only hovers when i mouseover, this means, when i hover on "Team", then I should see the menus below it.
also how can i adjust the width so that it is shiffted more to the left.
also when the dropdown menu is longer in lenth, it hides below my content, i want the dropdown menu to be over the body of the page, not in hiding.
thanks in advance you all.
<style>
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #000061;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover ul {
display: block;
position: absolute;
}
ul li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }
</style>
<body>
<ul id="menu">
<li><b>Home</b></li>
<li><b>About Us</b>
<ul>
<li>Team
<ul>
<li>Profile</li>
<li>Board</li>
</ul>
</li>
</ul>
</li>
<ul>
</body>
JSFiddle: http://jsfiddle.net/LWEry/
Like this:
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #000061;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover > ul {
display: block;
position: absolute;
width: 100%;
}
ul li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }
.sub-menu
{
position: absolute;
top: 0;
left: 100%;
}
http://jsfiddle.net/3xWcu/2/
I changed one selector.
FROM
li:hover ul
TO
li:hover > ul
Edited my fiddle above. Added a sub-menu class to the ul containing the Profile and Board li tags:
<ul class="sub-menu">
<li>Profile</li>
<li>Board</li>
</ul>
and added some CSS above.
You mean like this? http://jsfiddle.net/3xWcu/
<style>
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #000061;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover ul {
display: block;
position: absolute;
width: 100%;
}
ul li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }
</style>
<body>
<ul id="menu">
<li><b>Home</b></li>
<li><b>About Us</b>
<ul>
<li>Team
<ul>
<li>Profile</li>
<li>Board</li>
</ul>
</li>
</ul>
</li>
<ul>
</body>