I am currently working on creating a drop-right menu using CSS, but I seem to be stuck...
After searching for examples on the internet, I found that most of the code snippets are quite lengthy and overwhelming.
I attempted to implement one of them, but the outcome was far from satisfactory as you can see...
How can I go about fixing this issue?
I have also included a link to an example of the desired result:
Thank you in advance!
body {
background-color: #CEF6F5;
text-decoration: none;
}
aside {
margin-top: 1%;
height: 50%;
}
#content {
float: right;
width: 80%;
background-color: red;
}
#menu {
width: 20%;
float: left;
background-color: black;
}
.menu {
text-decoration: none;
background-color: #000000;
font-family: 'Rancho', cursive;
}
.cl-menu {
list-style: none outside none;
display: inline-table;
position: relative;
width: 80%;
}
.cl-menu li {
padding: 5px 1px;
text-align: center;
}
.cl-menu > li:hover {
background-color: #303030;
background-color: #66819C;
color: #FFF;
font-weight: bold;
text-decoration: none;
opacity: 1;
}
.cl-menu li ul {
display: none;
}
.cl-menu li:hover ul {
display: block;
opacity: 0.8;
background-color: #FFF;
margin-top: 4px;
margin-left: 200px;
font-weight: normal !important;
}
.cl-menu li ul li {
border-bottom: 1px solid #cccccc !important;
border-top: none !important;
border-left: none !important;
border-right: none !important;
}
.cl-menu li ul li a {
color: #green;
}
.cl-menu li ul li a:hover {
color: #5j8548;
}
.cl-menu ul:after {
content: "";
clear: both;
display: block;
}
a {
text-decoration: none;
color: #CEF6F5;
font-family: 'Rancho', cursive;
}<link href='http://fonts.googleapis.com/css?family=Rancho' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css.css">
<html>
<body>
<aside id='menu'>
<ul class="cl-menu">
<li> <a href="#">Mis pedidos</a> </li>
<li> <a href="#">Mi perfil</a> </li>
<li> <a href="#">Descuentos</a>
</li>
<li id='albumes'>Albumes
<ul>
<li><a href="#">Navidad 2015</a>
</li>
<li><a href="#">Navidad 2014</a>
</li>
</ul>
</li>
<li> <a href="#">Añadir al carrito</a> </li>
<li> <a href="#">Articulos seleccionados</a> </li>
<li> <a href="#">Finalizar Pedido</a> </li>z
</ul>
</aside>
<aside id="content">WEB CONTENT</aside>
</body>
</html>