I have a submenu that shows I can not, I've given a lot of thought and I can not find the problem. I have problems with z-index property, submenu not shown me over the rest of the content. Regards thanks.
http://jsfiddle.net/9nXvT/
HTML
<html>
<body>
<div class="container">
<nav>
<ul class="site-nav">
<li>
AUCTIONS
<ul>
<li>Auction 1</li>
<li>Auction 2</li>
<li>Auction 3</li>
<li>Auction 4</li>
</ul>
</li>
<li>USERS</li>
<li>FAQ's</li>
<li>CONTACT US</li>
<li>SITE MAP</li>
</ul>
</nav>
</div>
<div class="content"></div>
</body>
</html>
CSS
.site-nav {
border-bottom: 1px solid blue;
list-style: none;
*zoom: 1;
position:relative;
z-index: 9999;
}
.site-nav:before,
.site-nav:after {
content: " ";
display: table;
}
.site-nav:after {
clear: both;
}
.site-nav ul {
list-style: none;
width: 9em;
}
.site-nav a {
color: green;
font-family: 'GothamBook';
font-size: 0.75em;
}
.site-nav li {
position: relative;
}
.site-nav > li {
float: left;
}
.site-nav > li > a {
background: white;
display: block;
padding: 12px 45px;
text-decoration: none;
}
.site-nav > li > a:hover {
background: blue;
color:red;
text-decoration: none;
}
.site-nav > li > a.last{
margin-right: 0px;
}
a.activo{
background: blue;
color: red;
text-decoration: none;
}
.site-nav li ul {
position: absolute;
display: none;
top: 36px;
width: auto;
z-index: 9999;
}
.site-nav > li.hover > ul {
display: block;
}
.site-nav li li.hover ul {
left: 100%;
top: 0;
display:block;
z-index:9999;
}
.site-nav li li a {
background: white;
font-family: 'GothamBook';
font-size: 0.8em;
display: block;
padding: 10px 0px 10px 40px;
position: relative;
width: 140px;
z-index:100;
text-align: left;
margin: 0px;
}
.site-nav li li a:hover{
background: blue;
color: purple;
}
.content{
height: 300px;
background: gray;
}
Change li.hover to li:hover and it should work.
http://jsfiddle.net/9nXvT/4/
try this one...replace .hover to :hover
.site-nav > li:hover > ul {
display: block;
}
.site-nav li li:hover ul {
left: 100%;
top: 0;
display:block;
z-index:9999;
}
http://jsfiddle.net/9nXvT/
Try this
Fiddle DEM0 http://jsfiddle.net/9nXvT/5/
CSS
.site-nav > li:hover > ul {
display: block;
}
.site-nav li li:hover ul {
left: 100%;
top: 0;
display:block;
z-index:9999;
}
Just replace these two..It will work..
.site-nav > li:hover > ul {
display: block;
}
.site-nav li li:hover ul {
left: 100%;
top: 0;
display:block;
z-index:9999;
}
Related
I have a menu, for which I put at the end 3 images, measuring 30x30 px each. After the images being inserted, it appeared a space between the bottom line of the menu and only the text. For the image there is no space between the bottom of the menu and the images. What I would like now to do, would be to have the text having the exact size (I managed to fix this space by increasing font size, but this is not a solution for me) as now and get rid of that space. Again, the space is only below the text and not the images. *Check with full-screen the menu.
#nav {
background-color: #e26a63;
padding: 0;
margin: 0;
font-family: FONT;
font-size: 20px;
}
#wrap {
padding-left: 60px;
height: 100px;
width: 100%;
margin: 0 auto;
display: table-cell;
vertical-align: bottom;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
min-width: 245px;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #cb5f59;
}
#nav ul li:after {
content: "";
font-size: 0;
display: block;
height: 5px;
}
#nav ul li:hover:after {
background: #9e4a45;
}
#nav ul ul li:hover:after {
background: transparent;
}
#nav ul li a, visited {
color: white;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #e26a63;
border-top: 0;
margin-top: 5px;
z-index: 100;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color: white;
}
#nav {
display: table;
width: 100%;
}
.alignright { float: right; }
<div id="nav">
<div id="wrap">
<ul>
<li>Home</li><li>
Study
<ul>
<li>Present Simple</li><li>
Possesives</li><li>
Articles</li><li>
Modal Verbs</li><li>
Prepositions</li><li>
Plural of nouns</li><li>
Countability</li>
</ul>
</li><li>
Games
<ul>
<li>Riddles</li><li>
Flip card game</li><li>
Spot the mistake</li><li>
Multiple choice</li>
</ul>
</li><li>
Shop</li><li>
Contact</li><li>
About Us</li>
<li style="float:right"><a><img src="gmail.png" height="30px" width="30px"></a></li> <li style="float:right"><a><img src="twitter.png" height="30px" width="30px"></a></li><li style="float:right"><a><img src="facebook.png" height="30px" width="30px"></a></li>
</ul>
</div>
</div>
The simplest would be to set the same height to your texts as you have on your images
#nav ul li a, visited {
color: white;
display: block;
padding: 15px;
height: 30px; /* added */
text-decoration: none;
}
Stack snippet
#nav {
background-color: #e26a63;
padding: 0;
margin: 0;
font-family: FONT;
font-size: 20px;
}
#wrap {
padding-left: 60px;
height: 100px;
width: 100%;
margin: 0 auto;
display: table-cell;
vertical-align: bottom;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
min-width: 245px;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #cb5f59;
}
#nav ul li:after {
content: "";
font-size: 0;
display: block;
height: 5px;
}
#nav ul li:hover:after {
background: #9e4a45;
}
#nav ul ul li:hover:after {
background: transparent;
}
#nav ul li a, visited {
color: white;
display: block;
padding: 15px;
height: 30px; /* added */
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #e26a63;
border-top: 0;
margin-top: 5px;
z-index: 100;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color: white;
}
#nav {
display: table;
width: 100%;
}
.alignright { float: right; }
<div id="nav">
<div id="wrap">
<ul>
<li>Home</li><li>
Study
<ul>
<li>Present Simple</li><li>
Possesives</li><li>
Articles</li><li>
Modal Verbs</li><li>
Prepositions</li><li>
Plural of nouns</li><li>
Countability</li>
</ul>
</li><li>
Games
<ul>
<li>Riddles</li><li>
Flip card game</li><li>
Spot the mistake</li><li>
Multiple choice</li>
</ul>
</li><li>
Shop</li><li>
Contact</li><li>
About Us</li>
<li style="float:right"><a><img src="gmail.png" height="30px" width="30px"></a></li> <li style="float:right"><a><img src="twitter.png" height="30px" width="30px"></a></li><li style="float:right"><a><img src="facebook.png" height="30px" width="30px"></a></li>
</ul>
</div>
</div>
I have a menu, and I would like to have the last 3 options (some images for Facebook/Twiter/Gmail) to be aligned to the right. So far I tried:
li:last-child { float:right;}- combine the 3 images in one to have the last option to the right, but not even so works
float: right; - the same result as above
text-align: right; - no change
#nav {
background-color: #e26a63;
padding: 0;
margin: 0;
font-family: FONT;
font-size: 20px;
}
#wrap {
padding-left: 60px;
height: 100px;
width: 100%;
margin: 0 auto;
display: table-cell;
vertical-align: bottom;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
min-width: 225px;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #cb5f59;
}
#nav ul li:after {
content: "";
font-size: 0;
display: block;
height: 5px;
}
#nav ul li:hover:after {
background: #9e4a45;
}
#nav ul ul li:hover:after {
background: transparent;
}
#nav ul li a, visited {
color: white;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #e26a63;
border-top: 0;
margin-top: 5px;
z-index: 10;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color: white;
}
<div id="nav">
<div id="wrap">
<ul>
<li>Home</li><li>
Study</li><li>
Games
<ul>
<li>Riddles</li><li>
Flip card game</li><li>
Spot the mistake</li><li>
Multiple choice</li>
</ul>
</li><li>
Read</li><li>
Contact</li><li>
About Us</li><li id="alignright">
FB
</li><li>
Twitter
</li><li style="text-align: right;">
Gmail
</li>
</ul>
</div>
</div>
Flexbox can do that:
JSfiddle Demo
#nav {
background-color: #e26a63;
padding: 0;
margin: 0;
font-family: FONT;
font-size: 20px;
}
#wrap {
height: 100px;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
display: flex;
align-items: center;
}
#nav ul li {} #nav ul li:hover {
background-color: #cb5f59;
}
#nav ul li:after {
content: "";
font-size: 0;
display: block;
height: 5px;
}
#nav ul li:hover:after {
background: #9e4a45;
}
#nav ul ul li:hover:after {
background: transparent;
}
#nav ul li a {
color: white;
display: block;
padding: .5em;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #e26a63;
border-top: 0;
margin-top: 5px;
z-index: 10;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color: white;
}
#alignright {
margin-left: auto;
}
<div id="nav">
<div id="wrap">
<ul>
<li>Home
</li>
<li>
Study
</li>
<li>
Games
<ul>
<li>Riddles
</li>
<li>
Flip card game
</li>
<li>
Spot the mistake
</li>
<li>
Multiple choice
</li>
</ul>
</li>
<li>
Read
</li>
<li>
Contact
</li>
<li>
About Us
</li>
<li id="alignright">
FB
</li>
<li>
Twitter
</li>
<li style="text-align: right;">
Gmail
</li>
</ul>
</div>
</div>
First of all:
#nav {
display: table;
width: 100%;
}
.alignright { float: right; }
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>
this might be a bit complicated but I really need some help here..
I made a HTML menu and a css file for it. This was for a desktop version of my website.
I was in need of a mobile menu and due to my low skills of html and css, I asked a friend to make a mobile css file for the menu.
He ended up changing a little bit of code of the original HTML menu, this means that the mobile version is working, but I have to update my original css file for desktop a bit.
That's where the problem is, I just can't get it done, I can't find the right tag to update the file.
Original Desktop HTML menu and css file
body {
font-family: Raleway;
margin: 0;
}
main {
margin: 0 auto;
width: 1280px;
}
/*Menu*/
ul.menu {
margin-bottom: 50px;
}
label.show-menu {
display: none;
}
input.show-menu {
display: none;
}
a:visited {
border: none;
color: black;
text-decoration: none;
}
ul.menu > ul {
margin-left: 80px;
border: none;
}
ul.menu > ul li
{
display: inline-block;
list-style-type: none;
margin: 0;
margin-left: 80px;
}
ul.menu > ul {
position: relative;
}
ul.menu > ul li {
font-size: 30px;
min-height: 1px;
line-height: 1.3em;
padding: 10px;
}
ul.menu > ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
}
ul.menu > ul ul li {
float: none;
font-size: 20px;
margin: 30px;
}
ul.menu > ul li:hover {
border-bottom: 1px solid black;
}
ul.menu > ul li:hover > ul {
visibility: visible;
}
ul.menu ul > li > ul > li {
margin: 0 10px 0 0;
position: relative;
padding: 0;
float: left;
}
ul.menu ul > li > ul > li > a {
padding: 10px 20px 10px 10px;
display: block;
}
#Logo {
float: left;
display: inline-block;
position: absolute;
width: 56px;
height: 79px;
}
<header>
<label for="show-menu" class="show-menu">Menu</label>
<input type="checkbox" id="show-menu" class="show-menu" role="button">
<div id="Logo"><img src="Images/logo.png" alt="logo"></div>
<nav id="primary_nav_wrap">
<ul id="menu" class="menu">
<ul>
<li class="current-menu-item">home</li>
<li>informatie
<ul id="navinformatie">
<li>algemene info</li>
<li>wijken</li>
<li>goed om te weten</li>
</ul>
</li>
<li>verblijf
<ul id="navverblijf">
<li>hotels</li>
<li>hostels</li>
</ul>
</li>
<li>bezienswaardigheden
<ul id="navbezienswaardigheden">
<li class="dir">toers</li>
<li class="dir">entertainment</li>
<li class="dir">musicals</li>
<li class="dir">sport</li>
</ul>
</li>
</ul>
</ul>
</nav>
</header>
The new HTML menu and mobile css file for it
body {
margin: 0;
}
main {
margin: 0 auto;
width: 480px;
}
/*menu*/
ul{
list-style-type:none;
margin:0;
padding:0;
position: static;
display: none;
}
li {
display:inline-block;
float: left;
margin-right: 1px;
border-bottom:1px solid #CCC;
}
li a {
display:block;
min-width:180px;
height: 50px;
text-align: center;
line-height: 50px;
color: black;
background: white;
text-decoration: none;
}
li:hover a {
border-bottom: 1px solid black;
}
li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
border-bottom: 1px solid black;
}
/*Hide dropdown links until they are needed*/
li ul {
display: none;
}
/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
text-align:center;
}
ul li a:hover + .hidden, .hidden:hover {
display: block;
}
#Logo {
display: none;
}
.show-menu {
text-decoration: none;
color: white;
background: black;
text-align: center;
padding: 10px;
display: block;
}
input[type=checkbox]{
display: none;
}
input[type=checkbox]:checked ~ #menu{
display: block;
}
ul li, li a {
width: 100%;
text-align:left;
}
ul li a{
padding:0 10px;
}
li ul li a {
text-align:center;
}
<header>
<label for="show-menu" class="show-menu">Menu</label>
<input type="checkbox" id="show-menu" role="button">
<div id="Logo"><img src="logo.png" alt="logo"></div>
<ul id="menu" class="mobile-top">
<li class="current-menu-item">home</li>
<li>informatie
<ul class="hidden">
<li>algemene info</li>
<li>wijken</li>
<li>goed om te weten</li>
</ul>
</li>
<li>verblijf
<ul class="hidden">
<li>hotels</li>
<li>hostels</li>
</ul>
</li>
<li>bezienswaardigheden
<ul class="hidden">
<li class="dir">toers</li>
<li class="dir">entertainment</li>
<li class="dir">musicals</li>
<li class="dir">sport</li>
</ul>
</li>
</ul>
</header>
<div style="clear:both;"></div>
So what I need now is some help to adjust the desktop css file to the new html menu, I can't figure it out where to start and what I should change.
You might want to use media queries to apply a different set of CSS for mobile and desktop. You could wrap your original css like this, to only apply the desktop CSS when the width is bigger than 600px.
#media (min-width: 600px) {
body {
font-family: Raleway;
margin: 0;
}
main {
margin: 0 auto;
width: 1280px;
}
/*Menu*/
ul.menu {
margin-bottom: 50px;
}
label.show-menu {
display: none;
}
input.show-menu {
display: none;
}
a:visited {
border: none;
color: black;
text-decoration: none;
}
ul.menu > ul {
margin-left: 80px;
border: none;
}
ul.menu > ul li
{
display: inline-block;
list-style-type: none;
margin: 0;
margin-left: 80px;
}
ul.menu > ul {
position: relative;
}
ul.menu > ul li {
font-size: 30px;
min-height: 1px;
line-height: 1.3em;
padding: 10px;
}
ul.menu > ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
}
ul.menu > ul ul li {
float: none;
font-size: 20px;
margin: 30px;
}
ul.menu > ul li:hover {
border-bottom: 1px solid black;
}
ul.menu > ul li:hover > ul {
visibility: visible;
}
ul.menu ul > li > ul > li {
margin: 0 10px 0 0;
position: relative;
padding: 0;
float: left;
}
ul.menu ul > li > ul > li > a {
padding: 10px 20px 10px 10px;
display: block;
}
#Logo {
float: left;
display: inline-block;
position: absolute;
width: 56px;
height: 79px;
}
}
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>