Databases
StackOverflow2013
Postsdbo
POAdvanced css menu pop up on the right
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAdvanced css menu pop up on the right
    text
    copied!<p>Down below the picture is my code for my css menu where it says <strong>Sub Item</strong> i want that area to popup on the left of where it says <strong>Product1</strong> thank you soo much in advance.. i used CSS menu makers to make this but they dont have an option to chose where it floats </p> <p>im posting my code below the image</p> <p><img src="https://i.stack.imgur.com/PjbIn.png" alt="enter image description here"></p> <pre><code>/** Body Of Website */ body{ background-image:url('/images/background.png'); background-color:#0a1857; } /** Advanced css menu */ #cssmenu ul { margin: 0; padding: 0;} #cssmenu li { margin: 0; padding: 0;} #cssmenu a { margin: 0; padding: 0;} #cssmenu ul {list-style: none;} #cssmenu a {text-decoration: none;} #cssmenu {height: 70px; background-color: rgb(35,35,35); box-shadow: 0px 2px 3px rgba(0,0,0,.4);} #cssmenu &gt; ul &gt; li { float: left; margin-left: 35px; position: relative; } #cssmenu &gt; ul &gt; li &gt; a { color: rgb(160,160,160); font-family: Verdana, 'Lucida Grande'; font-size: 15px; line-height: 70px; padding: 15px 20px; -webkit-transition: color .15s; -moz-transition: color .15s; -o-transition: color .15s; transition: color .15s; } #cssmenu &gt; ul &gt; li &gt; a:hover {color: rgb(250,250,250); } #cssmenu &gt; ul &gt; li &gt; ul { opacity: 0; visibility: hidden; padding: 16px 0 20px 0; background-color: rgb(250,250,250); text-align: left; position: absolute; top: 55px; left: 50%; margin-left: -90px; width: 180px; -webkit-transition: all .3s .1s; -moz-transition: all .3s .1s; -o-transition: all .3s .1s; transition: all .3s .1s; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4); -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4); box-shadow: 0px 1px 3px rgba(0,0,0,.4); } #cssmenu &gt; ul &gt; li:hover &gt; ul { opacity: 1; top: 65px; visibility: visible; } #cssmenu &gt; ul &gt; li &gt; ul:before{ content: ''; display: block; border-color: transparent transparent rgb(250,250,250) transparent; border-style: solid; border-width: 10px; position: absolute; top: -20px; left: 50%; margin-left: -10px; } #cssmenu &gt; ul ul &gt; li { position: relative;} #cssmenu ul ul a{ color: rgb(50,50,50); font-family: Verdana, 'Lucida Grande'; font-size: 13px; background-color: rgb(250,250,250); padding: 5px 8px 7px 16px; display: block; -webkit-transition: background-color .1s; -moz-transition: background-color .1s; -o-transition: background-color .1s; transition: background-color .1s; } #cssmenu ul ul a:hover {background-color: rgb(240,240,240);} #cssmenu ul ul ul { visibility: hidden; opacity: 0; position: absolute; top: -16px; left: 206px; padding: 16px 0 20px 0; background-color: rgb(250,250,250); text-align: left; width: 160px; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4); -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4); box-shadow: 0px 1px 3px rgba(0,0,0,.4); } #cssmenu ul ul &gt; li:hover &gt; ul { opacity: 1; left: 196px; visibility: visible;} #cssmenu ul ul a:hover{ background-color: rgb(205,44,36); color: rgb(240,240,240); } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload