HTML Pure CSS - Vertical menu with Submenu that pops left - html

Question

I have a vertical menu bar that I created from a Dreamweaver template. the CSS was generated for this. I have since added a submenu that I want to pop out left of the main menu links they correspond with. Everything I have tried and all my research have resulted fruitless. I believe that my CSS file is somehow not allowing my submenu to pop left.
What it is doing now is everything is vertical. the submenu is hidden as desired but when hovered it pops down instead of to the left. Please help me with this as I have been working on this for almost a week with no answer in sight. Thanks in advance.
JSfiddle Demo
HTML
<div class="sidebar1">
<nav>
<ul id="navbar">
<li>Home</li>
<li>Solar Shades
<ul class="submenu">
<li>Solar Shades Fabrics </li>
</ul></li>
<li>Privacy Shades
<ul class="submenu">
<li>Privacy Shades Fabrics </li>
</ul></li>
<li>Blackout Shades
<ul class="submenu">
<li>Blackout Shades Fabrics </li>
</ul></li>
<li>Patio Shades
<ul class="submenu">
<li>Exterior Shades Fabrics </li>
</ul></li>
<li>Custom Drapes and Curtains
<ul class="submenu">
<li>Drapery Fabrics </li>
<li>Measuring Drapery </li>
<li>Curved Drapery Template </li>
</ul></li>
<li>Drapery Systems</li>
<li>Home Theater Curtains
<ul class="submenu">
<li>Home Theater Fabrics </li>
</ul></li>
<li>Somfy products
<ul class="submenu">
<li>Somfy Motor </li>
<li>Somfy Control </li>
<li>Somfy Switch </li>
<li>Somfy Accessories </li>
</ul></li>
<li>Photo Gallary
<ul class="submenu">
<li>Drapery Showroom </li>
<li>Portfolio Gallerys </li>
</ul></li>
<li>How to Measure for Shades</li>
<li>Request for Shade Quote</li>
<li>Technical Links</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</nav>
<aside>
<p> Some informational text can go HERE</p>
</aside>
</div>
CSS
#charset "utf-8";
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #42413C;
margin: 0;
padding: 0;
color: #000;
}
ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
padding-right: 15px;
padding-left: 15px;
}
a img {
border: none;
}
a:link {
color: #42413C;
text-decoration: underline;
}
a:visited {
color: #6E6C64;
text-decoration: underline;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
.container {
width: 960px;
background-color: #FFFFFF;
margin: 0 auto;
}
header {
background-color: #ADB96E;
}
.sidebar1 {
float: right;
width: 180px;
background-color: #EADCAE;
padding-bottom: 10px;
}
.content {
padding: 10px 0;
width: 780px;
float: right;
}
.content ul, .content ol {
padding: 0 15px 15px 40px;
}
nav ul{
list-style: none;
border-top: 1px solid #666;
margin-bottom: 15px;
}
nav li {
border-bottom: 1px solid #666;
}
nav a, nav a:visited {
padding: 5px 5px 5px 15px;
display: block;
width: 160px;
text-decoration: none;
background-color: #C6D580;
}
nav a:hover, nav a:active, nav a:focus {
background-color: #ADB96E;
color: #FFF;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
/* ~~ The footer ~~ */
footer {
padding: 10px 0;
background-color: #CCC49F;
position: relative;
clear: both;
}
header, section, footer, aside, article, figure {
display: block;
}

Answer 1

I went ahead and rebuilt your CSS for the navbar, using your styles as a basis, to clean it up.
#charset "utf-8";
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #42413C;
margin: 0;
padding: 0;
color: #000;
}
ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
padding-right: 15px;
padding-left: 15px;
}
a img {
border: none;
}
a:link {
color: #42413C;
text-decoration: underline;
}
a:visited {
color: #6E6C64;
text-decoration: underline;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
.container {
width: 960px;
background-color: #FFFFFF;
margin: 0 auto;
}
header {
background-color: #ADB96E;
}
.sidebar1 {
float: right;
width: 180px;
background-color: #EADCAE;
padding-bottom: 10px;
}
.content {
padding: 10px 0;
width: 780px;
float: right;
}
/* ~~ The navbar ~~ */
nav #navbar {
list-style: none;
border-top: 1px solid #666;
margin-bottom: 15px;
}
nav #navbar:after {
content: '';
clear: both;
display: block;
}
nav #navbar li {
float: left;
border-bottom: 1px solid #666;
background-color: #C6D580;
position: relative;
}
nav #navbar li a {
padding: 5px 5px 5px 15px;
width: 160px;
display: block;
text-decoration: none;
}
nav #navbar li:hover {
background-color: #ADB96E;
}
nav #navbar li:hover > a, nav #navbar li .submenu li:hover > a {
color: #FFF;
}
nav #navbar li .submenu {
list-style: none;
display: none;
position: absolute;
right: 100%;
top: 0;
}
nav #navbar li .submenu li {
float: none;
}
nav #navbar li:hover > .submenu {
display: block;
}
/* ~~ The footer ~~ */
footer {
padding: 10px 0;
background-color: #CCC49F;
position: relative;
clear: both;
}
header, section, footer, aside, article, figure {
display: block;
}
<div class="sidebar1">
<nav>
<ul id="navbar">
<li>Home</li>
<li>Solar Shades<ul class="submenu">
<li>Solar Shades Fabrics</li>
</ul></li>
<li>Privacy Shades<ul class="submenu">
<li>Privacy Shades Fabrics</li>
</ul></li>
<li>Blackout Shades<ul class="submenu">
<li>Blackout Shades Fabrics</li>
</ul></li>
<li>Patio Shades<ul class="submenu">
<li>Exterior Shades Fabrics</li>
</ul></li>
<li>Custom Drapes and Curtains<ul class="submenu">
<li>Drapery Fabrics</li>
<li>Measuring Drapery</li>
<li>Curved Drapery Template</li>
</ul></li>
<li>Drapery Systems</li>
<li>Home Theater Curtains<ul class="submenu">
<li>Home Theater Fabrics</li>
</ul></li>
<li>Somfy products<ul class="submenu">
<li>Somfy Motor</li>
<li>Somfy Control</li>
<li>Somfy Switch</li>
<li>Somfy Accessories</li>
</ul></li>
<li>Photo Gallary<ul class="submenu">
<li>Drapery Showroom</li>
<li>Portfolio Gallerys</li>
</ul></li>
<li>How to Measure for Shades</li>
<li>Request for Shade Quote</li>
<li>Technical Links</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</nav>
<aside>
<p>Some informational text can go HERE</p>
</aside>
</div>
It's fully functional, position of the .submenu is based upon the relative location of the nav #navbar li being hovered over.
I hope this helps. ^^

Answer 2

Try positioning the ul.submenu elements absolutely. You can then set the width explicitly and position it that may pixels away from the left edge of it's ul#navbar li parent element with left: -180px (or whatever value you set for the width).
DEMO
ul#navbar li {
position: relative;
}
ul.submenu {
position: absolute;
width: 180px;
left: -180px;
top: 0;
}
Also, you had a missing curly brace { in your original CSS for the nav ul {...} line