I've basically copy/pasted the code from Drop-down menu that opens up/upward with pure css
body {
padding: 3em;
}
#menu>li:hover ul {
display: block;
}
#menu * {
padding: 0;
margin: 0;
font: 12px georgia;
list-style-type: none;
}
#menu {
float: center;
text-align: center;
line-height: 10px;
}
#menu a {
display: block;
text-decoration: none;
color: #3B5330;
}
#menu a:hover {
background: #B0BD97;
}
#menu ul {}
#menu ul li ul li a:hover {
background: #ECF1E7;
padding-left: 9px;
border-left: solid 1px #000;
}
#menu ul li ul li {
width: 140px;
border: none;
color: #B0BD97;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 3px;
padding-right: 3px;
background: #B0BD97;
z-index: 1;
}
#menu ul li ul li a {
font: 11px arial;
font-weight: normal;
font-variant: small-caps;
padding-top: 3px;
padding-bottom: 3px;
}
#menu ul li {
float: left;
width: 146px;
font-weight: bold;
border-top: solid 1px #283923;
border-bottom: solid 1px #283923;
background: #979E71;
}
#menu ul li a {
font-weight: bold;
padding: 15px 10px;
}
#menu li {
position: relative;
float: left;
}
#menu ul li ul,
#menu:hover ul li ul,
#menu:hover ul li:hover ul li ul {
display: none;
list-style-type: none;
width: 140px;
bottom: 0;
}
#menu:hover ul,
#menu:hover ul li:hover ul,
#menu:hover ul li:hover ul li:hover ul {
display: block;
}
#menu:hover ul li:hover ul li:hover ul {
position: absolute;
margin-left: 145px;
margin-top: -22px;
font: 10px;
}
#menu:hover ul li:hover ul {
position: absolute;
margin-top: 1px;
font: 10px;
}
#menu>ul>li:hover>ul {
bottom: 100%;
border-bottom: 1px solid transparent
}
<iframe style="width:100%">padding</iframe>
<div id="menu" style="text-align:center; float: center; width: 100%">
<ul>
<li>
<center>item1</center>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</li>
</ul>
</div>
No matter what I do, I cannot align the menu to sit in the center of the web page.
Your help would be highly appreciated.
Thanks in advance.
Like this? I added the following css:
#menu {
position: absolute;
left: 50%;
transform:translate(-50%, 0);
}
body {
padding: 3em;
}
#menu {
position: absolute;
left: 50%;
transform:translate(-50%, 0);
}
#menu>li:hover ul {
display: block;
}
#menu * {
padding: 0;
margin: 0;
font: 12px georgia;
list-style-type: none;
}
#menu a {
display: block;
text-decoration: none;
color: #3B5330;
}
#menu a:hover {
background: #B0BD97;
}
#menu ul {}
#menu ul li ul li a:hover {
background: #ECF1E7;
padding-left: 9px;
border-left: solid 1px #000;
}
#menu ul li ul li {
width: 140px;
border: none;
color: #B0BD97;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 3px;
padding-right: 3px;
background: #B0BD97;
z-index: 1;
}
#menu ul li ul li a {
font: 11px arial;
font-weight: normal;
font-variant: small-caps;
padding-top: 3px;
padding-bottom: 3px;
}
#menu ul li {
float: left;
width: 146px;
font-weight: bold;
border-top: solid 1px #283923;
border-bottom: solid 1px #283923;
background: #979E71;
}
#menu ul li a {
font-weight: bold;
padding: 15px 10px;
}
#menu li {
position: relative;
float: left;
}
#menu ul li ul,
#menu:hover ul li ul,
#menu:hover ul li:hover ul li ul {
display: none;
list-style-type: none;
width: 140px;
bottom: 0;
}
#menu:hover ul,
#menu:hover ul li:hover ul,
#menu:hover ul li:hover ul li:hover ul {
display: block;
}
#menu:hover ul li:hover ul li:hover ul {
position: absolute;
margin-left: 145px;
margin-top: -22px;
font: 10px;
}
#menu:hover ul li:hover ul {
position: absolute;
margin-top: 1px;
font: 10px;
}
#menu>ul>li:hover>ul {
bottom: 100%;
border-bottom: 1px solid transparent
}
<iframe style="width:100%">padding</iframe>
<div id="menu">
<ul>
<li>
<center>item1</center>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</li>
</ul>
</div>
You can horizontally center #menu by following CSS rules:
define #menu's display as inline-block
Add a container div outside of #menu and make its text-align as center.
I've made a fiddle for your code, please check.
Update your HTML code as below.
<html><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<link rel = "stylesheet" type = "text/css" href = "menu.css"/>
<title>Frames Test</title>
</head>
<body>
<iframe style="width:100%">padding</iframe>
<div class="container" style="text-align:center">
<div id="menu" style="text-align:center; float: center;display:inline-block">
<ul>
<li><center>item1</center>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
Related
I am trying to make horizontal menu navigation. I have several links in navigation, and I would like to have equal horizontal space between them.
How to make links in horizontal menu with equal space between them?
HTML:
<div id="header">
<div class="secondary-navigation">
<div itemscope itemtype="http://schema.org/SiteNavigationElement">
<nav id="navigation">
<ul id="menu-main" class="menu">
<li class="menu-item">Link</li>
<li class="menu-item">Link</li>
<li class="menu-item">Link</li>
<li class="menu-item">Link</li>
<li class="menu-item">Link</li>
<li class="menu-item">Link</li>
<li class="menu-item">Link</li>
<li class="menu-item">Link</li>
</ul>
Menu
</nav>
</div>
</div>
</div>
CSS:
#header {
position: relative;
float: left;
padding: 0 0 0 0;
clear: both;
}
/*-----------------------------------------------
/* Header navigation
/*---------------------------------------------*/
.secondary-navigation {
display: block;
width: 100%;
float: left;
}
.secondary-navigation a {
vertical-align: top;
color: #F1F1F1;
font-weight: bold;
margin-top: 8px;
margin-bottom: 4px;
line-height:18px;
font-size: 15px;
border-bottom: 2px solid #333888;
}
.secondary-navigation a:hover, .secondary-navigation .sfHover {
color: #F1F1F1;
border-bottom: 2px solid #F1F1F1;
}
.secondary-navigation li li a { line-height: 1 }
.secondary-navigation a .sub {
font-size: 12px;
font-weight: normal;
color: #CFCFCF;
text-transform: none;
}
.menu-item-has-children > a:after {
content: "▼";
font-size: 10px;
color: #F1F1F1;
position: absolute;
right: 12px;
top: 22px;
}
.footer-navigation .menu-item-has-children > a:after { display: none }
.sub-menu .menu-item-has-children>a:after {
right: 0;
top: 17px;
}
.menu .current-menu-item > a { background: #fff }
.menu .current-menu-item > a:after {
content: "";
position: absolute;
width: 100%;
height: 1px;
background: #fff;
bottom: 0px;
left: 0;
z-index: 1;
}
#navigation {
margin: 0 auto;
font-size: 13px;
width: 100%;
float: left;
}
#navigation ul {
margin: 0 auto;
list-style: none; /*Added*/}
#navigation .menu { float: left; }
#navigation ul li {
float: left;
position: relative;
margin-left: 0;
}
#navigation > ul li:first-child a { }
#navigation > ul li:last-child a { border-right: 0 }
#navigation ul .header-search { float: right }
#navigation > ul > li:last-child { border-right: none }
#navigation ul li a, #navigation ul li a:link, #navigation ul li a:visited { display: block }
#navigation > ul > .current a {
background: transparent;
color: #555 !important;
}
#navigation li:hover ul, #navigation li li:hover ul, #navigation li li li:hover ul, #navigation li li li li:hover ul {
opacity: 1;
left: -228px;
top: 0;
}
#navigation ul ul {
position: absolute;
width: 226px;
z-index: 400;
font-size: 12px;
color: #333888;
border: 1px solid #F1F1F1;
background: #FFFFFF;
padding: 0;
}
#navigation ul ul li {
margin-left: 0;
padding: 0 10%;
width: 80%;
color: #333;
}
#navigation ul ul li:hover { background: #F1F1F1 }
#navigation ul ul a, #navigation ul ul a:link, #navigation ul ul a:visited {
padding: 12px 0;
position: relative;
border-left: 0;
background: transparent;
border-right: 0;
text-transform: none;
line-height: 1.4;
margin-right: 0;
min-height: 100%;
}
#navigation ul ul li:last-child a { border-bottom: none }
#navigation ul ul {
opacity: 0;
left: -999em;
}
#navigation ul li:hover ul {
left: -1px;
opacity: 1;
top: 81px;
}
#navigation ul ul li:hover ul {
top: -1px;
left: -228px;
padding-top: 0;
}
#navigation ul ul ul:after { border-color: transparent }
I tried something like this, but it does not work for me.
You can use justify-content: space-between or justify-content: space-around flexbox property
ul {
display: flex;
justify-content: space-between;
border: 1px solid black;
list-style-type: none;
padding: 10px;
margin: 0;
}
<ul>
<li>Random Link</li>
<li>Random Link</li>
<li>Random Link</li>
<li>Random Link</li>
</ul>
The images of list items in dropdown menu repeats three times even though "no repeat" is added in html. please help me.
html code.
<div class="menu">
<ul>
<li style='background-image:url(images/menu2s.jpg)0 0 no-repeat;'><a></a>
<ul>
<li style='background-image:url(images/sets.jpg)0 0 no-repeat;'>Settings</li>
<li style='background-image:url(images/more-icon.png)0 0 no-repeat;'>More</li>
</ul>
</li>
</ul>
</div>
css file
body{padding: 3em; }
.menu * {
padding:0;
margin: 0;
font: 12px georgia;
list-style-type:none;}
.menu {
position: absolute;
bottom:0px;
float: left;
line-height: 10px;
left: 100px;
z-index: 50;}
.menu a {
display: block;
text-decoration: none;
color: #3B5330;}
.menu a:hover { background: #B0BD97;}
.menu ul li ul li a:hover {
background: #ECF1E7;
padding-left:9px;
border-left: solid 1px #000;}
.menu ul li ul li {
width: 140px;
border: none;
color: #B0BD97;
padding-top: 3px;
padding-bottom:3px;
padding-left: 3px;
padding-right: 3px;
background: #B0BD97;
z-index:50;
}
.menu ul li ul li a {
font: 22px arial;
font-weight:normal;
font-variant: small-caps;
padding-top:3px;
padding-bottom:3px;
z-index:50;}
.menu ul li {
float: left;
width: 146px;
font-weight: bold;
border-top: solid 1px #283923;
border-bottom: solid 1px #283923;
background: #979E71;
z-index:50;}
.menu ul li a {
font-weight: bold;
padding: 15px 10px;
z-index:50;}
.menu li{
position:relative;
float:left;
z-index:50;}
.menu ul li ul, #menu:hover ul li ul, #menu:hover ul li:hover ul li ul{
display:none;
list-style-type:none;
width: 140px;
z-index:50;}
.menu:hover ul, #menu:hover ul li:hover ul, #menu:hover ul li:hover ul li:hover ul {
display:block;
z-index:50;}
.menu:hover ul li:hover ul li:hover ul {
position: absolute;
margin-left: 145px;
margin-top: -22px;
font: 10px;
z-index:50;}
.menu:hover ul li:hover ul {
position: absolute;
margin-top: 1px;
font: 10px;
z-index:50;
}
.menu>ul>li:hover>ul {
bottom:100%;
border-bottom: 1px solid transparent
z-index:50;
}
Write it like this. You wrote shorthand in background-image rather than Background.
style='background:url(images/sets.jpg) 0 0 no-repeat;
> or
style='background:url(images/sets.jpg) no-repeat 0 0 ;
You have not given space between the brace and zero.
i've a menu and i would want to use border on left but here is the desired look how i wanted, i am able to add border but it will take full height of the li element and also i do not want that border to appear on sub menus
example : aunipark.in
here is my code :
html
<div class="menudiv">
<div class="menu">
<ul>
<li>Home</li>
<li>About
<ul>
<li>School</li>
<li>Vision and Mission </li>
<li>Principal’s desk
<li>Management
</ul> </li>
<li>Admission
<ul>
<li>Overview</li>
<li>Download application form</li>
</ul> </li>
<li>Gallery</li>
<li>School Calander</li>
<li>News & Events</li>
<li>Career</li>
<li>Contact</li>
</ul>
</div>
</div>
css
.menudiv
{
width:980px;
}
.menu {
font-family: 'Open Sans', sans-serif;
font-size:14px;
}
.menu ul ul {
display: none;
}
.menu ul li:hover > ul {
display: block;
}
.menu ul {
background: #111312;
margin: 0;
list-style: none;
position: relative;
padding: 0;
border:3px solid #111312;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.menu ul:after {
content: "";
clear: both;
display: block;
}
.menu ul li {
float: left;
border-bottom: 3px solid transparent;
}
.menu ul li:hover {
background: #111312;
border-bottom: 3px solid #fff;
}
.menu ul li:hover a {
color: #fff;
}
.menu ul li a {
display: block;
padding: 15px;
border-right: 3px solid #fff;
color: #fff;
text-decoration: none;
}
.menu ul ul {
background: #111312;
padding: 0;
position: absolute;
top: 100%;
}
.menu ul ul li {
float: none;
position: relative;
}
.menu ul ul li a {
padding: 10px;
color:#000;
display: block;
}
.menu ul ul li a:hover {
background: #111312;
color: #fff;
}
.menu ul ul ul {
position: absolute;
left: 100%;
top:0;
padding: 0;
}
.menu ul ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid pink;
position: relative;
}
.menu ul ul ul li a {
padding: 10px;
color: #fff;
display: block;
}
.menu ul ul ul li a:hover {
background: #95CEF1;
color: #000;
}
.menu ul ul ul ul {
position: absolute;
left: 100%;
top:0;
}
.head
{
width:500px;
height:200px;
background:#789;
}
.foot
{
width:500px;
height:200px;
background:#123;
}
and also the fiddle : jsfiddle.net/p7Nsf/9/
try this....
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Style Test</title>
<style type="text/css">
#list { background-color: aqua; }
.horizontal { display: inline; border-left: 2px solid; padding-left: 0.3em; }
.first { border-left: none; padding-left: 0; }
</style>
</head>
<body>
<div id="list">
<div>
<ul>
<li class="first">Home</li>
<li class="horizontal">About
<ul>
<li class="first">School</li>
<li class="horizontal">Vision and Mission </li>
<li class="horizontal">Principal’s desk
<li class="horizontal">Management
</ul> </li>
<li class="horizontal">Admission
<ul>
<li class="first">Overview</li>
<li class="horizontal">Download application form</li>
</ul> </li>
<li class="horizontal">Gallery</li>
<li class="horizontal">School Calander</li>
<li class="horizontal">News & Events</li>
<li class="horizontal">Career</li>
<li class="horizontal">Contact</li>
</ul>
</div>
</div>
</body>
</html>
Add the padding-top and bottom not to the anchor, but to the li. And give the anchor a border-right:
.menu > ul > li > a {
border-right: 2px solid white;
display: block;
padding-left: 25px;
padding-right: 25px;
}
.menu > ul > li:last-child > a {
border-right: 0;
}
Check here.
Like this
demo
css
.menudiv {
width: 788px;
margin:0 auto;
}
.menu {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
}
.menu ul ul {
display: none;
margin:4px 0 0 0;
}
.menu ul li:hover > ul {
display: block;
}
.menu ul {
background: #111312;
margin: 0;
list-style: none;
position: relative;
padding: 0;
border: 3px solid #111312;
-moz-border-radius: 13px;
-webkit-border-radius: 13px;
border-radius:13px;
}
.menu ul:after {
content: "";
clear: both;
display: block;
}
.menu ul li {
float: left;
border-bottom: 3px solid transparent;
border-right: 3px solid #fff;
}
.menu ul li:last-child{
border:none;
}
}
.menu ul li:hover {
background: #111312;
border-bottom: 3px solid #fff;
}
.menu ul li:hover a {
color: #fff;
}
.menu ul li a {
display: block;
padding: 15px;
color: #fff;
text-decoration: none;
}
.menu ul ul {
background: #111312;
padding: 0;
position: absolute;
top: 100%;
}
.menu ul ul li {
float: none;
position: relative;
border-right:none;
}
.menu ul ul li a {
padding: 10px;
color: #000;
display: block;
}
.menu ul ul li a:hover {
background: #111312;
color: #fff;
}
.menu ul ul ul {
position: absolute;
left: 100%;
top: 0;
padding: 0;
}
.menu ul ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid pink;
position: relative;
}
.menu ul ul ul li a {
padding: 10px;
color: #fff;
display: block;
text-decoration: none;
}
.menu ul ul ul li a:hover {
background: #95CEF1;
color: #000;
}
.menu ul ul ul ul {
position: absolute;
left: 100%;
top: 0;
}
.head {
width: 500px;
height: 200px;
background: #789;
}
.foot {
width: 500px;
height: 200px;
background: #123;
}
The border will always be as tall as the element, but you can draw a line and apply it to all the elements with
background:url(line.png) bottom right no-repeat;
This might be helpfull, I usually handle border lines in navigation with the help of "line-height" property, it allows to control the height borders from left or right sides. In other words you can change the height of a left/right border by changeing "line-height" property.
HTML
<div class="wrapper">
<div class="container">
<ul class="nav">
<li>My Wishlist</li>
<li>My Account</li>
<li>My Cart</li>
<li>Login</li>
</ul>
</div>
</div>
CSS
.wrapper{
background: #f1f1f1;
width: 100%;
border-top: 5px solid #d1b792;
border-bottom: 5px solid #d1b792;
padding-bottom: 1px;
}
.nav li{
display: inline-block;
margin-left: -4px;
}
.nav li a{
display: block;
font-size: 18px;
padding: 0px 12px 3px 12px;
margin: 5px 0;
color: #666694;
line-height: 12px;
border-right: 2px solid #4679BD;
text-decoration: none;
}
.nav li a:hover{
color: darkblue;
}
.nav li:last-child a{
border-right: none;
}
Here is the Fiddle: http://jsfiddle.net/johannesMt/Lt143z8x/
The following code generates a menu to the right of the page, I need that menu to be in a specific position from the bottom-right side of the page.
<html>
<head>
<title>Dropdown menu</title>
<style type="text/css">
body {
padding: 3em;
}
#menu * {
font: 10px;
list-style-type: none;
margin: 0;
padding: 0;
}
#menu {
float: right;
line-height: 5px;
margin-top: 585px;
}
#menu a {
color: #ffffff;
display: block;
text-decoration: none;
}
#menu a:hover {
background: #7A7A7A;
}
#menu ul li ul li a:hover {
background: #AAA7A7;
border-left: solid 1px #000;
padding-left: 9px;
}
#menu ul li ul li {
background: #7A7A7A;
border: none;
padding-bottom: 3px;
padding-left: 3px;
padding-right: 3px;
padding-top: 3px;
width: 120px;
}
#menu ul li ul li a {
font: 11px arial;
font-variant: small-caps;
font-weight: normal;
padding-bottom: 3px;
padding-top: 3px;
position: relative;
}
#menu ul li {
background: #383838;
font: 14px arial;
font-weight: bold;
width: 126px;
}
#menu ul li a {
font-weight: bold;
padding: 15px 10px;
}
#menu li {
float: left;
position: relative;
}
#menu ul li ul, #menu:hover ul li ul, #menu:hover ul li:hover ul li ul {
display: none;
list-style-type: none;
width: 120px;
}
#menu:hover ul, #menu:hover ul li:hover ul, #menu:hover ul li:hover ul li:hover ul {
display: block;
}
#menu:hover ul li:hover ul li:hover ul {
border-bottom: transparent;
font: 10px;
margin-left: 145px;
margin-top: -22px;
position: absolute;
}
#menu:hover ul li:hover ul {
border-bottom: transparent;
bottom: 100%;
font: 10px;
margin-top: 1px;
position: absolute;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>
<center>ARCHITECTURE</center>
<ul>
<li>RESIDENTIAL</li>
<li>COMMERCIAL</li>
</ul>
</li>
<li>
<center>INTERIORS</center>
</li>
<li>
<center>FURNITURE</center>
<ul>
<li>SEATING</li>
<li>TABLES</li>
<li>CABINETS</li>
</ul>
</li>
<li>
<center>ABOUT</center>
</li>
<li>
<center>CONTACT</center>
</li>
</ul>
</div>
</body>
</html>
You can view it in action here: JSFiddle
In order to specify the position from the bottom right corner, you should use an absolute positioning :
#menu {
position: absolute;
bottom: 10px;
right: 10px;
}
Demo
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>