We Keep Coding

How to make just one selected option color differently with jQuery?

I have a dropdown list and in the dropdown I have an empty caption to show as a default placeholder ("ex. Crawler Excavator"). This should be in color lightgray. I underline this should be only in lightgray if selected and if empty caption labe, all other labels (options) when selected or in dropdown list should be black.
I am able to manage the lightgray color for the selected item, but now all the other non-empty items become also lightgray which should be black. See GIF for clarification and JSFiddle code;
https://jsfiddle.net/fhgdrxz9/
element.style {}
select.form-control {
text-overflow: visible;
cursor: pointer;
}
.custom-border-radius>input,
.custom-border-radius>select,
.custom-border-radius div>span>span>.select2-selection .select2-selection--single {
border-radius: 6px;
border: 1px solid #DADADA;
}
.empty-label-gray>div>select,
.empty-label-gray>select {
color: #9e9e9e !important;
}
select.form-control {
padding-right: 30px;
background-image: url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15px' height='8px'><polyline id='Line' fill='none' stroke='%23555555' points='0.5 0.5 6 6 11.545361 0.5'></polyline></svg>);
background-repeat: no-repeat;
background-position: calc(100% - 10px) center;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
}
.form-control {
display: block;
width: 100%;
height: 40px;
transition: border 0.3s;
color: #333333 !important;
border: 1px solid #999;
border-radius: 0;
outline: none;
}
.form-control {
display: flex;
flex: 1;
min-width: 50px;
height: auto;
padding: 8px 10px;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
color: #555;
border: 1px solid #eee;
border-radius: 4px;
background-color: #fff;
background-image: none;
box-shadow: none;
font-size: 16px;
line-height: 1.42857;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
}
.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
-o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
input,
button,
select,
textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
button,
select {
text-transform: none;
}
button,
input,
optgroup,
select,
textarea {
margin: 0;
font: inherit;
color: inherit;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
user agent stylesheet select:not(:-internal-list-box) {
overflow: visible !important;
}
user agent stylesheet select {
-webkit-writing-mode: horizontal-tb !important;
text-rendering: auto;
color: -internal-light-dark(black, white);
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
appearance: menulist;
box-sizing: border-box;
align-items: center;
white-space: pre;
-webkit-rtl-ordering: logical;
background-color: -internal-light-dark(rgb(255, 255, 255), rgb(59, 59, 59));
cursor: default;
margin: 0em;
font: 400 13.3333px Arial;
border-radius: 0px;
border-width: 1px;
border-style: solid;
border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
border-image: initial;
}
.listview-stylingless.mx-listview>ul>li {
padding: 0;
cursor: default;
border: 0;
background-color: transparent;
}
user agent stylesheet li {
text-align: -webkit-match-parent;
}
.mx-listview>ul {
padding: 0px;
list-style: none;
}
user agent stylesheet ul {
list-style-type: disc;
}
body {
min-height: 100%;
color: #555;
background-color: #F8F9FB;
font-family: "Noto Sans", sans-serif;
font-size: 16px;
font-weight: normal;
line-height: 1.42857;
}
body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}
:root {
--partner-primary: #FFDD00;
--partner-text: #000000;
}
html {
font-size: 10px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
ment.style {}
.empty-label-gray>div>select>option,
.empty-label-gray>select>option {
color: black !important;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
user agent stylesheet option {
font-weight: normal;
display: block;
white-space: pre;
min-height: 1.2em;
padding: 0px 2px 1px;
}
select.form-control {
text-overflow: visible;
cursor: pointer;
}
.empty-label-gray>div>select,
.empty-label-gray>select {
color: #9e9e9e !important;
}
.form-control {
display: block;
width: 100%;
height: 40px;
transition: border 0.3s;
color: #333333 !important;
border: 1px solid #999;
border-radius: 0;
outline: none;
}
.form-control {
display: flex;
flex: 1;
min-width: 50px;
height: auto;
padding: 8px 10px;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
color: #555;
border: 1px solid #eee;
border-radius: 4px;
background-color: #fff;
background-image: none;
box-shadow: none;
font-size: 16px;
line-height: 1.42857;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
}
.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
-o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
input,
button,
select,
textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
button,
select {
text-transform: none;
}
button,
input,
optgroup,
select,
textarea {
margin: 0;
font: inherit;
color: inherit;
}
user agent stylesheet select {
-webkit-writing-mode: horizontal-tb !important;
text-rendering: auto;
color: -internal-light-dark(black, white);
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
text-align: start;
white-space: pre;
-webkit-rtl-ordering: logical;
cursor: default;
font: 400 13.3333px Arial;
}
.listview-stylingless.mx-listview>ul>li {
padding: 0;
cursor: default;
border: 0;
background-color: transparent;
}
user agent stylesheet li {
text-align: -webkit-match-parent;
}
.mx-listview>ul {
padding: 0px;
list-style: none;
}
user agent stylesheet ul {
list-style-type: disc;
}
body {
min-height: 100%;
color: #555;
background-color: #F8F9FB;
font-family: "Noto Sans", sans-serif;
font-size: 16px;
font-weight: normal;
line-height: 1.42857;
}
body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}
:root {
--partner-primary: #FFDD00;
--partner-text: #000000;
}
html {
font-size: 10px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
<div class="mx-name-dropDown2 default-alert custom-border-radius empty-label-gray mx-dropdown form-group no-columns"><label class="control-label" for="32.MarketPlace.Service_PurchaseConfigurations.dropDown2.100_bom_555" id="32.MarketPlace.Service_PurchaseConfigurations.dropDown2.100_bom_555-label">Range *</label>
<select id="32.MarketPlace.Service_PurchaseConfigurations.dropDown2.100_bom_555"
class="form-control">
<option value="">ex. Crawler Excavator</option>
<option value="E10_ADT">Articulated Dump Truck</option>
<option value="E20_BHL">Backhoe loader</option>
<option value="E30_BUL">Bulldozer</option>
<option value="E40_CHE">Crawler Excavator</option>
<option value="E50_EC">Compressor</option>
<option value="E60_EG">Generator</option>
<option value="E70_M_C">Mobile crusher</option>
<option value="E80_M_G">Motor Grader</option>
<option value="E90_M_S">Motor Scraper</option>
<option value="E100_MDCE">Midi Excavator - Crawler</option>
<option value="E110_MDWE">Midi Excavator - Wheeled</option>
<option value="E120_MHE_C">Mini Excavator</option>
<option value="E130_OTH">Other</option>
<option value="E140_RDT">Rigid Dump Truck</option>
<option value="E150_SSL">Skid Steer Loader</option>
<option value="E160_T_C">Trash Compactor</option>
<option value="E170_T_H">Telescopic Handler</option>
<option value="E180_W_D">Wheel Dozer</option>
<option value="E190_W_E">Wheeled Excavator</option>
<option value="E200_WL_L">Wheel Loader</option>
<option value="E210_WL_S">Wheel Loader - Small</option>
<option value="E220_EDT">Electric Dump Truck</option>
</select>
</div>
So anyone tips how I can just color the selected empty caption and all other dropdown labels black? I also want to remove the empty caption from the dropdown list (ex. Crawler Excavator).

Dont think it's possible with only CSS, but here is an Javascript example. https://jsfiddle.net/gjf4n9eh/
Javascript
const select = document.getElementById("32.MarketPlace.Service_PurchaseConfigurations.dropDown2.100_bom_555");
select.addEventListener("change", () => {
if(select.value === ""){
select.style.color = 'gray';
} else {
select.style.color = 'black';
}
})
CSS
select {
option {
color: black;
&:first-child {
color: gray;
}
}
}

Can't display posts in a grid view

i'm editing a theme and i cant display posts in a grid view whatever i'm doing
i think the problem is in the css
but i cant determine where
i created a different index but still same problem
if anyone can help me find the error,
i thought it is because of flex codes but i'm not that professional to know that,
also the row code
the css/index.php is
/*!
Theme Name: WP Bootstrap 4
Theme URI: https://bootstrap-wp.com
Author: TwoPoints
Author URI:
Description: "WP Bootstrap 4" is a simple & easy to use WordPress theme. It is based on world's most popular framework for responsive websites, Twitter Bootstrap 4. "WP Bootstrap 4" is a perfect combination of Bootstrap 4 and WordPress. It is fast and light-weight with around 20 kb style.css. It is also search engine friendly. It has a built-in slider for featured posts on blog's home page. It supports all major & popular WordPress plugins like Jetpack, Contact Form 7, Elementor, Beaver Builder, SiteOrigin Page Builder etc. Check demo on https://bootstrap-wp.com
Version: 1.0.7
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl.html
Text Domain: wp-bootstrap-4
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, two-columns, left-sidebar, right-sidebar, custom-colors, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, blog
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
WP Bootstrap 4 is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/
body { background-color: #f8f9fa; }
hr { background-color: #ccc; border: 0; height: 1px; margin-bottom: 1.5em; }
dt { font-weight: bold; }
dd { margin: 0 1.5em 1.5em; }
img { height: auto; /* Make sure images are scaled correctly. */ max-width: 100%; /* Adhere to container width. */ }
figure { margin: 1em 0; /* Extra wide images within figure tags don't overflow the content area. */ }
table { margin: 0 0 1.5em; width: 100%; }
/* Text meant only for screen readers. */
.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */ }
.screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; -webkit-clip-path: none; clip-path: none; color: #21759b; display: block; font-size: 14px; font-size: 0.875rem; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar. */ }
/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus { outline: 0; }
.alignleft { display: inline; float: left; margin-right: 1.5em; }
.alignright { display: inline; float: right; margin-left: 1.5em; }
.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; }
.clear:before, .clear:after, .entry-content:before, .entry-content:after, .comment-content:before, .comment-content:after, .site-header:before, .site-header:after, .site-content:before, .site-content:after, .site-footer:before, .site-footer:after { content: ""; display: table; table-layout: fixed; }
.clear:after, .entry-content:after, .comment-content:after, .site-header:after, .site-content:after, .site-footer:after { clear: both; }
.widget { margin: 0 0 1.5em; /* Make sure select elements fit in widgets. */ }
.widget select { max-width: 100%; }
.sticky { display: block; }
.hentry { margin: 0 0 1.5em; }
.updated:not(.published) { display: none; }
.page-content, .entry-content, .entry-summary { margin: 1.5em 0 0; }
.page-links { clear: both; margin: 0 0 1.5em; }
.comment-content a { word-wrap: break-word; }
.bypostauthor { display: block; }
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .posts-navigation, .infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */ display: none; }
/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */
.infinity-end.neverending .site-footer { display: block; }
.page-content .wp-smiley, .entry-content .wp-smiley, .comment-content .wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; }
/* Make sure embeds and iframes fit their containers. */
embed, iframe, object { max-width: 100%; }
/* Make sure logo link wraps around logo image. */
.custom-logo-link { display: inline-block; }
.wp-caption { margin-bottom: 1.5em; max-width: 100%; }
.wp-caption img[class*="wp-image-"] { display: block; margin-left: auto; margin-right: auto; }
.wp-caption .wp-caption-text { margin: 0.8075em 0; }
.wp-caption-text { text-align: center; }
.gallery { margin-bottom: 1.5em; }
.gallery-item { display: inline-block; text-align: center; vertical-align: top; width: 100%; }
.gallery-columns-2 .gallery-item { max-width: 50%; }
.gallery-columns-3 .gallery-item { max-width: 33.33%; }
.gallery-columns-4 .gallery-item { max-width: 25%; }
.gallery-columns-5 .gallery-item { max-width: 20%; }
.gallery-columns-6 .gallery-item { max-width: 16.66%; }
.gallery-columns-7 .gallery-item { max-width: 14.28%; }
.gallery-columns-8 .gallery-item { max-width: 12.5%; }
.gallery-columns-9 .gallery-item { max-width: 11.11%; }
.gallery-caption { display: block; }
/*--------------------------------------------------------------
# Custom
--------------------------------------------------------------*/
body { -ms-word-wrap: break-word; word-wrap: break-word; -webkit-font-smoothing: auto; text-rendering: optimizeLegibility !important; -moz-osx-font-smoothing: grayscale; font-smoothing: auto; }
a, button, input { -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }
blockquote { font-size: 1.25rem; padding: 1.25rem 1.75rem; }
table { width: 100%; max-width: 100%; margin-bottom: 1rem; background-color: transparent; }
table th, table td { padding: 0.75rem; vertical-align: top; border-top: 1px solid #dee2e6; }
table thead th { vertical-align: bottom; border-bottom: 2px solid #dee2e6; }
table tbody + tbody { border-top: 2px solid #dee2e6; }
table table { background-color: #fff; }
figcaption { padding-top: 0; padding-bottom: .75rem; color: #6c757d; text-align: left; }
input[type="button"], input[type="reset"], input[type="submit"] { display: inline-block; font-weight: 400; text-align: center; white-space: nowrap; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border: 1px solid transparent; line-height: 1.5; border-radius: 0.25rem; -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; -o-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; padding: 0.5rem 1.25rem; color: #fff; background-color: #007bff; border-color: #007bff; }
input[type="button"]:active, input[type="button"]:hover, input[type="reset"]:active, input[type="reset"]:hover, input[type="submit"]:active, input[type="submit"]:hover { color: #fff; background-color: #0062cc; border-color: #005cbf; cursor: pointer; }
input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea { display: block; width: 100%; padding: 0.375rem 0.75rem; font-size: 1rem; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; border-radius: 0.25rem; -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; -o-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; }
input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="range"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="time"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="color"]:focus, textarea:focus { color: #495057; background-color: #fff; border-color: #80bdff; outline: 0; -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); }
input[type="text"]:-webkit-input-placeholder, input[type="text"]:-moz-placeholder, input[type="text"]:-ms-input-placeholder, input[type="email"]:-webkit-input-placeholder, input[type="email"]:-moz-placeholder, input[type="email"]:-ms-input-placeholder, input[type="url"]:-webkit-input-placeholder, input[type="url"]:-moz-placeholder, input[type="url"]:-ms-input-placeholder, input[type="password"]:-webkit-input-placeholder, input[type="password"]:-moz-placeholder, input[type="password"]:-ms-input-placeholder, input[type="search"]:-webkit-input-placeholder, input[type="search"]:-moz-placeholder, input[type="search"]:-ms-input-placeholder, input[type="number"]:-webkit-input-placeholder, input[type="number"]:-moz-placeholder, input[type="number"]:-ms-input-placeholder, input[type="tel"]:-webkit-input-placeholder, input[type="tel"]:-moz-placeholder, input[type="tel"]:-ms-input-placeholder, input[type="range"]:-webkit-input-placeholder, input[type="range"]:-moz-placeholder, input[type="range"]:-ms-input-placeholder, input[type="date"]:-webkit-input-placeholder, input[type="date"]:-moz-placeholder, input[type="date"]:-ms-input-placeholder, input[type="month"]:-webkit-input-placeholder, input[type="month"]:-moz-placeholder, input[type="month"]:-ms-input-placeholder, input[type="week"]:-webkit-input-placeholder, input[type="week"]:-moz-placeholder, input[type="week"]:-ms-input-placeholder, input[type="time"]:-webkit-input-placeholder, input[type="time"]:-moz-placeholder, input[type="time"]:-ms-input-placeholder, input[type="datetime"]:-webkit-input-placeholder, input[type="datetime"]:-moz-placeholder, input[type="datetime"]:-ms-input-placeholder, input[type="datetime-local"]:-webkit-input-placeholder, input[type="datetime-local"]:-moz-placeholder, input[type="datetime-local"]:-ms-input-placeholder, input[type="color"]:-webkit-input-placeholder, input[type="color"]:-moz-placeholder, input[type="color"]:-ms-input-placeholder, textarea:-webkit-input-placeholder, textarea:-moz-placeholder, textarea:-ms-input-placeholder { color: #6c757d; opacity: 1; }
select { height: calc(2.25rem + 2px); display: block; width: 100%; padding: .375rem .75rem; font-size: 1rem; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; border-radius: .25rem; -webkit-transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out; transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out; -o-transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out; }
blockquote { font-style: italic; font-size: 1.15rem; border-left: 3px solid rgba(33, 37, 41, 0.25); padding: 0.5rem 1.75rem; background: rgba(33, 37, 41, 0.05); }
blockquote p { font-size: 1.15rem; }
blockquote p:last-child { margin-bottom: 0; }
.navbar-dark .navbar-nav .dropdown-menu a { display: block; width: 100%; padding: .25rem 1.5rem; clear: both; font-weight: 400; color: #212529; text-align: inherit; white-space: nowrap; background-color: transparent; border: 0; }
.site-footer { padding-top: 3rem; padding-bottom: 3rem; }
.comment-navigation .nav-next, .posts-navigation .nav-next, .post-navigation .nav-next { float: right; text-align: right; width: 50%; }
.comment-navigation .nav-previous, .posts-navigation .nav-previous, .post-navigation .nav-previous { float: left; text-align: left; width: 50%; }
.post-thumbnail { margin-top: 1.5em; display: inline-block; }
.card-title.entry-title { margin-bottom: .25rem; }
.entry-meta { font-size: .9rem; }
.entry-footer { font-size: .9rem; margin-top: 1rem; }
.comments-link { float: right; margin: 4px 0px 4px 10px; font-size: 90%; padding-top: 0.2em; }
.cat-links .badge, .tags-links .badge { font-size: 90%; font-weight: normal; border: 1px solid rgba(0, 0, 0, 0.125); margin: 4px 10px 4px 0; padding: 0.4em .9em; }
.cat-links a, .tags-links a { color: #6c757d; }
.cat-links a:hover, .tags-links a:hover { text-decoration: none; color: #212529; }
.entry-meta a, .comments-link a, .edit-link a { color: #6c757d; }
.entry-meta a:hover, .comments-link a:hover, .edit-link a:hover { text-decoration: none; color: #007bff; }
.entry-title a:hover { color: #007bff !important; }
.content-area.wp-bp-404 .card-body { padding: 2.5rem 4rem; }
.sidebar-1-area .widget, .footer-widgets .widget { margin-bottom: 0; padding: 2rem; }
.sidebar-1-area .widget ul, .footer-widgets .widget ul { padding-left: 20px; color: #6c757d; margin-bottom: 0; }
.sidebar-1-area .widget ul li, .footer-widgets .widget ul li { padding-top: 3px; padding-bottom: 3px; list-style: square; }
.sidebar-1-area .widget ul li:last-child, .footer-widgets .widget ul li:last-child { padding-bottom: 0; margin-bottom: 0; }
.sidebar-1-area .widget ul li a, .footer-widgets .widget ul li a { color: #6c757d; }
.sidebar-1-area .widget ul li a:hover, .footer-widgets .widget ul li a:hover { color: #212529; text-decoration: none; }
.footer-widgets .widget { padding: 0.5rem; }
#wp-calendar #next { text-align: right; }
#wp-calendar #prev a, #wp-calendar #next a { color: #6c757d; }
#wp-calendar #prev a:hover, #wp-calendar #next a:hover { color: #212529; text-decoration: none; }
#calendar_wrap table th, #calendar_wrap table td { padding: .25rem; }
.hentry.card .card-body { padding: 1.5rem; }
select { height: calc(2.25rem + 2px); display: block; width: 100%; padding: .375rem .75rem; font-size: 1rem; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; border-radius: .25rem; -webkit-transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out; transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out; -o-transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out; }
.entry-title a:hover { text-decoration: none; }
.mt-3r { margin-top: 3rem; }
.wp-bs-4-jumbotron { margin-bottom: 0; }
.wp-bs-4-jumbotron .jumbotron-heading { font-weight: 600; }
.wp-bs-4-jumbotron .container { max-width: 40rem; }
.comments-area { clear: both; -ms-word-wrap: break-word; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; }
.comments-area .media-body { overflow: auto; }
.comments-area .comment-list { list-style: none; padding-left: 0; }
.comments-area .comment-list > li { border-bottom: 1px solid #dee2e6 !important; padding: 2.5rem 4rem; }
.comments-area .comment-list ul.children { list-style: none; padding-left: 2rem; }
.comments-area .comment-list ul.children li { padding: 2.5rem 0 0; }
.comments-area .comment-list .comment-respond { padding: 2.5rem 4rem; }
.comments-area .comments-title { padding: 2.5rem 4rem; border-bottom: 1px solid #dee2e6 !important; }
.comments-area .comment-navigation { padding: 1rem 4rem 0; border-bottom: 1px solid #dee2e6 !important; }
.comments-area .wb-comment-form { padding: 2.5rem 4rem; }
.comments-area .wb-cancel-reply { margin-left: 2rem; }
.comments-area .logged-in-as { padding-left: 15px; font-size: .9rem; }
.comments-area .logged-in-as a { color: #6c757d; }
.comments-area .logged-in-as a:hover { color: #212529; text-decoration: none; }
.comments-area .wb-comment-notes { font-size: .9rem; }
.comments-area .no-comments { padding: 1rem 4rem; }
.comments-area small { font-size: .9rem; }
.comments-area p { -ms-word-wrap: break-word; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; }
.comments-area .comment-reply-link, .comments-area .comment-edit-link { margin-right: 1rem; color: #6c757d; }
.comments-area .comment-reply-link:hover, .comments-area .comment-edit-link:hover { color: #212529; text-decoration: none; }
.comments-area .comment-author a:hover { text-decoration: none; color: #212529; }
.wp-bp-sticky { position: absolute; top: 0; right: 1rem; }
.single .post-navigation .nav-links a { color: #6c757d; margin-bottom: 2rem; display: inline-block; }
.single .post-navigation .nav-links a:hover { color: #212529; text-decoration: none; }
.navbar { padding: 1rem; }
#wp-bp-posts-slider { border: 1px solid rgba(0, 0, 0, 0.125); }
#wp-bp-posts-slider .carousel-item img { width: auto; height: 400px; -o-object-fit: cover; object-fit: cover; }
#wp-bp-posts-slider .carousel-caption { background: rgba(0, 0, 0, 0.4); width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; padding: 2rem 4rem; }
#wp-bp-posts-slider .carousel-control-prev, #wp-bp-posts-slider .carousel-control-next { width: 10%; }
.custom-logo-link { margin-right: 1rem; }
.site-title a, .navbar-dark .navbar-brand, .site-description { color: #fff; margin-bottom: 0; }
.navbar-brand { font-size: 1.5rem; }
.navbar-dark .navbar-nav .nav-link { color: #fff; opacity: 0.5; }
.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus { color: #fff; opacity: 0.75; }
.navbar-dark .navbar-nav .show > .nav-link, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .nav-link.active { color: #fff; opacity: 1; }
.navbar-dark .navbar-brand:hover, .navbar-dark .navbar-brand:focus { color: #fff; }
.navbar-dark .navbar-nav .dropdown-menu .active > .nav-link { color: #212529; }
.navbar-dark .navbar-nav .dropdown-menu .nav-link:hover, .navbar-dark .navbar-nav .dropdown-menu .nav-link:focus { color: #212529; }
.page-template-full-width .site-footer.mt-4, .wb-bp-front-page .site-footer.mt-4 { margin-top: 0 !important; }
.wb-hide-mobile-sidebar .wp-bp-sidebar-width { display: none; }
.navbar-toggler { background-color: #343a40; }
.site-header { border-bottom: 1px solid rgba(0, 0, 0, 0.125); }
body.custom-background .wp-bp-main-content .col-md-8 { background: #f8f9fa; padding: 2rem; border: 1px solid rgba(0, 0, 0, 0.125); }
.site-footer a:hover { text-decoration: none; }
.admin-bar .site-header.sticky-top { top: 32px; }
.wb-bp-front-page .site-header { border-bottom: 0; }
.wb-bp-front-page .wp-bs-4-jumbotron { padding: 0; background-size: cover; background-position: center; background-color: #343a40; border-radius: 0; }
.wb-bp-front-page .wp-bs-4-jumbotron .wp-bp-jumbo-overlay { padding: 10rem 2rem; /* background: rgba(#212529, 0.7); */ }
.wb-bp-front-page .wp-bs-4-jumbotron .wp-bp-jumbo-overlay .lead { opacity: .75; }
.wb-bp-front-page .wp-bs-4-jumbotron .wp-bp-jumbo-overlay .jumbotron-heading { font-weight: 600; font-size: 3rem; margin-bottom: 1rem; }
.wb-bp-front-page .wp-bp-services-section { padding: 4rem 0; }
.wb-bp-front-page .wp-bp-main-content { padding: 4rem 0; }
.wb-bp-front-page .wp-bp-main-content p { font-size: 1.25rem; font-weight: 300; }
.wb-bp-front-page .wp-bp-main-content blockquote { font-size: 1.35rem; }
.wb-bp-front-page .wp-bp-main-content blockquote p { font-size: 1.35rem; }
.wb-bp-front-page .wp-bp-main-content .post-thumbnail { margin-bottom: 1rem; margin-top: 0.5rem; }
.wb-bp-front-page .wp-bp-feat-card-img { -o-object-fit: cover; object-fit: cover; height: 200px; width: 100%; }
.wp-caption .wp-caption-text { font-size: 0.95rem; }
/*--------------------------------------------------------------
# Media Queries
--------------------------------------------------------------*/
#media (min-width: 768px) { .hentry.card .card-body { padding: 2.5rem 4rem; }
.wb-hide-mobile-sidebar .wp-bp-sidebar-width { display: block; } }
<?php if ( get_theme_mod( 'blog_display_cover_section', 1 ) ) : ?>
<?php if( get_theme_mod( 'blog_cover_title' ) || get_theme_mod( 'blog_cover_lead' ) || get_theme_mod( 'blog_cover_btn_text' ) ) : ?>
<section class="jumbotron bg-white text-center wp-bs-4-jumbotron border-bottom">
<div class="container">
<h1 class="jumbotron-heading"><?php echo wp_kses_post( get_theme_mod( 'blog_cover_title' ) ); ?></h1>
<p class="lead text-muted"><?php echo wp_kses_post( get_theme_mod( 'blog_cover_lead' ) ); ?></p>
<?php if( get_theme_mod( 'blog_cover_btn_text' ) ) : ?><?php echo esc_html( get_theme_mod( 'blog_cover_btn_text' ) ); ?><?php endif; ?>
</div>
<!-- /.container -->
</section>
<!-- /.jumbotron text-center -->
<?php endif; ?>
<?php endif; ?>
<section class="wp-bp-main-content">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-4">
<div id="primary" class="content-area">
<main id="main">
<?php
if ( have_posts() ) :
if ( is_home() && ! is_front_page() ) : ?>
<header>
<h1 class="page-title screen-reader-text"><?php single_post_title(); ?></h1>
</header>
<?php
endif;
if( get_theme_mod( 'blog_display_posts_slider', '1' ) && is_home() && !is_paged() ) {
get_template_part( 'template-parts/posts-slider' );
}
/* Start the Loop */
while ( have_posts() ) : the_post();
// Include the Post-Format-specific template for the content.
get_template_part( 'template-parts/content', get_post_format() );
endwhile;
the_posts_navigation( array(
'next_text' => esc_html__( 'Newer Posts', 'wp-bootstrap-4' ),
'prev_text' => esc_html__( 'Older Posts', 'wp-bootstrap-4' ),
) );
else :
get_template_part( 'template-parts/content', 'none' );
endif; ?>
</main><!-- #main -->
</div><!-- #primary -->
</div>
<!-- /.col-md-8 -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<?php

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.