We Keep Coding

purple links in simple css dropdown menu

I am styling a very simple CSS drop down menu I found online, the problem is that I cannot make the text links to get colors, they all are just purple text. Here is the CSS code:
/* DROPDOWN MENU */
ul.menu {padding:0;margin:0;list-style-type:none;}
ul.menu >li{float:left;}
ul.menu >li>a{display:inline-block;padding:7px 7px 0px 7px;text-decoration:none;}
.last {border-right:solid 3px #282828;}
ul.menu >li>a:hover{color:#777;
}
ul.menu li ul{
padding: 0;
margin: 0;
list-style-type: none;
background: #fff;
position: absolute;
display: none;
}
ul.menu li:hover ul{
display: block;
color: #010101;
}
ul.menu li ul li a:link{
padding: 15px 20px;
display: block;
/* height: 40px;*/
line-height: 30px;
text-decoration: none;
color: #010101;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}
ul.menu li ul li a:hover{
background: #555;
color: #ffffff;
}
And now here is the HTML code
<ul class="menu">
<li>
<div class="buttons">Stötar</div>
<ul>
<li>försvar</li>
<li>Web Development</li>
<li>Illustrations</li>
</ul>
</li>
<li><div class="buttons">Gäng</div></li>
<li><div class="buttons">Staden</div></li>
<li><div class="buttons">Fängelse</div></li>
<li><div class="buttons">Shopping</div></li>
<li><div class="active">Beskydd</div></li>
<li class="last"><div class="buttons">Konto</div></li>
</ul>
If we put this code in a JSFiddle it looks ok and it seems like it can be fixed but when testing it in Google Chrome the link are just purple
JSFiddle
https://jsfiddle.net/k49edo16/
UPDATE:
It happens only on visited, any idea how to fix this ? ( I am new to CSS )

Replace
ul.menu li ul li a:hover{
background: #555;
color: #ffffff;
}
with
ul.menu li ul li a{
background: #555;
color: #ffffff;
}

Add color to for main links:
ul.menu >li>a
and add next line for sub-menu links.
ul.menu >li>ul>li>a{color:red;}
/* DROPDOWN MENU */
ul.menu {padding:0;margin:0;list-style-type:none;}
ul.menu >li{float:left;}
ul.menu >li>a{display:inline-block;padding:7px 7px 0px 7px;text-decoration:none; color:red;}
ul.menu >li>ul>li>a{color:red;}
.last {border-right:solid 3px #282828; }
ul.menu >li>a:hover{color:#777;
}
ul.menu li ul{
padding: 0;
margin: 0;
list-style-type: none;
background: #fff;
position: absolute;
display: none;
color:red;
}
ul.menu li:hover ul{
display: block;
color: #010101;
}
ul.menu li ul li a:link{
padding: 15px 20px;
display: block;
/* height: 40px;*/
line-height: 30px;
text-decoration: none;
color:red;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}
ul.menu li ul li a:hover{
background: #555;
color: #ffffff;
}
<ul class="menu">
<li>
<div class="buttons">Stötar</div>
<ul>
<li>försvar</li>
<li>Web Development</li>
<li>Illustrations</li>
</ul>
</li>
<li><div class="buttons">Gäng</div></li>
<li><div class="buttons">Staden</div></li>
<li><div class="buttons">Fängelse</div></li>
<li><div class="buttons">Shopping</div></li>
<li><div class="active">Beskydd</div></li>
<li class="last"><div class="buttons">Konto</div></li>
</ul>

could this be because the links are visited? You might need to set additional css classes for a:active, a:visited etc.

Convert hover custom Navbar to Click

Am a bit new to jQuery so please bear with me. I have this navbar menu that drops down on hover. Everything is working perfectly but my plan is to change the hover dropdown into a click and also hide the dropdowns when the outside html is clicked. I am not using any framework.
<ul class="tc-navigation">
<li class="active">
HOME
</li>
<li>
<a id="er">SERVICES</a>
<ul>
<li class="round"><a id="err">Transportation<i class="fa fa-angle-right"></i></a>
<ul>
<li class="round">Bus</li>
<li class="round">Taxi</li>
<li class="round">Air</li>
</ul>
</li>
<li class="round">Car Rental Agencies</li>
<li class="round">Driving Licence</li>
</ul>
</li>
<li>
<a id="er">ABOUT US</a>
<ul>
<li class="round">Who We are</li>
<li class="round">Our Vision</li>
<li class="round">Photo Gallery</li>
</ul>
</li>
<li class="round">CONTACT</li>
</ul>
CSS
.tc-navigation li>ul {
list-style: none;
margin: 0;
padding: 0;
top: 120%;
border-top: 2px solid;
border-radius: 0;
position: absolute;
width: 190px;
visibility: hidden;
opacity: 0;
background: #fff;
z-index: 10;
}
.tc-navigation li ul li {
float: none;
border-bottom: 1px solid #e1e1e1;
}
.tc-navigation li ul li:last-child {
border: 0;
}
.tc-navigation li ul li a {
width: 100%;
color: #444;
padding: 15px;
text-transform: capitalize;
text-align: center;
}
.tc-navigation li:hover>ul {
visibility: visible;
opacity: 1;
top: 100%;
}
.tc-navigation li ul li a:hover {
color: #fff;
}
.tc-navigation li ul li a:hover i {
color: #fff;
}
.tc-navigation li ul li a i {
color: #666;
position: absolute;
right: 10px;
top: 50%;
margin: -7px 0 0;
}
/* Sub Menu */
.tc-navigation li>ul li ul {
left: 110%;
top: 0!important;
}
.tc-navigation li ul li:hover>ul {
visibility: visible;
opacity: 1;
left: 100%;
}

You're currently using the :hover state in the CSS to set different rules for certain DOM elements. CSS doesn't directly respond to click events (except for the :active state for links and buttons, which doesn't really help you here); so the easiest way to convert that to click events would be to have those click events toggle a CSS class on the element, which can then be used in the CSS exactly the same way you're currently using :hover.
$('.tc-navigation > li').on("click", function(e) {
$(this).toggleClass('showSubmenu');
$(this).siblings().removeClass('showSubmenu'); // prevent two submenus from being "open" at the same time
return false; // keep the event from bubbling
});
// Hide menus when clicking outside them. Might be preferable
// to set this only when a submenu is opened, but for now
// I'mm just brute-forcing it on the entire page:
$(document).on('click', function(){
$('.tc-navigation > li').removeClass('showSubmenu')
});
#container {position:relative}
body {background-color:#CCC}
.tc-navigation li>ul {
list-style: none;
margin: 0;
padding: 0;
top: 120%;
border-top: 2px solid;
border-radius: 0;
position: absolute;
width: 190px;
visibility: hidden;
opacity: 0;
background: #fff;
z-index: 10;
}
.tc-navigation li ul li {
float: none;
border-bottom: 1px solid #e1e1e1;
}
.tc-navigation li ul li:last-child {
border: 0;
}
.tc-navigation li ul li a {
width: 100%;
color: #444;
padding: 15px;
text-transform: capitalize;
text-align: center;
}
/* Changing this selector from li:hover to li.showSubmenu; the rest of the CSS is as in the original: */
.tc-navigation li.showSubmenu>ul{
visibility: visible;
opacity: 1;
top: 100%;
}
.tc-navigation li ul li a:hover {
color: #fff;
}
.tc-navigation li ul li a:hover i {
color: #fff;
}
.tc-navigation li ul li a i {
color: #666;
position: absolute;
right: 10px;
top: 50%;
margin: -7px 0 0;
}
/* Sub Menu */
.tc-navigation li>ul li ul {
left: 110%;
top: 0!important;
}
.tc-navigation li ul li:hover>ul {
visibility: visible;
opacity: 1;
left: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<ul class="tc-navigation">
<li class="active">
HOME
</li>
<li>
<a id="er">SERVICES</a>
<ul>
<li class="round"><a id="err">Transportation<i class="fa fa-angle-right"></i></a>
<ul>
<li class="round">Bus</li>
<li class="round">Taxi</li>
<li class="round">Air</li>
</ul>
</li>
<li class="round">Car Rental Agencies</li>
<li class="round">Driving License</li>
</ul>
</li>
<li>
<a id="er">ABOUT US</a>
<ul>
<li class="round">Who We are</li>
<li class="round">Our Vision</li>
<li class="round">Photo Gallery</li>
</ul>
</li>
<li class="round">CONTACT</li>
</ul>
</div>
(I had to add a container element to keep the submenus from falling offscreen; the positioning is still not quite right, I assume because your CSS depends on other page elements not shown here, but it's close enough to demonstrate the idea. Other than that the only change to your CSS was the one line where li:hover was changed to li.showSubmenu.)

Alright, Take a look on my menu
$('#cssmenu li.active').addClass('open').children('ul').show();
$('#cssmenu li.has-sub>a').on('click', function(){
$(this).removeAttr('href');
var element = $(this).parent('li');
if (element.hasClass('open')) {
element.removeClass('open');
element.find('li').removeClass('open');
element.find('ul').slideUp(200);
} else {
element.addClass('open');
element.children('ul').slideDown(200);
element.siblings('li').children('ul').slideUp(200);
element.siblings('li').removeClass('open');
element.siblings('li').find('li').removeClass('open');
element.siblings('li').find('ul').slideUp(200);
}
});
#import url(https://fonts.googleapis.com/css?family=Raleway:400,200);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu {
width: 220px;
font-family: Raleway, sans-serif;
color: #ffffff;
}
#cssmenu ul ul {
display: none;
}
#cssmenu > ul > li.active > ul {
display: block;
}
.align-right {
float: right;
}
#cssmenu > ul > li > a {
padding: 16px 22px;
cursor: pointer;
z-index: 2;
font-size: 16px;
text-decoration: none;
color: #ffffff;
background: #bb0e0e;
-webkit-transition: color .2s ease;
-o-transition: color .2s ease;
transition: color .2s ease;
}
#cssmenu > ul > li > a:hover {
color: #d8f3f0;
}
#cssmenu ul > li.has-sub > a:after {
position: absolute;
right: 26px;
top: 19px;
z-index: 5;
display: block;
height: 10px;
width: 2px;
background: #ffffff;
content: "";
-webkit-transition: all 0.1s ease-out;
-moz-transition: all 0.1s ease-out;
-ms-transition: all 0.1s ease-out;
-o-transition: all 0.1s ease-out;
transition: all 0.1s ease-out;
}
#cssmenu ul > li.has-sub > a:before {
position: absolute;
right: 22px;
top: 23px;
display: block;
width: 10px;
height: 2px;
background: #ffffff;
content: "";
-webkit-transition: all 0.1s ease-out;
-moz-transition: all 0.1s ease-out;
-ms-transition: all 0.1s ease-out;
-o-transition: all 0.1s ease-out;
transition: all 0.1s ease-out;
}
#cssmenu ul > li.has-sub.open > a:after,
#cssmenu ul > li.has-sub.open > a:before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#cssmenu ul ul li a {
padding: 14px 22px;
cursor: pointer;
z-index: 2;
font-size: 14px;
text-decoration: none;
color: #ddd;
background: #49505a;
-webkit-transition: color .2s ease;
-o-transition: color .2s ease;
transition: color .2s ease;
}
#cssmenu ul ul ul li a {
padding-left: 32px;
}
#cssmenu ul ul li a:hover {
color: #fff;
}
#cssmenu ul ul > li.has-sub > a:after {
top: 16px;
right: 26px;
background: #ddd;
}
#cssmenu ul ul > li.has-sub > a:before {
top: 20px;
background: #ddd;
}
<html lang="ru" dir="ltr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- jQuery -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Icon Library -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<div id="cssmenu">
<ul>
<li><i class="fa fa-fw fa-home"></i> Home</li>
<li class="has-sub"><i class="fa fa-fw fa-bars"></i> Services
<ul>
<li class="has-sub">Transportation
<ul>
<li>Bus</li>
<li>Taxi</li>
<li>Air</li>
</ul>
</li>
<li>Car Rental Agencies</li>
<li>Driving Licence</li>
</ul>
</li>
<li class="has-sub"><i class="fa fa-fw fa-cog"></i> Abut us
<ul>
<li>Who We are</li>
<li>Our Vision</li>
<li>Photo Gallery</li>
</ul>
</li>
<li><i class="fa fa-fw fa-phone"></i> Contact</li>
</ul>
</div>
</body>
</html>

How to make a responsive menu with simple jquery and css

I am trying a simple responsive menu with Css and jQuery. I want the jQuery script to work only on a certain window width. When I resize the browser. Here is my code.
$(document).ready(function(){
$(".resmenu").click(function(){
$(".menu").slideToggle();
});
$(".submenu").click(function(){
$(this).toggleClass("active_submenu");
$(this).parent().find(".dropdown").slideToggle();
});
});
.container {
width:980px;
margin:100px auto 0 auto;
font-family:arial;
}
ul, li {
margin:0;
padding:0;
}
.resmenu {
display:none;
}
.menu li {
display: inline-block;
position: relative;
}
.menu li a {
font-size: 14px;
text-transform: uppercase;
color: #3b2612;
padding: 6px 17px;
letter-spacing: 1px;
display: block;
text-decoration: none;
}
.menu li:hover a {
background: #444;
color: #fff !important;
}
.menu li ul {
position: absolute;
width: 250px;
z-index: 5;
left: 0px;
top:28px;
display:none;
}
.menu li:hover ul {
display:block;
}
.menu li ul li {
display: block;
}
.menu li ul li a {
padding: 6px 17px;
transition: all 0.2s;
text-transform: capitalize;
}
.menu li ul li a:hover {
background: #000;
}
/*--- responsive ----*/
#media screen and (max-width:768px) {
.resmenu {
color: #fff !important;
display: block;
text-decoration: none !important;
background: #6ca2bd;
padding: 5px 10px;
}
.menu {
display: none;
background: #444444;
}
.menu li {
position: relative;
display: block;
}
.menu li a {
color: #fff;
font-size:14px;
padding: 6px 17px;
}
.menu li a:hover {
background-color: #000;
color: #000;
transition: all 0.3s;
}
.active_submenu {
background-color: #ceb689 !important;
color: #fff !important;
}
.menu li ul {
display: none;
width: 100%;
position: relative;
top: 0px;
display:none;
}
.menu li:hover ul {
display: none;
top: 0px;
}
.menu li a.active {
color: #fff;
font-family: 'opensanssemibold';
}
.menu li ul li a {
background:#333;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="btm_header">
Menu
<ul class="menu">
<li>Menu</li>
<li>Dropdown One <span></span>
<ul class="dropdown">
<li>Dropdown</li>
<li>Dropdown</li>
<li>Dropdown</li>
<li>Dropdown</li>
</ul>
</li>
<li>Dropdown Two <span></span>
<ul class="dropdown">
<li>Dropdown</li>
<li>Dropdown</li>
<li>Dropdown</li>
<li>Dropdown</li>
</ul>
</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</div>
</div>
It is working on 768px screen size, but when I click on the drop-down link instead of hover on more than 768 screen size, the drop down link is slide toggle. I need this script work on certain width only.

Use $(window).width() to get the width of the screen and use it in your condition:
if ($(window).width() < 768) {
// run your code here
}
See code snippet:
$(document).ready(function() {
$(".resmenu").click(function() {
$(".menu").slideToggle();
});
$(".submenu").click(function() {
if ($(window).width() < 768) {
$(this).toggleClass("active_submenu");
$(this).parent().find(".dropdown").slideToggle();
}
});
});
.container {
width: 980px;
margin: 100px auto 0 auto;
font-family: arial;
}
ul,
li {
margin: 0;
padding: 0;
}
.resmenu {
display: none;
}
.menu li {
display: inline-block;
position: relative;
}
.menu li a {
font-size: 14px;
text-transform: uppercase;
color: #3b2612;
padding: 6px 17px;
letter-spacing: 1px;
display: block;
text-decoration: none;
}
.menu li:hover a {
background: #444;
color: #fff !important;
}
.menu li ul {
position: absolute;
width: 250px;
z-index: 5;
left: 0px;
top: 28px;
display: none;
}
.menu li:hover ul {
display: block;
}
.menu li ul li {
display: block;
}
.menu li ul li a {
padding: 6px 17px;
transition: all 0.2s;
text-transform: capitalize;
}
.menu li ul li a:hover {
background: #000;
}
/*--- responsive ----*/
#media screen and (min-width:769px) {
.menu {
display: block!important;
}
}
#media screen and (max-width:768px) {
.resmenu {
color: #fff !important;
display: block;
text-decoration: none !important;
background: #6ca2bd;
padding: 5px 10px;
}
.menu {
display: none;
background: #444444;
}
.menu li {
position: relative;
display: block;
}
.menu li a {
color: #fff;
font-size: 14px;
padding: 6px 17px;
}
.menu li a:hover {
background-color: #000;
color: #000;
transition: all 0.3s;
}
.active_submenu {
background-color: #ceb689 !important;
color: #fff !important;
}
.menu li ul {
display: none;
width: 100%;
position: relative;
top: 0px;
display: none;
}
.menu li:hover ul {
display: none;
top: 0px;
}
.menu li a.active {
color: #fff;
font-family: 'opensanssemibold';
}
.menu li ul li a {
background: #333;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="btm_header">
Menu
<ul class="menu">
<li>Menu</li>
<li>Dropdown One <span></span>
<ul class="dropdown">
<li>Dropdown</li>
<li>Dropdown</li>
<li>Dropdown</li>
<li>Dropdown</li>
</ul>
</li>
<li>Dropdown Two <span></span>
<ul class="dropdown">
<li>Dropdown</li>
<li>Dropdown</li>
<li>Dropdown</li>
<li>Dropdown</li>
</ul>
</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</div>
</div>

In css change "container" width to 100%, and set max-width to 980px.

how to make dropdown sub menu width equal to the parent div with js

I have a CSS and HTML drop-down menu and I want to keep the width of my sub menus equal to their parent. I tried several ways but nothing works for me. If its possible to do it whether with CSS or with JS its fine for me here is my code
HTML
<nav>
<ul class="navi_main">
<li>Home</li>
<li>About
<ul class="sub_navi_main">
<li>Page 1</li>
<li>Page 2</li>
</ul>
</li>
<li>Products
<ul class="sub_navi_main">
<li>Prod 1</li>
<li>Prod 2</li>
</ul>
</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</nav>
CSS
.navi_main{
display:block;
}
.navi_main li{
display: table-cell;
z-index: 100;
}
.navi_main li:first-child{
margin-left:0;
}
.navi_main li a {
text-decoration: none;
display: block;
font-size: 16px;
color: #8098b1;
padding: 0 14px;
height: 64px;
line-height: 64px;
border-right: 1px solid #e6e6e6;
transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
text-shadow: 0 1px 1px rgba(255,255,255,.64);
text-transform: uppercase;
position: relative;
}
.navi_main li a:hover, .navi_main li:hover > a{
color:#ffffff;
background:#9CA3DA;
}
.navi_main ul {
display: none;
margin: 0;
padding: 0;
width: 100%;
position:relative;
background: #ffffff;
z-index:999999;
}
.navi_main ul li {
display:block;
float: none;
background:none;
margin:0;
padding:0;
}
.navi_main ul li a {
font-size: 14px;
font-weight: normal;
display: block;
color: #797979;
border-left: 3px solid #ffffff;
background: #ffffff;
height:40px;
line-height:40px;
}
.navi_main ul li a:hover, .navi_main ul li:hover > a{
background:#f0f0f0;
border-left:3px solid #9CA3DA;
color:#797979;
}
.navi_main li > ul.visible{
display: block;
position:absolute;
}
.navi_main ul ul {
left: 149px;
top: 0px;
}

OK...I've simplified the CSS a little as you had some reduntant rules in there and made the CSS selectors somewhat more specific and I think this is what you are looking for.
Note: If you want multiline text you really can't set a line-height equal to the height. I took all the height statements and let the link sizing (with padding) determine the actual heigts.
I've made one of the sub-menus visible so you don't have to hover to see it.
* {
box-sizing: border-box;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
.navi_main {
/* display: block;*/
/* not required */
}
.navi_main > li {
display: table-cell;
position: relative;
/* positioning context */
}
.navi_main > li > a {
text-decoration: none;
display: block;
font-size: 16px;
color: #8098b1;
padding: 16px;
border-right: 1px solid #e6e6e6;
transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
text-shadow: 0 1px 1px rgba(255, 255, 255, .64);
text-transform: uppercase;
}
.navi_main li a:hover,
.navi_main li:hover > a {
color: #ffffff;
background: #9CA3DA;
}
.navi_main li > ul {
position: absolute;
top: 100%;
left: 0;
display: none;
width: 100%;
background: #ff0000;
}
.navi_main li:hover > ul {
display:block;
}
.navi_main ul > li {
display: block;
background: #bada55;
}
.navi_main ul > li > a {
font-size: 14px;
font-weight: normal;
display: block;
color: #797979;
background: #ffffff;
padding:8px 16px;
border-left:2px solid white;
}
.navi_main ul li a:hover {
background: #f0f0f0;
color: #797979;
border-left:2px solid #9CA3DA;
}
.navi_main li > ul.visible {
display: block;
}
<nav>
<ul class="navi_main">
<li>Home</li>
<li>About
<ul class="sub_navi_main">
<li>Page 1</li>
<li>Page 2</li>
</ul>
</li>
<li>Products
<ul class="sub_navi_main visible">
<li>Lorem ipsum dolor sit amet.</li>
<li>Prod 2</li>
</ul>
</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</nav>
Codepen Demo

auto resize navigation bar on window resize or mobile device

i have found the code for this: http://media02.hongkiat.com/responsive-web-nav/demo/index.html menu here: http://www.hongkiat.com/blog/responsive-web-nav/
and i am trying to do it with my menu:
CSS:
<style type="text/css">
#trans-nav {list-style-type: none; height: 40px; padding: 0; margin: 0; }
#trans-nav { list-style-type: none; height: 40px; padding: 0; margin: 0; }
#trans-nav li { float: left; position: relative; padding: 0; line-height: 40px; }
#trans-nav li:hover { background-position: 0 -40px; }
#trans-nav li a { display: block; padding: 0 15px; color: #666666; text-decoration: none; }
#trans-nav li a:hover { background-color:#F36F25; color: #eeeeee; }
#trans-nav li ul { opacity: 0; position: absolute; left: 0; width: 8em; background: #EEEEEE; list-style-type: none; padding: 0; margin: 0; }
#trans-nav li:hover ul { opacity: 1; }
#trans-nav li ul li { float: none; position: static; height: 0; line-height: 0; background: none; }
#trans-nav li:hover ul li { height: 30px; line-height: 30px; }
#trans-nav li ul li a { background: #EEEEEE; }
#trans-nav li ul li a:hover { background: #666666; color:#EEEEEE; }
#trans-nav li { -webkit-transition: all 0.2s; }
#trans-nav li a { -webkit-transition: all 0.5s; }
#trans-nav li ul { -webkit-transition: all 1s; }
#trans-nav li ul li { -webkit-transition: height 0.5s; }
</style>
HTML:
<ul id="trans-nav">
<li>Home</li>
<li>About</li>
<li>Products
<ul>
<li>Widgets</li>
<li>Thingamabobs</li>
<li>Doohickies</li>
</ul>
</li>
<li>Contact</li>
</ul>
for some reason i cannot get it working, any ideas what i can do to make my menu the same as the one on that website or alternatively, if that will be too complicated to get my menu to just change to a dropdown menu (select) on screen resize

You want to css media query
A media query consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color. Added in CSS3, media queries let the presentation of content be tailored to a specific range of output devices without having to change the content itself.
More details
https://developer.mozilla.org/en/docs/CSS/Media_queries
http://www.w3.org/TR/css3-mediaqueries/