how to add subsmenu with this css - html

I want to make a submenu on this vertical menu bar. I know that I must to change the css in order to make submenu but I'm not well using css3.The css file that i'm using not provide for submenu code. The real html code is like this
<body><ul class="ca-menu">
<li>
<a href="pagehome.php">
<span class="ca-icon">D</span>
<div class="ca-content">
<h2 class="ca-main">Home</h2>
</div>
</a>
</li>
<li>
<a href="settingpage.php">
<span class="ca-icon">S</span>
<div class="ca-content">
<h2 class="ca-main">Setting</h2>
</div>
</a>
</li>
</ul></body>
I want to add two more vertical submenu when user hover to this menu(Setting)..Like this
<body><ul class="ca-menu">
<li>
<a href="pagehome.php">
<span class="ca-icon">D</span>
<div class="ca-content">
<h2 class="ca-main">Home</h2>
</div>
</a>
</li>
<li class='has-sub'>
<a href="settingpage.php">
<span class="ca-icon">S</span>
<div class="ca-content">
<h2 class="ca-main">Setting</h2>
</div>
</a>
<!-- this UL will be openning for new submenu
<ul>
<li><a href="settingpage.php"> <!-- Edit Here
<span class="ca-icon">S</span> <!-- Edit Here
<div class="ca-content"> <!-- Edit Here
<h2 class="ca-main">Submenu 1</h2><!-- Edit Here
</div></a>
</li>
<li> <a href="settingpage.php"> <!-- Edit Here
<span class="ca-icon">S</span> <!-- Edit Here
<div class="ca-content"> <!-- Edit Here
<h2 class="ca-main">Submenu 2</h2><!-- Edit Here
</div></a>
</li>
</ul>
this UL will be end for new submenu -->
</li>
</ul></body>
This is the CSS3 file that I'm using
#font-face {
font-family: 'WebSymbolsRegular';
src: url('websymbols/websymbols-regular-webfont.eot');
src: url('websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('websymbols/websymbols-regular-webfont.woff') format('woff'),
url('websymbols/websymbols-regular-webfont.ttf') format('truetype'),
url('websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
font-weight: normal;
font-style: normal;
}
.ca-menu{
padding:0;
margin:5px auto;
width: 145px;
}
.ca-menu li{
width: auto;
height: 50px;
overflow: hidden;
position: relative;
display: block;
background: #fff;
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
margin-bottom: 4px;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.ca-menu li:last-child{
margin-bottom: 0px;
}
.ca-menu li a{
text-align: left;
width: 100%;
height: 100%;
display: block;
color: #333;
position: relative;
}
.ca-icon{
font-family: 'WebSymbolsRegular', cursive;
font-size: 20px;
color: #333;
text-shadow: 0px 0px 1px #333;
line-height: 25px;
position: absolute;
width: 9px;
left: 2px;
text-align: center;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
.ca-content{
position: absolute;
left: 30px;
width: 370px;
height: 60px;
top: 5px;
}
.ca-main{
line-height: 25px;
font-size: 15px;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
.ca-sub{
font-size: 14px;
color: #666;
}
.ca-menu li:hover{
background-color: #000;
}
.ca-menu li:hover .ca-icon{
color: #f900b0;
font-size: 120px;
opacity: 0.2;
left: -20px;
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
}
.ca-menu li:hover .ca-main{
color: #f900b0;
opacity: 0.8;
}
.ca-menu li:hover .ca-sub{
color: #fff;
opacity: 0.8;
}


Add this to the end of your stylesheet:
.ca-menu .has-sub > ul { display: none; }
.ca-menu .has-sub:hover > ul {
display: block;
position: relative;
left: 100%;
top: -100%;
z-index: 10;
padding: 0;
}
.ca-menu li { overflow: visible; }
.ca-menu a { overflow: hidden; }
and modify the following...
...on line 84 from:
.ca-menu li:hover .ca-icon{
to:
.ca-menu li:hover > a > .ca-icon{
...on line 94 from:
.ca-menu li:hover .ca-main{
to:
.ca-menu li:hover > a > .ca-content > .ca-main{
jsfiddle
Here you find a nice summary on CSS selectors:
http://www.w3schools.com/cssref/css_selectors.asp

Related

Footer content not floating to right

I have a footer with content in it. Problem I'm having is the content is displaying vertically instead of horizontally.
I've tried using float:right; that hasn't changed anything. Would really appreciate some help.
Also two of the three social icons aren't showing up. That might be because of the float issue though...
Here's my code
<div class="footer-grid">
<h3>More</h3>
<ul>
<li>FAQ</li>
<li>Privacy Policy</li>
<li>Terms and Conditions</li>
</ul>
</div>
<div class="footer-grid">
<h3>Connect With Us</h3>
<ul class="social-icons">
<li>
<a class="facebook" href="#"> </a>
</li>
<li>
<a class="pinterest" href="#"> </a>
</li>
<li>
<a class="twitter" href="#"> </a>
</li>
</ul>
<p class="copy-right">Website by Elevate design</p>
</div>
Css:
.footer-grid {
min-width: 100%;
float: left;
background-color: #414141;
}
.footer-grid:nth-child(3n+1) {
margin-right: 0;
}
.footer-grid h3 {
color: #3D3D3D;
float: right;
font-size: 14px;
font-family: 'arial';
margin-bottom: 0.8em;
}
.footer-grid ul li {}
.footer-grid ul li a {
color: #8C8C8C;
font-size: 14px;
transition: 0.5s all;
margin-right: 10px;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
}
.footer-grid ul li a:hover {
zoom: 1;
filter: alpha(opacity=75);
opacity: 0.7;
-webkit-transition: opacity .15s ease-in-out;
-moz-transition: opacity .15s ease-in-out;
-ms-transition: opacity .15s ease-in-out;
-o-transition: opacity .15s ease-in-out;
transition: opacity .15s ease-in-out;
}
.social-icons li {
display: inline-block;
}
.social-icons li a {
width: 72px;
height: 72px;
display: block;
}
.social-icons li a.facebook {
background: url(../images/facebook_icon.png) no-repeat 0px 0px;
}
.social-icons li a.twitter {
background: url(../images/twitter_.png) no-repeat -56px 0px;
}
.social-icons li a.pinterest {
background: url(../images/pinterest.png) no-repeat -112px 0px;
}
.footer-grid p {
color: #A2A2A2;
font-size: 14px;
line-height: 1.5em;
padding: 0 0 0.4em 0;
}
.footer-grid input[type="text"] {
width: 84%;
margin: 0.4em 0 1em;
padding: 0.8em;
border: 1px solid #C3C3C3;
transition: border-color 0.5s all;
-webkit-transition: border-color 0.5s all;
-moz-transition: border-color 0.5s all;
-o-transition: border-color 0.5s all;
font-family: 'open_sanssemibold';
color: #3D3D3D;
outline: none;
border-radius: 0.5em;
-webkit-border-radius: 0.5em;
-moz-border-radius: 0.5em;
-o-border-radius: 0.5em;
}
.footer-grid input[type="text"]:hover {
border: 1px solid #999;
}
.footer-grid input[type="submit"] {
background: #F36EA7;
padding: 0.8em;
display: block;
width: 100%;
font-family: 'arial';
color: #FFF;
border: none;
font-size: 14px;
border-radius: 0.3em;
-webkit-border-radius: 0.3em;
-moz-border-radius: 0.3em;
-o-border-radius: 0.3em;
outline: none;
cursor: pointer;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
}
.footer-grid input[type="submit"]:hover {
background: #EE639F;
}
.footer-grids {
padding: 3em 0 5em;
}
.copy-right {
margin-top: 1em;
}
.copy-right a {
color: #A2A2A2;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
}
.copy-right a:hover {
color: #F36EA7;
}

you forgot to put display:inline-block in .footer-grid ul li
.footer-grid ul li{
display:inline-block;
}

how to create fly out for ul li

I have an ul li structure that give me one fly out that is it gives me sub-menu but i want one more sub-menu on hover first sub-menu.
following is the structure
My Css
.main-navi li{
position: relative;
}
.main-navi li div,
.main-navi a{
display: block;
line-height: 80px;
text-transform: uppercase;
font-weight: 900;
padding-left: 30px;
color: #999;
border-bottom: 1px solid #FFFFFF;
position: relative;
z-index: 1;
background: #3a5795;
cursor: pointer;
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.main-navi li div{
padding-left: 0;
border: none;
}
.main-navi li div{
position: relative;
z-index: 1;
background: #1A1A1A;
padding-left: 30px;
border-bottom: 1px solid #212121;
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.main-navi a.active:hover,
.main-navi a.active{
padding-left: 50px;
color: #fff;
background: #ff3333;
cursor: default;
}
.main-navi .dot{
width: 10px;
height: 10px;
position: absolute;
top: 50%;
margin-top: -5px;
right: 30px;
background: #333;
border-radius: 50%;
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.main-navi li div .corner,
.main-navi a .corner{
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
opacity: 0;
z-index: -1;
border-top: 40px solid transparent;
border-left: 20px solid #1A1A1A;
border-bottom: 40px solid transparent;
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.main-navi li div.active .corner,
.main-navi a.active .corner{
right: -20px;
opacity: 1;
border-left: 20px solid #ff3333;
}
.main-navi a.active:hover .dot,
.main-navi a.active .dot{
background: #fff;
}
.main-navi li div:hover,
.main-navi a:hover{
padding-left: 50px;
color: #fff;
background: #151515;
}
.main-navi li div.active{
padding-left: 50px;
background: #ff3333;
color: #fff;
}
.main-navi li div:hover .dot,
.main-navi a:hover .dot{
background: #ff3333;
}
.main-navi li div.active .dot{
background: #fff;
}
.drop-down {
left: 0;
overflow-y: scroll;
position: absolute;
top: -0;
width: 250px;
height:480px;
z-index: -2;
background: #151515;
opacity: 0;
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
}
::-webkit-scrollbar
{
width: 5px;
}
::-webkit-scrollbar-track
{
background-color: #ff3333;
}
::-webkit-scrollbar-thumb
{
background-color: #ffffff;
}
::-webkit-scrollbar-button
{
background-color: #000000;
}
::-webkit-scrollbar-corner
{
background-color: black;
}
.main-navi li:hover .drop-down{
left: 100%;
opacity: 1;
}
.active .drop-down{
overflow: visible;
}
.main-navi .drop-down a{
background: #3a5795;
border-bottom: 1px solid #ffffff;
line-height: 40px;
}
.main-navi .drop-down a:hover{
padding-left: 40px;
}
<!-- code i created to get sub of sub menu-->
.drop-down-in {
left: 100;
overflow-y: scroll;
position: absolute;
top: -0;
width: 250px;
height:480px;
z-index: -2;
background: #151515;
opacity: 1;
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.main-navi .drop-down li:hover .drop-down-in{
left: 200%;
opacity: 1;
}
.active .drop-down-in{
overflow: visible;
}
.main-navi .drop-down .drop-down-in a{
background: #3a5795;
border-bottom: 1px solid #ffffff;
line-height: 40px;
}
.main-navi .drop-down .drop-down-in a:hover{
padding-left: 40px;
}
<!--ends here-->
this is css that contains code for both sub and sub inside sub-menu. class drop-down works fine i want one more sub-menu so i created class drop-down-in which is not working.
My html code is:
<ul>
<li>Home<span class="dot"></span><span class="corner"></span></li>
<li> About<span class="dot"></span><span class="corner"></span></li>
<li>Products And Services<span class="dot"></span><span class="corner"></span>
<ul class="drop-down">
<li>Calenders
<ul class="drop-down-in">
<li>Calenders</li>
<li>Clock Printing</li>
<li>key</li>
<li>Menu Cards</li>
</ul>
</li>
<li>Clock Printing</li>
</ul>
Here is a Fiddle to my question.

You forgot to add the class attribute with the value "main-navi" to your first "ul" element.
<ul class="main-navi">
<li>Home<span class="dot"></span><span class="corner"></span></li>
<li> About<span class="dot"></span><span class="corner"></span></li>
<li>
Products And Services<span class="dot"></span><span class="corner"></span>
<ul class="drop-down">
<li>
Calenders
<ul class="drop-down-in">
<li>Calenders</li>
<li>Clock Printing</li>
<li>key</li>
<li>Menu Cards</li>
</ul>
</li>
<li>Clock Printing</li>
</ul>
</li>
And in CSS you schould update:
.main-navi li:hover .drop-down{
left: 100%;
}
If the value for "left" is 100%, than this element wont be visible.
Here you can find an updated Fiddle.

Modify CSS dropdown menu to add sub-menu option to it

Good day to all!
I need help to modify a CSS navigation menu with dropdowns to add sub-menu to it.
For example, I have menu options "You" -> "Plan". I need to add a sub-menu into "Plan", so when user hovers the cursor over "Plan", a sub-menu with other options appears - just like when he hovers over "You" option.
HTML:
<nav>
<ul>
<li>View</li>
<li class="drop">
You
<div class="dropdownContain">
<div class="dropOut">
<div class="triangle"></div>
<ul>
<li>Plan</li>
<li>Account Settings</li>
<li>Switch Account</li>
<li>Sign Out</li>
</ul>
</div>
</div>
</li>
<li>Help</li>
</ul>
</nav>
CSS:
body {
text-align: center;
background: #e0e0e0;
padding-bottom: 200px;
}
a {
text-decoration: none;
}
/*---------- Wrapper --------------------*/
nav {
width: 100%;
height: 80px;
background: #222;
}
ul {
text-align: center;
}
ul li {
font: 13px Verdana, 'Lucida Grande';
cursor: pointer;
-webkit-transition: padding .05s linear;
-moz-transition: padding .05s linear;
-ms-transition: padding .05s linear;
-o-transition: padding .05s linear;
transition: padding .05s linear;
}
ul li.drop {
position: relative;
}
ul > li {
display: inline-block;
}
ul li a {
line-height: 80px;
padding: 0 20px;
height: 80px;
color: #777;
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
}
ul li a:hover {
color: #eee;
}
.dropOut .triangle {
width: 0;
height: 0;
position: absolute;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid white;
top: -8px;
left: 50%;
margin-left: -8px;
}
.dropdownContain {
width: 160px;
position: absolute;
z-index: 2;
left: 50%;
margin-left: -80px; /* half of width */
top: -400px;
}
.dropOut {
width: 160px;
background: white;
float: left;
position: relative;
margin-top: 0px;
opacity: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15);
-moz-box-shadow: 0 1px 6px rgba(0,0,0,.15);
box-shadow: 0 1px 6px rgba(0,0,0,.15);
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
}
.dropOut ul {
float: left;
padding: 10px 0;
}
.dropOut ul li {
text-align: left;
float: left;
width: 125px;
padding: 12px 0 10px 15px;
margin: 0px 10px;
color: #777;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-transition: background .1s ease-out;
-moz-transition: background .1s ease-out;
-ms-transition: background .1s ease-out;
-o-transition: background .1s ease-out;
transition: background .1s ease-out;
}
.dropOut ul li:hover {
background: #f6f6f6;
}
ul li:hover a { color: white; }
ul li:hover .dropdownContain { top: 65px; }
ul li:hover .underline { border-bottom-color: #777; }
ul li:hover .dropOut { opacity: 1; margin-top: 8px; }
Any help would be appreciated!

You just need to add another ul for your subnav set to position:absolute and display: none and then show it when you hover over .dropOut ul li
.subnav{
display:none;
background: black;
position: absolute;
left: 100%;
top: 0;
}
.dropOut ul li:hover .subnav{
display: block;
}
Just be sure to set .dropOut ul li to position: relative so that it will contain your subnav:
.dropOut ul li {
position: relative; //add
text-align: left;
float: left;
width: 125px;
....
HTML
<div class="dropdownContain">
<div class="dropOut">
<div class="triangle"></div>
<ul>
<li>Plan
<ul class="subnav">
<li>menu 1</li>
<li>menu 1</li>
<li>menu 1</li>
</ul>
</li>
<li>Account Settings</li>
<li>Switch Account</li>
<li>Sign Out</li>
</ul>
</div>
</div>
FIDDLE

You shouldn't use opacity to do this use display instead i have did this using opacity but that leaves some space use display property to avoid this http://jsfiddle.net/k2rjkdxy/ This one with display http://jsfiddle.net/k2rjkdxy/1/
body {
text-align: center;
background: #e0e0e0;
padding-bottom: 200px;
}
a {
text-decoration: none;
}
/*---------- Wrapper --------------------*/
nav {
width: 100%;
height: 80px;
background: #222;
}
ul {
text-align: center;
}
ul li {
font: 13px Verdana, 'Lucida Grande';
cursor: pointer;
-webkit-transition: padding .05s linear;
-moz-transition: padding .05s linear;
-ms-transition: padding .05s linear;
-o-transition: padding .05s linear;
transition: padding .05s linear;
}
ul li.drop {
position: relative;
}
ul > li {
display: inline-block;
}
ul li a {
line-height: 80px;
padding: 0 20px;
height: 80px;
color: #777;
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
}
ul li a:hover {
color: #eee;
}
.dropOut .triangle {
width: 0;
height: 0;
position: absolute;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid white;
top: -8px;
left: 50%;
margin-left: -8px;
}
.dropdownContain {
width: 160px;
position: absolute;
z-index: 2;
left: 50%;
margin-left: -80px; /* half of width */
top: -400px;
}
.dropOut {
width: 160px;
background: white;
float: left;
position: relative;
margin-top: 0px;
opacity: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15);
-moz-box-shadow: 0 1px 6px rgba(0,0,0,.15);
box-shadow: 0 1px 6px rgba(0,0,0,.15);
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
}
.dropOut ul {
float: left;
padding: 10px 0;
}
.dropOut ul li {
text-align: left;
float: left;
width: 125px;
padding: 12px 0 10px 15px;
margin: 0px 10px;
color: #777;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-transition: background .1s ease-out;
-moz-transition: background .1s ease-out;
-ms-transition: background .1s ease-out;
-o-transition: background .1s ease-out;
transition: background .1s ease-out;
}
.dropOut ul li:hover {
background: #f6f6f6;
}
ul li:hover a { color: white; }
ul li:hover .dropdownContain { top: 65px; }
ul li:hover .underline { border-bottom-color: #777; }
ul li:hover .dropOut { opacity: 1; margin-top: 8px; }
.d{
opacity:0;
}
ul li ul li:hover .d{
opacity:1;
}
<nav>
<ul>
<li>View</li>
<li class="drop">
You
<div class="dropdownContain">
<div class="dropOut">
<div class="triangle"></div>
<ul>
<li>Plan
<ul class="d"><li>text</li>
<li>text</li>
<li>text</li>
</ul></li>
<li>Account Settings</li>
<li>Switch Account</li>
<li>Sign Out</li>
</ul>
</div>
</div>
</li>
<li>Help</li>
</
This one with display property
body {
text-align: center;
background: #e0e0e0;
padding-bottom: 200px;
}
a {
text-decoration: none;
}
/*---------- Wrapper --------------------*/
nav {
width: 100%;
height: 80px;
background: #222;
}
ul {
text-align: center;
}
ul li {
font: 13px Verdana, 'Lucida Grande';
cursor: pointer;
-webkit-transition: padding .05s linear;
-moz-transition: padding .05s linear;
-ms-transition: padding .05s linear;
-o-transition: padding .05s linear;
transition: padding .05s linear;
}
ul li.drop {
position: relative;
}
ul > li {
display: inline-block;
}
ul li a {
line-height: 80px;
padding: 0 20px;
height: 80px;
color: #777;
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
}
ul li a:hover {
color: #eee;
}
.dropOut .triangle {
width: 0;
height: 0;
position: absolute;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid white;
top: -8px;
left: 50%;
margin-left: -8px;
}
.dropdownContain {
width: 160px;
position: absolute;
z-index: 2;
left: 50%;
margin-left: -80px; /* half of width */
top: -400px;
}
.dropOut {
width: 160px;
background: white;
float: left;
position: relative;
margin-top: 0px;
display:none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15);
-moz-box-shadow: 0 1px 6px rgba(0,0,0,.15);
box-shadow: 0 1px 6px rgba(0,0,0,.15);
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
}
.dropOut ul {
float: left;
padding: 10px 0;
}
.dropOut ul li {
text-align: left;
float: left;
width: 125px;
padding: 12px 0 10px 15px;
margin: 0px 10px;
color: #777;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-transition: background .1s ease-out;
-moz-transition: background .1s ease-out;
-ms-transition: background .1s ease-out;
-o-transition: background .1s ease-out;
transition: background .1s ease-out;
}
.dropOut ul li:hover {
background: #f6f6f6;
}
ul li:hover a { color: white; }
ul li:hover .dropdownContain { top: 65px; }
ul li:hover .underline { border-bottom-color: #777; }
ul li:hover .dropOut { display:block; margin-top: 8px; }
.d{
display:none;
}
ul li ul li:hover .d{
background:skyblue;
position:absolute;
display:block;
}
<nav>
<ul>
<li>View</li>
<li class="drop">
You
<div class="dropdownContain">
<div class="dropOut">
<div class="triangle"></div>
<ul>
<li>Plan
<ul class="d"><li>text</li>
<li>text</li>
<li>text</li>
</ul></li>
<li>Account Settings</li>
<li>Switch Account</li>
<li>Sign Out</li>
</ul>
</div>
</div>
</li>
<li>Help</li>
</

I've created a drop down menu with pure CSS and I want it to be drop-up not drop-down I can't figure out what to add or change to make it drop-up

I've created a drop down menu with pure CSS and I've gotten it to a place that I like EXCEPT I want it to be "drop-up" not drop-down since the menu bar is going at the bottom of the layout. I can't figure out what to add or change to make it "drop-up," help please!!
The CSS I used:
#cssmenuf {
position: relative;
height: 50px;
background: #2b2f3a;
width: auto;
}
#cssmenuf ul {
list-style: none;
padding: 0;
margin: 0;
line-height: 1;
}
#cssmenuf > ul {
position: relative;
display: block;
background: #2b2f3a;
height: 32px;
width: 100%;
z-index: 500;
bottom:100%;
}
#cssmenuf > ul > li {
display: block;
position: relative;
float: left;
margin: 0;
padding: 0;
}
#cssmenuf ul li a {
display: block;
font-family: Helvetica, sans-serif;
text-decoration: none;
}
#cssmenuf > ul > li > a {
font-size: 12px;
font-weight: bold;
padding: 15px 20px;
color: #7a8189;
text-transform: uppercase;
-webkit-transition: color 0.25s ease-out;
-moz-transition: color 0.25s ease-out;
-ms-transition: color 0.25s ease-out;
-o-transition: color 0.25s ease-out;
transition: color 0.25s ease-out;
}
#cssmenuf > ul > li.has-subf > a {
padding-right: 25px;
}
#cssmenuf > ul > li:hover > a {
color: #ffffff;
}
#cssmenuf li.has-subf::after {
display: block;
content: '';
position: absolute;
width: 0;
height: 0;
}
#cssmenuf > ul > li.has-subf::after {
right: 10px;
top: 20px;
border: 5px solid transparent;
border-top-color: #7a8189;
}
#cssmenuf > ul > li:hover::after {
border-top-color: #ffffff;
}
#cssmenuf ul ul {
position: absolute;
left: -9999px;
top: 70px;
opacity: 0;
-webkit-transition: opacity .3s ease, top .25s ease;
-moz-transition: opacity .3s ease, top .25s ease;
-ms-transition: opacity .3s ease, top .25s ease;
-o-transition: opacity .3s ease, top .25s ease;
transition: opacity .3s ease, top .25s ease;
z-index: 1000;
}
#cssmenuf ul ul ul {
top: 37px;
padding-left: 5px;
}
#cssmenuf ul ul li {
position: relative;
}
#cssmenuf > ul > li:hover > ul {
left: auto;
top: 44px;
opacity: 1;
}
#cssmenuf ul ul li:hover > ul {
left: 170px;
top: 0;
opacity: 1;
}
#cssmenuf ul ul li a {
width: 130px;
border-bottom: 1px solid #eee;
padding: 10px 20px;
font-size: 12px;
color: #9ea2a5;
background: #fff;
-webkit-transition: all .35s ease;
-moz-transition: all .35s ease;
-ms-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
}
#cssmenuf ul ul li:hover > a {
background: #f6f6f6;
color: #8c9195;
}
#cssmenuf ul ul li:last-child > a,
#cssmenu ul ul li.last > a {
border-bottom: 0;
}
#cssmenuf ul ul li.has-subf::after {
border: 4px solid transparent;
border-left-color: #9ea2a5;
right: 10px;
top: 12px;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
-webkit-transition: -webkit-transform 0.2s ease, right 0.2s ease;
}
#cssmenuf ul ul li.has-subf:hover::after {
border-left-color: #fff;
right: -5px;
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
HTML
<div id='cssmenuf'>
<ul>
<li class='active'><a href='index.html'>
<span>About Us</span></a>
</li>
<li class='active'><a href='#'>
<span>FAQ</span></a>
</li>
<li class='active'><a href='#'>
<span>Contact Us</span></a>
</li>
<li class='active'><a href='#'>
<span>Testimonial</span></a>
</li>
<li class='has-subf'><a href='#'><span>Share On</span></a>
<ul>
<li class='has-subf'><a href='#'>
<span>Facebook</span></a></li>
<li class='has-subf'><a href='#'>
<span>Google+</span></a></li>
<li class='has-subf'><a href='#'>
<span>linkedIn</span></a></li>
<li class='has-subf'><a href='#'>
<span>Twitter</span></a></li>
</ul></li>
</ul>
</div>

In "#cssmenuf ul ul" and "#cssmenuf > ul > li:hover > ul" you use "top" instead of "bottom" to position your element. Change "top: 70px;" to "bottom: 70px;" and "top: 44px;" to "bottom: 44px;" and it should work.

Want to fix this menu bar to the top

I want to fix this menu bar at the top of the page,so that when user scrolls down, the menu bar continues to appear and the content flows into it.I have tried acheive that by changing position from relative to absolute, but that doesn't worked.
Here is the Css
ul.dark_menu {
list-style: none;
padding: 5px 1px;
font-family: 'Segoe UI Light', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
font-weight: 200;
font-size: 16px;
letter-spacing: 0.01em;
font-smooth: always;
color: #000000;
line-height: 15px;
margin: auto;
width: 1068px;
position: relative;
background: #2B5797;
}/* Blog johanes djogzs.blogspot.com */
ul.dark_menu:after {
content: "";
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;}
ul.dark_menu li {
float: left;
position: relative;
margin: 1px;}
/* Blog johanes djogzs.blogspot.com */
ul.dark_menu li a, ul.dark_menu li a:link {
color: #fafafa;
text-decoration: none;
display: block;
padding: 8px 26px;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
}/* Blog johanes djogzs.blogspot.com */
ul.dark_menu li a:hover {
color: #fafafa;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}/* Blog johanes djogzs.blogspot.com */
ul.dark_menu li a.selected {
border-right: 1px solid #ddd;
text-transform: uppercase;
margin-left: 10px;
}
ul.dark_menu li a.selected, ul.dark_menu li a:active {
color: #fafafa;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;}
ul.dark_menu li ul {
display: none;
}/* Blog johanes djogzs.blogspot.com */
ul.dark_menu li ul:before {
content: " ";
position: absolute;
display: block;
z-index: 1500;
left: 0;
top: -10px;
height: 10px;
width: 100%;}
ul.dark_menu li ul {-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;top:55px;}
ul.dark_menu li:hover ul {
position: absolute;
display: block;
z-index: 1000;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
left: 0;border-radius: 0px 0px 5px 5px;
top: 37px;
padding: 5px 0;
list-style: none;
background: #fff;
}/* Blog johanes djogzs.blogspot.com */
ul.dark_menu li ul li {
float: none;
margin:0px;}
ul.dark_menu li ul li:first-child {
margin:0px;
border-top: 0 none;}
ul.dark_menu li ul li:last-child {
border-bottom: 0 none;
}/* Blog johanes djogzs.blogspot.com */
ul.dark_menu [data-role="dropdown"] > a::before {
position: absolute;
content: "^";
display: block;
font-size: 15px;
left: 100%;
margin-left: -20px;
top: 10px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
ul.dark_menu li ul li a, ul.dark_menu li ul li a:link {
color: #222;
display: block;
background: transparent none;
padding: 10px 25px 10px 25px;
white-space: nowrap;}
ul.dark_menu li ul li a:hover {
background:#2D89EF;-moz-transition: all 0.1s ease-in-out;color:#fff;
-webkit-transition: all 0.1s ease-in-out;
}/* Blog johanes djogzs.blogspot.com */
.menujohanes{position:relative;}
#search input[type="text"]:hover {width:848px;}
#search input[type="text"] {
background: #fff url("http://3.bp.blogspot.com/-uYZni0pIn-E/T-xY2vVu_-I/AAAAAAAACUY/ZMfR3_BvRFE/s1600/SEARCH_32x32-32.png")no-repeat center left;
font-size: 13px;
color: #222;
width: 0px;
padding: 10px 0px 11px 35px;
z-index: 9;
border: 1px solid #fff;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
margin-bottom: -1px;
position: absolute;
top: 0px;
right:27px;}
ul.dark_menu li ul li ul li { display: none; }
ul.dark_menu li ul li:hover ul li { display: block;}
ul.dark_menu li ul li:hover ul { left: 100%; top: 0; }
and the html
<div class='menujohanes'>
<ul class='dark_menu'>
<li>
<a class='selected' expr:href='data:blog.homepageUrl' title='Home'>
Home
</a>
</li>
<li data-role='dropdown'>
<a href='#'>
Categories
</a>
<ul>
<li>
<a href='#'>
Funny Pictures
</a>
<ul>
<li><a href='#'>Funny Gifs</a></li>
<li><a href='#'>Funny Pictures :)</a></li>
</ul>
</li>
<li>
<a href='#'>
Entertainment
</a>
<ul>
<li><a href='#'>Celebrities Pictures</a></li>
</ul>
</li>
<li>
<a href='#'>
Sports
</a>
<ul>
<li><a href='#'>Soccer Photos</a></li>
<li><a href='#'>Cricket Stars</a></li>
<li><a href='#'>Famous Tennis Players Pictures</a></li>
<li><a href='#'>WWE Superstars</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<form action='/search' id='search' method='get'>
<input name='q' placeholder='Search Somethings..' size='40' type='text'/>
</form>
</div>

Change the div that you want to stay fixed to:
position: fixed;
z-index: 100;
The z-index is there to make sure the content flows under it. This value can be any positive number as long as its greater than any other element that you want to flow under it.
Hope this helps!

in your case make ul.dark_menu position:fixed;