Hi, Can you help me please, how can i display my subitems to the left side and also how can i put scrollbar on it if the subitems are too long.
More help will be greatly appreciated.
.nav {
list-style: none;
padding: 0;
margin: 0;
}
.nav li a:first-letter{
text-transform: uppercase;
}
.nav > li{
float: left;
margin-right: #959597 0.1em;
min-width: 8em;
text-align: center;
background-color: #FFF;
border:solid 1px #959597;
}
.nav li a:link,
.nav li a:visited{
text-decoration: none;
color: #606061;
display: block;
}
.nav li ul {
list-style: none;
margin: 0;
padding: 0;
}
.nav ul li,
.nav #scroll1div ul li,
#scroll1,#scroll2,#scroll3{
display: none;
}
.nav li:hover li,
.nav li:hover #scroll1,
.nav li:hover #scroll2,
.nav li:hover #scroll3
{
display: block;
text-align: justify;
color: #606061;
}
.nav ul li{
border: solid 1px #959597;
}
.nav ul li:hover, .nav li:hover,
.nav li:hover li a:hover, .nav li:hover a
{
color: #FFF;
background-color: #E56500;
}
.nav li:hover li a{
color: #777777;
background-color: #d2cb08;
}
.nav li:hover li,
.nav li:hover #scroll1,
.nav li:hover #scroll2,
.nav li:hover #scroll3
{
display: block;
text-align: justify;
color: #606061;
left: 100%;
top: 0;
}
<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="menu2.css" style="text/css">
</head>
<body>
<ul class="nav">
<li><a href="#">home</a>
<ul>
<li><a href="#">how</a></li>
<li><a href="#">where</a></li>
<li><a href="#">when</a></li>
</ul>
</li>
<li><a href="#">about</a>
<div style="overflow:auto;height:200px;" id="scroll1">
<ul>
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
<li><a href="#">E</a></li>
<li><a href="#">F</a></li>
<li><a href="#">G</a></li>
<li><a href="#">H</a></li>
<li><a href="#">I</a></li>
<li><a href="#">J</a></li>
<li><a href="#">L</a></li>
<li><a href="#">M</a></li>
<li><a href="#">N</a></li>
<li><a href="#">O</a></li>
<li><a href="#">P</a></li>
<li><a href="#">Q</a></li>
</ul>
</div>
</li>
<li><a href="#">when</a></li>
<li><a href="#">services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Internet Marketing</a></li>
<li><a href="#">Hosting</a>
<div style="overflow:auto;height:200px;" id="scroll2">
<ul>
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
<li><a href="#">subitems</a>
<div style="overflow:auto;height:200px;" id="scroll3">
<ul>
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
<li><a href="#">E</a></li>
<li><a href="#">F</a></li>
<li><a href="#">G</a></li>
<li><a href="#">H</a></li>
<li><a href="#">I</a></li>
<li><a href="#">J</a></li>
<li><a href="#">L</a></li>
<li><a href="#">M</a></li>
<li><a href="#">N</a></li>
<li><a href="#">O</a></li>
<li><a href="#">P</a></li>
<li><a href="#">Q</a></li>
</ul>
</div>
</li>
<li><a href="#">F</a></li>
<li><a href="#">G</a></li>
<li><a href="#">H</a></li>
<li><a href="#">I</a></li>
<li><a href="#">J</a></li>
<li><a href="#">L</a></li>
<li><a href="#">M</a></li>
<li><a href="#">N</a></li>
<li><a href="#">O</a></li>
<li><a href="#">P</a></li>
<li><a href="#">Q</a></li>
</ul>
</div>
</li>
<li><a href="#">Domain Names</a></li>
<li><a href="#">Broadband</a></li>
</ul>
</li>
</ul>
</body>
</html>