We Keep Coding

An Issue with LI Tag

The UL.Categories LI A:Active part won't work correctly. It applies the style while I hold a click on the link, once I release the click it returns to its default style. I've included both my old JS and new JS. I didn't know how to include my Old JS to the HTML part multiple times (it works only on one, but as soon as I duplicated the HTML content, it looses its style), so I made the New JS, though Old JS worked marvellously with the HTML part. The New JS won't keep the UL.Categories LI A:Active style... Any help?
Old JS:
<SCRIPT>
$(function()
{
$('UL.Categories LI:First').addClass('TheActiveTab');
$('.CategoriesContents ARTICLE').hide();
$('.CategoriesContents ARTICLE:First').show();
$('UL.Categories LI').on('click',function()
{
$('UL.Categories LI').removeClass('TheActiveTab');
$(this).addClass('TheActiveTab')
$('.CategoriesContents ARTICLE').hide();
var activeTab = $(this).find('a').attr('href');
$(activeTab).show();
return false;
});
})
</SCRIPT>
New JS:
<SCRIPT>
$(document).ready(function()
{
$('.Categories > LI > #ATB').click(function()
{
$('.CategoriesContents > #About').fadeIn(800); //fadeToggle()/show();
$('.CategoriesContents > #Editions').hide(); return false;
});
$('.Categories > LI > #EDIT').click(function()
{
$('.CategoriesContents > #Editions').fadeIn(800);
$('.CategoriesContents > #About').hide(); return false;
});
$('.Categories2 > LI > #ATB').click(function()
{
$('.CategoriesContents2 > #About').fadeIn(800); //fadeToggle()/show();
$('.CategoriesContents2 > #Editions').hide(); return false;
});
$('.Categories2 > LI > #EDIT').click(function()
{
$('.CategoriesContents2 > #Editions').fadeIn(800);
$('.CategoriesContents2 > #About').hide(); return false;
});
});
</SCRIPT>
CSS:
UL.Categories,
UL.Categories2
{
BORDER: 1px Solid #FFF;
WIDTH: 100%;
DISPLAY: Table;
MARGIN: 0 0 0 0;
LIST-STYLE-TYPE: None;
PADDING: 7px 7px 7px 7px;
BORDER-BOTTOM: 1px Solid #404040;
}
UL.Categories LI,
UL.Categories2 LI
{
BORDER: 1px Solid #FFF;
FLOAT: Left;
HEIGHT: 50px;
WIDTH: Auto;
MARGIN: 0 0 0 0;
DISPLAY: Table-Cell;
WHITE-SPACE: NoWrap;
TEXT-ALIGN: Center !important;
PADDING: 12px 20px 7px 20px !important;
}
UL.Categories LI A:Link,
UL.Categories LI A:Visited
{
BORDER: 1px Solid #FFF;
FONT-SIZE: 20px;
FONT-STYLE: Normal;
FONT-WEIGHT: Normal;
TEXT-DECORATION: None;
COLOR: rgba(255, 255, 255, 1);
TEXT-TRANSFORM: UpperCase;
FONT-FAMILY: "Modricha" !important;
-WEBKIT-FONT-SMOOTHING: Antialiased;
-KHTML-FONT-SMOOTHING: Antialiased;
-MOZ-FONT-SMOOTHING: Antialiased;
-MS-FONT-SMOOTHING: Antialiased;
-O-FONT-SMOOTHING: Antialiased;
FONT-SMOOTHING: Antialiased;
}
UL.Categories LI A:Hover,
UL.Categories2 LI A:Hover
{
BORDER: 1px Solid #FFF;
PADDING-BOTTOM: 2px;
TEXT-DECORATION: None;
}
UL.Categories LI A:Active,
UL.Categories2 LI A:Active
{
BORDER: 1px Solid #FFF;
TOP: 0;
HEIGHT: 100%;
POSITION: Relative;
COLOR: rgba(255, 255, 255, 0.5) !important;
➛ BORDER-BOTTOM: 5px Solid #95B5AF !important;
BACKGROUND-COLOR: Transparent;
➛ TRANSITION: All 0.2s Ease 0s;
-O-TRANSITION: All 0.2s Ease 0s;
-MS-TRANSITION: All 0.2s Ease 0s;
-MOZ-TRANSITION: All 0.2s Ease 0s;
-KHTML-TRANSITION: All 0.2s Ease 0s;
-WEBKIT-TRANSITION: All 0.2s Ease 0s;
BOX-SIZING: Border-Box;
-O-BOX-SIZING: Border-Box;
-MS-BOX-SIZING: Border-Box;
-MOZ-BOX-SIZING: Border-Box;
-KHTML-BOX-SIZING: Border-Box;
-WEBKIT-BOX-SIZING: Border-Box;
}
ARTICLE
{
BORDER: 0;
PADDING: 0;
}
HTML:
<UL class="Categories">
<LI>
About This Book
</LI>
<LI class="Kate">
Editions
</LI>
</UL>
<DIV class="TheCleaner"></DIV>
<SECTION class="CategoriesContents">
<ARTICLE id="About" class="Description"></ARTICLE>
<ARTICLE id="Editions" class="Description" style="DISPLAY: None"></ARTICLE>
</SECTION>

on click menu not functioning

Once the menu is clicked it opens but then the other all can open too plus they all can be opened on hover. I have tried several combination of target eg. ul's li's but something i still wrong.
I have posted a fiddle below to but for some reason it doesn’t even work there at all.
i have a single menu working with this code not sure why it brakes down with this. to many levels in the ul li ul configuration? do I need to target a new id?
css
.dropmenu,
.dropmenu ul,
.dropmenu li,
.dropmenu a {
margin: 0;
padding: 0;
border: none;
outline: none;
}
.dropmenu {
height: 20px;
width: 500px ;
}
.dropmenu li {
position: relative;
list-style: none;
float: left;
display: block;
z-index: 9999;
}
.dropmenu li a {
display: block;
padding: 0 14px;
height: 26px;
line-height: 25px;
text-decoration: none;
font-family: Verdana, Arial;
font-size: 13px;
color: #CCCCCC;
border-left: 1px solid #555555;
border-right: 1px solid #666666;
}
.dropmenu ul li:hover > a { color: #ff4200; }
.dropmenu li ul {
position: absolute;
top: 26px;
left: 0;
opacity: 0;
background: #222222;
-webkit-transition: opacity 0.2s ease-in-out 0.2s;
-moz-transition: opacity 0.2s ease-in-out 0.2s;
-o-transition: opacity 0.2s ease-in-out 0.2;
-ms-transition: opacity 0.2s ease-in-out 0.2s;
transition: opacity 0.2s ease-in-out 0.2s;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
display:none;
}
.dropmenu li:hover > ul { opacity: 1; }
.dropmenu ul li {
height: 0;
overflow: hidden;
padding: 0;
-webkit-transition: height .3s ease .1s;
-moz-transition: height .3s ease .1s;
-o-transition: height .3s ease .1s;
-ms-transition: height .3s ease .1s;
transition: height .3s ease .1s;
}
.dropmenu li:hover > ul li {
height: 27px;
line-height: 27px;
overflow: visible;
padding: 0;
}
.dropmenu ul li a {
width: 120px;
padding: 0px 0px 0px 40px;
margin: 0;
border: none;
border: 1px solid #666666;
}
.dropmenu ul li:hover a {
background: #ffffff;
}
.dropmenu li:hover a {
background: #222222;
}
.dropmenu ul li:last-child a { border-radius: 0 0 5px 5px;}
.dropmenu a.mail { background: url(../images/arrow2small.gif) no-repeat 6px center; }
.dropmenu a.messages { background: url(../img/bubble.png) no-repeat 6px center; }
.dropmenu a.signout { background: url(../img/arrow.png) no-repeat 6px center; }
html
<div class="menubar">
<div class="menubarleft">
<!-- Start Menu -->
<ul class="dropmenu" id="dropmenu">
<!-- Home -->
<li>Home
</li>
<!-- CPHome Close -->
<!-- Business Open -->
<li>Electrical
<ul>
<li>Control Panel</li>
<li>New Business</li>
<li>Enhance</li>
<li>Advertising</li>
<li>Media</li>
</ul>
</li>
<!-- 2nd Close -->
<!-- 3rd Open -->
<li><a href="#" class="dropsmall2" >Plumbing</a>
<ul>
<li>Control Panel</li>
<li>Manage domains</li>
<li>Domain wizard</li>
<li>Order domain</li>
<li>Manage hosting</li>
</ul>
</li>
<!-- 3rd Close -->
<!-- 4th Open -->
<li>Air & Water
<ul>
<li>Inbox</li>
<li>New Email </li>
<li>Quick message</li>
<li>Settings</li>
</ul>
</li>
<!-- 4th Close -->
<!-- 5th Open -->
<li>Natural Homes
<ul>
<li>Hobbiest</li>
<li>Startup </li>
<li>Companies</li>
<li>Entreupenuer</li>
</ul>
</li>
<!-- 5th close -->
</ul>
js
$('a.dropsmall2').click(function() {
$('#dropmenu ul').show('medium');
e.preventDefault();
return false;
});
$('#dropmenu a').click(function() {
$(this).parents('ul').not('#dropmenu').hide('slow');
e.preventDefault();
return false;
});
$('#dropmenu ul').mouseleave(function() {
$(this).hide('slow');
return false;
});
https://jsfiddle.net/e9e17adm/1 - doesn’t work at all in the fiddle for some reason getting confused now

http://jsfiddle.net/e9e17adm/6/
Only change (other than including jQuery) was to make it
$(this).next('ul').show('medium');
instead of
$('#dropmenu ul').show('medium');
so that it only does the ul that they clicked on, not all ul elements in the #dropmenu

I'm attempting to create a vertical menu with flyouts

I've spent all night attempting to create this. I finally got it to where it will display a flyout, but all of the dimensions are wrong, and I'm obviously not understanding the hierarchy of css here. My end goal is for it to look like this. (Vertical, color scheme, pretty icons) What I want it to look like. But I want it to act like this.
HTML:
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script><script type="text/javascript" src="js/menu.js"></script><script type="text/javascript">$(document).ready(function(){$(".menu").menu({speed: 400,type: "vertical",});});</script>
<body>
<div class="content">
<ul class="menu">
<li class="active"><a href="JavaScript:void(0)"><i class="icon-dashboard">
</i>Dashboard</a></li>
<li><i class="icon-servers"></i>Servers
<ul>
<li>View Virtual Servers</li>
<li>Add Virtual Servers</li>
</ul>
</li>
<li><i class"icon-user"></i>Users</li>
</ul>
</div>
</body>
CSS:
#import "./font-awesome.css";
#import url('http://fonts.googleapis.com/css?family=Source+Sans+Pro');
.menu {
position: relative;
float: left;
height: 100%;
top: 0;
left: 0;
z-index: 10;
margin: 0;
padding: 0;
font-family: "Source Sans Pro", Segoe UI, Arial;
list-style: none;
background: #303641;
box-shadow: 2px 0 18px rgba(0, 0, 0, 0.26);
}
.menu li {
display: inline;
position: relative
float: left;
height: 2.5em;
line-height: 2.5em;
width: 4em;
margin: 0;
padding: 0;
font-size: 12px;
}
.menu>li>a {
display: block;
padding: 20px 22px;
color: #aaabae;
text-align: center;
text-decoration: none;
text-transform: uppercase;
text-indent: -500em;
border-bottom: 1px solid rgba(170, 171, 174, 0.15);
-webkit-transition: color .2s linear, background .2s linear;
-moz-transition: color .2s linear, background .2s linear;
-o-transition: color .2s linear, background .2s linear;
transition: color .2s linear, background .2s linear
}
.menu li:hover>a, .menu li.active a {
background: #2b303a;
color: #fff
}
.menu li.right {
float: right
}
.menu ul, .menu ul li ul {
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
z-index: 99999;
width: 4em;
background: #303641;
box-shadow: 0 1px 1px rgba(0,0,0,0.3)
}
.menu ul {
top: 60px;
left: 0
}
.menu ul li ul {
top: 0;
left: 100%
}
.menu ul li {
clear: both;
width: 4em;
border: 0;
font-size: 12px
}
.menu ul li a {
padding: 10px 20px;
width: 4em;
color: #dedede;
font-size: 13px;
text-decoration: none;
display: inline-block;
float: left;
clear: both;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-webkit-transition: color .2s linear, background .2s linear;
-moz-transition: color .2s linear, background .2s linear;
-o-transition: color .2s linear, background .2s linear;
transition: color .2s linear, background .2s linear
}
menu>li.showhide {
display: none;
width: 4em;
height: 2.5em;
cursor: pointer;
color: #dedede;
border-bottom: solid 1px rgba(0,0,0,0.1);
background: #303641;
}
menu>li.showhide span.title {
margin: 16px 0 0 25px;
float: left
}
.menu>li.showhide span.icon {
margin: 17px 20px;
float: right
}
.menu>li.showhide .icon em {
margin-bottom: 3px;
display: block;
width: 20px;
height: 2px;
background: #ccc
}
.menu.vertical {
width: 4em;
}
.menu.vertical li {
width: 4em;
}
.menu.vertical li a {
display: inline-block!important;
width: 4em;
padding: 18px 20px 16px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box
}
.menu.vertical ul li {
width: 4em;
}
.menu.vertical ul, .menu.vertical ul li ul {
width: 4em;
}
.menu.vertical ul {
top: 0;
left: 100%
}
.menu.vertical ul li ul {
top: 1px
}
JavaScript:
$.fn.menu=function(e){function r(){$(".menu").find("li").unbind();$(".menu").find("ul").hide(0);if(window.innerWidth<=768){o();s();if(n==true){a();n=false}}else{u();i();if(t.type=="horizontal"&&t.align=="right"&&n==false){a();n=true}}}function i(){$(".menu li").bind("mouseover",function(){$(this).children("ul").stop(true,true).fadeIn(t.speed)}).bind("mouseleave",function(){$(this).children("ul").stop(true,true).fadeOut(t.speed)})}function s(){$(".menu > li").bind("click",function(){if($(this).children("ul").css("display")=="none"){$(this).find("ul").slideDown(t.interval)}else{$(this).children("ul").slideUp(t.interval)}})}function o(){$(".menu > li:not(.showhide)").hide(0);$("-menu > li.showhide").show(0);$(".menu > li.showhide").bind("click",function(){if($(".menu > li").is(":hidden")){$(".menu > li").slideDown(300)}else{$(".menu > li:not(.showhide)").slideUp(300);$(".menu > li.showhide").show(0)}})}function u(){$(".menu > li").show(0);$(".menu > li.showhide").hide(0)}function a(){$(".menu > li").addClass("right");var e=$(".menu").width();var t=$(".menu").children("li");var n=0;$(".menu").children("li:not(.showhide)").detach();for(var r=t.length;r>=1;r--){$(".menu").append(t[r])}}var t={speed:300,type:"horizontal",align:"left"};$.extend(t,e);var n=false;if(t.type=="vertical"){$(".menu").addClass("vertical");if(t.align=="right"){$(".menu").addClass("right")}}$(".menu").prepend("<li class='showhide'><span class='title'>MENU</span><span class='icon'><em></em><em></em><em></em><em></em></span></li>");r();$(window).resize(function(){r()})}
Thank you in advance for any help you provide! I appreciate anything :)

A few things need to be reset.
Remove overflow: hidden from the ul.menu. Otherwise your flyouts will be... hidden. :)
Set the .menu>li to position: relative and then the sub uls to position: absolute offsetting however you need to.
Make sure you're targeting specific <a> elements with your initial css by using child selectors instead of decendant selectors. That is, use .menu > li > a vs .menu li a. The former will only target as that are children of the lis that are children of .menu. The latter will target all as that are descendant of all lis that are descendants of .menu which will include your flyout's <a>s.
This fiddle should get your started.

Make navbar stick upon scrolling to position

I am trying to make my website's navigation bar stick to the top of the page after scrolling to it along with the header image.
So far the code I have is:
<html>
<head>
<link href="C:\Users\Karl\Desktop\New Bistro\menu_assets\styles.css" rel="stylesheet" type="text/css">
<style>
.header{
height:70%;
background-image:url('http://s22.postimg.org/4eags0oep/header.png');
background-size: cover;
width:100%;
}
.nav{
height:8%;
width:100%;
}
.body{
height:100%;
background-image:url('http://upload.wikimedia.org/wikipedia/commons/6/60/Solna_Brick_wall_Silesian_bond_variation1.jpg');
}
.logo {
background-image:url('Title.png');
margin-left:auto;
margin-right:auto;
height:140px;
width:554px;
right:35%;
position:fixed;
z-index:9999
}
</style>
</head>
<body background="http://htmlgiant.com/wp-content/uploads/2010/09/A-grey.jpeg" style="margin: 0; padding: 0;">
<div class="header">
<div class="logo"></div>
</div>
<div class="nav">
<div id='cssmenu'>
<ul>
<li><a href='http://www.132glenbistro.com/'><span>Home</span></a></li>
<li><a href='http://www.132glenbistro.com/'><span>Menu</span></a></li>
<li><a href='http://www.132glenbistro.com/'><span>Gallery</span></a></li>
<li class='last'><a href='http://www.132glenbistro.com/'><span>Contact</span></a></li>
</ul>
</div>
</div>
<div class="body">
<div align="center">
<table width="70%" style="height: 200%;" cellpadding="10" cellspacing="0" border="1">
<tr>
<td colspan="2" style="height: 100px;" bgcolor="#ffffff">
</td></tr></table>
</div>
</div>
</body>
</html>
My css file is:
#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: #232323;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
width: auto;
}
#cssmenu > ul > li {
float: left;
margin-left: 15px;
position: relative;
}
#cssmenu > ul > li > a {
color: #a0a0a0;
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 > ul > li > a:hover {
color: #ffffff;
}
#cssmenu > ul > li > ul {
opacity: 0;
visibility: hidden;
padding: 16px 0 20px 0;
background-color: #fafafa;
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, 0.4);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
}
#cssmenu > ul > li:hover > ul {
opacity: 1;
top: 65px;
visibility: visible;
}
#cssmenu > ul > li > ul:before {
content: '';
display: block;
border-color: transparent transparent #fafafa transparent;
border-style: solid;
border-width: 10px;
position: absolute;
top: -20px;
left: 50%;
margin-left: -10px;
}
#cssmenu > ul ul > li {
position: relative;
}
#cssmenu ul ul a {
color: #323232;
font-family: Verdana, 'Lucida Grande';
font-size: 13px;
background-color: #fafafa;
padding: 5px 8px 7px 16px;
display: block;
-webkit-transition: background-color 0.1s;
-moz-transition: background-color 0.1s;
-o-transition: background-color 0.1s;
transition: background-color 0.1s;
}
#cssmenu ul ul a:hover {
background-color: #f0f0f0;
}
#cssmenu ul ul ul {
visibility: hidden;
opacity: 0;
position: absolute;
top: -16px;
left: 206px;
padding: 16px 0 20px 0;
background-color: #fafafa;
text-align: left;
width: 180px;
-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, 0.4);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
}
#cssmenu ul ul > li:hover > ul {
opacity: 1;
left: 190px;
visibility: visible;
}
#cssmenu ul ul a:hover {
background-color: #cc2c24;
color: #f0f0f0;
}
I have tried using javascript to do this to no avail. I am new to javascript programming in general any help would be appreciated.

http://getbootstrap.com/javascript/#affix
Bootstrap provides this feature called "Affix". Even if you only use this aspect I think it would be much more beneficial to use Bootstrap than try to do it yourself. Or you can look at the source to get an idea of how they do it.
Either way without seeing your attempts I don't see how we're supposed to help you.

How could I make a menu dropdown on click

how could I make my menu drop down when i click on it instead of hover?
I want to be able to click on .logo and have the ul dropdown. and to also hide the menu when i click on it again. The div inside .logo is just a triangle pointing down.
html code:
<div id='Logo_dropdown'>
<ul>
<li class='logo'><a href='#'><div></div></a></li>
<ul>
<li><a href='#upload'><span>Upload Logo</span></a></li>
<li><a href='#Edit'><span>Edit Logo</span></a></li>
</ul>
</div>
CSS code:
#Logo_dropdown ul {
padding: 0;
margin-left:auto;
margin-right:auto;
position:absolute;
top: 50%;
margin-top: -30px;
font-size:14px;}
#Logo_dropdown li {
margin: 0;
padding: 0;}
#Logo_dropdown a {
margin: 0;
padding: 0;
}
#Logo_dropdown ul {
list-style: none;
}
#Logo_dropdown a {
text-decoration: none;
}
#Logo_dropdown {
height: 50px;
position:absolute ;
background: #FCFCFC;
font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
font-size: 12px;
left:200px;
opacity:0.9;
filter:alpha(opacity=90);
padding-left:1%;
padding-right:auto;
width: 190px;
/* background-color:#F3F3F3 ; /*color for Nav Menu Bar
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);*/
width: 140px;
z-index:1;
}
#Logo_dropdown > ul > li {
float: left;
position: relative;
left:140px;}
#Logo_dropdown > ul > li > a {
color: #999;
font-family: Verdana, 'Lucida Grande';
font-size: 12px;
line-height: 70px;
padding: 15px 20px;
-webkit-transition: color .15s;
-moz-transition: color .15s;
-o-transition: color .15s;
transition: color .15s;
}
#Logo_dropdown > ul > li > a:hover {
color:#2bafb8; /*color nav menu bar when mouse hovers*/
}
#Logo_dropdown > ul > li > ul {
opacity: 0;
visibility: hidden;
padding: 16px 0 20px 0;
background-color: #fafafa;
text-align: left;
position: absolute;
top: 55px;
left: 80%;
margin-left: -90px;
width: 250px;
-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, 0.4);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
width:100px;
}
#Logo_dropdown > ul > li:hover > ul {
opacity: 1;
top: 95px; /*position of hover li*/
z-index:1;
overflow: visible;
}
#Logo_dropdown > ul > li > ul:before {
content: '';
display: block;
border-color: transparent transparent #fafafa transparent;
border-style: solid;
border-width: 10px;
position: absolute;
top: -20px;
left: 50%;
margin-left: -10px;
}
#Logo_dropdown > ul ul > li {
position: relative;
overflow: visible;
}
#Logo_dropdown ul ul a {
color: #2bafb8;
font-family: Verdana, 'Lucida Grande';
font-size: 13px;
background-color: #fafafa;
padding: 5px 8px 7px 16px;
display: block;
-webkit-transition: background-color 0.1s;
-moz-transition: background-color 0.1s;
-o-transition: background-color 0.1s;
transition: background-color 0.1s;
}
#Logo_dropdown ul ul a:hover {
background-color: #f0f0f0;
}
#Logo_dropdown ul ul a:hover {
background-color: #2bafb8;
color: #f0f0f0 !important;
}
div{
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #CCC;
}

You can use simply toggle() to view the dropdown :)
I want to be able to click on .logo and have the ul dropdown
Use this :
$('.logo').click(function () {
$('#logodropdown ul.second').toggle();
}
This way, it will show it if hidden, and hide it if visible. You can also set some speed if you want, inside the parathesis as toggle(time in milliseconds).
And please change the second ul to <ul class="second"> as the code might misunderstand your approach and hide both of the lists in the #logodropdown. This would be a good approach to what you want to happen! Or even use a class to differentiate between both the lists.
You can use CSS to do some stuff like :active or :focus. But they won't cause a change in the properties of other elements. That's where you need a help of jQuery. :)

For click you will need to use Javascript, as there is no click event handling in CSS.