Develop Reference

CSS Create a border on current page

I'm trying to copy a Sit the Test website, and got stuck in the border on the current page.
What I wanted is to make a border in Build test so it looks like a current page.
I have this HTML.
* {
text-decoration: none;
}
body {
background-color: #D9E0E6;
}
header {
height: 100px;
background-color: #323b44;
}
.web-logo img {
width: 300px;
height: 60px;
display: block;
float: left;
margin: 20px 0 0 30px;
}
nav {
float: right;
width: 600px;
text-align: right;
margin: 15px 30px 15px 0;
}
nav ul {
display: flex;
justify-content: center;
line-height: 60px;
text-align: center;
}
nav ul li {
flex: 1;
}
nav ul li a {
display: block;
font-family: catamaran, sans-serif;
font-size: 18px;
color: #f2f2f2;
border: 3px solid transparent;
}
nav ul li a.current {
/* I'm trying to make a border here on the current page which is the Build Test*/
border: 3px solid #80dbb8;
border-radius: 10px;
color: #80dbb8;
}
nav ul li a:hover {
border: 3px solid #80dbb8;
border-radius: 7px;
}
```
<header>
<div class="web-logo"><img src="img/logo-bd2b73d4287cc1b0b5d0562cbf409217.png" alt="Site the Test Logo"></div>
<nav id="nav">
<ul>
<li>Build Test</li>
<li>Browse Test</li>
<li>Help</li>
<li>Sign In</li>
</ul>
</nav>
</header>
does anyone can help?
These are for the design only I'm not working yet with the page transition.

Make Submenu of a Responsive Nav show

so I'm trying to make my navigation submenu dropdown on hover while in mobile nav mode (smaller than 900px).
How can I get my submenu items to show on hover while in mobile navigation mode?
Many thanks.
Edit:
To clarify, just for the browser window size on Desktop size for the window that screen, not actual tablet functionality hover.
$(document).ready(function(){
$("#nav-mobile").html($("#nav").html());
$("#nav-trigger span").click(function(){
if ($("#nav-mobile ul").hasClass("expanded")) {
$("#nav-mobile ul.expanded").removeClass("expanded").slideUp(250);
$(this).removeClass("open");
} else {
$("#nav-mobile ul").addClass("expanded").slideDown(250);
$(this).addClass("open");
}
});
});
/* RESPONSIVE */
#nav-trigger {
display: none;
text-align: center;
}
#nav-trigger span {
display: inline-block;
padding: 10px 0 10px 0;
background-color: #333;
color: #FFF;
cursor: pointer;
text-transform: uppercase;
width: 100%;
}
/* Mobile Nav Triangle */
#nav-trigger span:after {
display: inline-block;
margin-left: 10px;
width: 20px;
height: 10px;
content: "";
border-left: solid 10px transparent;
border-top: solid 10px #FFF;
border-right: solid 10px transparent;
}
/* Mobile Nav Triangle */
#nav-trigger span.open:after {
border-left: solid 10px transparent;
border-top: none;
border-bottom: solid 10px #FFF;
border-right: solid 10px transparent;
}
#nav-trigger span:hover {
background-color: #444;
}
/*--------------------- NAV MOBILE ------------------*/
#nav-mobile {
display: none;
position: relative;
margin-bottom: 30px;
}
#nav-mobile ul {
display: none;
list-style-type: none;
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: #333;
}
#nav-mobile li {
display: block;
margin: 0 2px;
border-top: solid 1px #CCC;
}
#nav-mobile li:last-child {
border-top: solid 1px #CCC;
}
#nav-mobile a {
display: block;
color: white;
padding: 10px 30px;
text-transform: uppercase;
}
#nav-mobile a:hover {
background-color: #444;
letter-spacing: 2px;
transition: all 0.3s ease;
}
/* RESPONSIVE */
#nav ul ul {
background: #333;
display: none;
max-width: 180px;
position: absolute;
}
/* Dropdown Menu */
#nav ul ul li {
display: block;
font-size: 14px;
}
#nav {
background: #222;
border-top: 1px solid #444;
height: 50px;
letter-spacing: 1px;
margin: 0 auto;
position: relative;
text-align: center;
text-transform: uppercase;
width: 100%;
z-index: 1000; /* To overlay content */
}
#nav ul {
font-size: 0; /* Fixes colour hover to full button width */
}
#nav li {
border-right: 1px solid #3f3f3f; /* Nav button divider */
height: auto;
width: 160px; /* Nav button size */
}
/* Left Divider of Home Button */
.home {
border-left: 1px solid #3f3f3f;
}
#nav ul li {
display: inline-block;
font-size: 16px;
}
/* Hover Effect */
#nav ul li:hover {
background: #333;
opacity: 0.9;
transition: all 0.3s ease;
}
/* Removes Link Visited Colour */
#nav ul li a, visted {
color: #fafafa;
display: block;
padding: 15px;
text-decoration: none;
}
/* Hover Effect */
#nav ul li a:hover {
color: #939393;
text-decoration: none;
transition: color 0.3s ease;
}
#nav ul li:hover ul {
display: block;
}
/* Dropdown Menu */
#nav ul ul {
background: #333;
display: none;
max-width: 180px; /* Dropdown menu bg fill */
position: absolute;
}
/* Dropdown Menu */
#nav ul ul li {
display: block;
font-size: 14px;
}
/* Dropdown Menu */
#nav ul ul li a:visited {
color: #fafafa;
}
/* Dropdown Menu */
#nav ul ul li a:hover {
background: #333;
color: #939393;
padding-right: 1px; /* Slide right effect */
transition: all 0.3s ease;
}
/*--------------------------------------------
MEDIA QUERIES
-------------------------------------------*/
#media all and (max-width: 900px) /* Original 900 */ {
#nav-trigger {
display: block;
}
#nav {
display: none;
}
#nav-mobile {
display: block;
}
#nav ul ul li:hover ul {
display: block;
}
#nav ul ul {
background: #333;
display: none;
max-width: 180px; /* Dropdown menu bg fill */
position: absolute;
}
#nav ul ul li {
display: block;
}
/* Dropdown Menu */
#nav ul li a:hover ul {
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Start of Nav -->
<div id="nav-trigger">
<span>MENU</span>
</div>
<div id="nav">
<ul>
<li>Link</li>
<li>
Link
<ul class="sub">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</li>
<li>
Link
<ul class="sub">
<li>Link</li>
<li>Link</li>
</ul>
</li>
<li>
Link
<ul class="sub">
<li>Link</li>
<li>Link</li>
</ul>
</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
<div id="nav-mobile"></div>
<!-- End of Nav -->

Based on your code as it is now this would display the menus you have marked with .sub when their parent list item is hovered over.
#media all and (max-width: 900px) /* Original 900 */ {
#nav > ul > li:hover > ul {
display:block;
}
}
or
#media all and (max-width: 900px) /* Original 900 */ {
#nav > ul > li:hover .sub {
display:block;
}
}

so I'm trying to make my navigation submenu dropdown on hover while in mobile nav mode (smaller than 900px).
When you mention Mobile Nav and smaller than 900px, I assume you are talking about tablet and mobile devices. Hover for those would make no sense(no cursor in those devices).
For larger devices(Laptops/Desktops) .hover() would come to your rescue.
Jquery .hover

Expand nav on click

The problem I encounter is that I want the nav to expand when I click on a button, but what it now does is that it looks like it kinda float above the rest. Or that it is another div that is created underneath it.
For a clearer understanding of what is happening I would recommend that you run the snippet, because it is hard for me to explain what really happens.
This problem is only relative for the mobile menu.
I also use the bootstrap css, but that onlt effects <div class="container">.
The things I already tried to fix the problem are:
Removed the bootstrap css
Changed the <nav> to a div element
Changed all the positions to relative
Changed somethings about the float
So this are the most important parts of the code I use.
/*JS for the hide/show of the menu*/
$(document).ready(function() {
$(".menu-trigger").click(function() {
$(".menu").slideToggle(400, function() {
$(this).toggleClass("nav-expanded").css('display', '');
});
});
});
/*JS for the dropdown in the menu*/
$(document).ready(function () {
$("li").click(function () {
$('li > ul').not($(this).children("ul").slideToggle()).hide();
});
});
body{
background-color: white;
}
.container{
background-color: #919191;
box-shadow: 0px 0px 2px black;
}
nav {
background: #7D7D7D;
border-radius: 4px;
box-shadow: 0px 0px 2px #303030;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
height: 40px;
margin: 2px 10px;
}
nav ul, li, a {
margin: 0;
padding: 0;
}
nav a, a:link, a:visited, a:hover{
text-decoration: none;
color: white;
display: block;
}
ul > li {
list-style: none;
float: left;
}
ul > li a {
color: #fff;
font-weight: bold;
line-height: 40px;
height:40px;
display:block;
padding:0px 10px;
}
nav ul li a:hover{
border-radius: 4px;
background: #666666;
display: block;
}
nav ul li ul {
background: #333333;
border-radius: 4px;
box-shadow: 0px 0px 2px #303030;
display: none;
position: absolute;
z-index:100;
}
nav ul li ul li {
float: none;
line-height: 40px;
width: 150px;
}
.menu-trigger{
display: none;
}
.burger{
background-color: white;
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
margin: 5px auto;
}
#media screen and (max-width: 760px){
.menu-trigger{
display: block;
background-color: #BFBFBF;
border-radius: 4px;
box-shadow: 0px 0px 2px #303030;
height: 35px;
padding: 5px 5px;
margin: 3px 10px;
width: 40px;
}
.nav-expanded{
display: block;
}
nav ul{
display: none;
background: #7D7D7D;
border-radius: 0 0 4px 4px;
}
nav ul li{
float: none;
padding: 0;
}
nav ul li:first-child{
margin-top: 5px;
}
nav ul li ul {
background: #7D7D7D;
box-shadow: none;
display: none;
position: relative;
z-index:0;
}
nav ul li ul li {
line-height: 35px;
width: 100%;
}
}
.active{
border-radius: 4px;
background-color: #404040;
}
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<title></title>
</head>
<body>
<div class="container">
<header>
<nav>
<button class="menu-trigger">
<span class="burger"></span>
<span class="burger"></span>
<span class="burger"></span>
</button>
<ul class="menu">
<li class="active">Link
</li>
<li>Link 2
</li>
<li class="dropdown-trigger">Dropdown<span class="caret"></span>
<ul>
<li>Link</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
<li>Link 3
</ul>
</nav>
</header>
</div>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</body>
</html>
Thanks in advance for your help.
And if there are somethings unclear please ask and maybe I can make a clearer. Also if there is something wrong with the post I would like to hear it.

Check the DEMO here
You had a fixed height for "nav" that was 40px with border radius 4px, which was making it not to expand and look like a separate element in itself even though the expanded list was inside it.
What you need to do is to give it an auto height, so that it has the height equal to the height of all the child elements together.
Check the demo, let me know if you wanted this only.

Cannot hack pass css plugin to make two input elements appears in-line?

I'm using a plugin for drop down menu. The link for plugin is here.. I want to add this code, into already made html code, but first I wanted to tested. So, far it all works fine until I try to make two copies of widget and make them appear side by side. The default is for input element to appear in-line but the plugin css is pushing it down turning into a single column (stacked) I don't want this. Here is HTML code.
HTML
<head>
<script type="text/javascript" src="lib/jquery-1.2.6.js"></script>
<script type="text/javascript" src="lib/jquery.mcdropdown.js"></script>
<!---// load the mcDropdown CSS stylesheet //--->
<link type="text/css" href="css/jquery.mcdropdown.css" rel="stylesheet" media="all" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
</head>
<body>
<ul id="categorymenu" class="mcdropdown_menu">
<li rel="1">
Arts & Humanities
<ul>
<li rel="2">
Photography
<ul>
<li rel="3">
3D
</li>
<li rel="4">
Digital
</li>
</ul>
</li>
<li rel="5">
History
</li>
<li rel="6">
Literature
</li>
</ul>
</li>
<li rel="7">
Business & Economy
</li>
<li rel="8">
Computers & Internet
</li>
<li rel="9">
Education
</li>
<li rel="11">
Entertainment
<ul>
<li rel="12">
Movies
</li>
<li rel="13">
TV Shows
</li>
<li rel="14">
Music
</li>
<li rel="15">
Humor
</li>
</ul>
</li>
<li rel="10">
Health
</li>
</ul>
<div class="test"> <input type="text" class="category" name="category" id="category" value="" />
<input type="text" class="category" name="category" id="category_1" value="" /></div>
JAVASCRIPT
<script>
$(document).ready(function (){
$("#category").mcDropdown("#categorymenu");
$("#category_1").mcDropdown("#categorymenu");
});
</script>
</body>
</html>
CSS PLUGIN
/*
styles for the psuedo-select box
*/
div.mcdropdown {
position: absolute;
border: 1px solid #8e9daa;
padding: 1px;
display: -moz-inline-block;
display: inline-block;
width: 408px;
height: 14px;
padding: 2px;
}
/* style either the input or div where the plug-in is attached to */
div.mcdropdown input,
div.mcdropdown div {
position: absolute;
background-color: #fff;
left: 0;
top: 0;
width: 98%;
border: 0;
padding: 2px 0 0 3px;
font: 11px Arial, Helvetica, sans-serif;
}
div.mcdropdown a {
position: absolute;
right: 1px;
top: 1px;
background: transparent url(../images/mcdropdown/mcdd_select_button_sprite.gif) no-repeat top left;
display: -moz-inline-block;
display: inline-block;
height: 16px;
width: 15px;
text-decoration: none;
font-size: 0pt;
z-index: 2;
outline: 0;
}
div.mcdropdown a:hover, div.mcdropdown a:focus {
background-position: 0% -16px;
}
div.mcdropdown a:active {
background-position: 0% -32px;
outline: none; /* hide dotted outline in Firefox */
}
div.mcdropdownDisabled {
background-color: #e1e0e0;
filter:alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
-khtml-user-select: none;
-o-user-select: none;
-moz-user-select: none;
-moz-user-focus: ignore;
-moz-user-input: disabled;
}
div.mcdropdownDisabled input {
cursor: default;
}
div.mcdropdownDisabled a:hover, div.mcdropdownDisabled a:focus {
background-position: 0 0;
cursor: default;
}
/*
styles for the dropdown menu
*/
ul.mcdropdown_menu {
display: none;
margin: 0px;
padding: 0px;
list-style-type: none;
/* float so we can calculate the size of the columns */
float: left;
clear: both;
z-index: 10000;
-khtml-user-select: none;
-o-user-select: none;
-moz-user-select: none;
-moz-user-focus: ignore;
-moz-user-input: disabled;
}
ul.mcdropdown_menu ul {
display: none;
font: 11px Arial, Helvetica, sans-serif;
/* float so we can calculate the size of the columns */
/*
float: left;
*/
}
/* -- Sub-Menus -- */
ul.mcdropdown_menu ul {
position: absolute;
list-style-type: none;
margin: 0px;
margin-left: 30px;
padding: 0px;
z-index: 10000;
}
ul.mcdropdown_menu ul li {
margin: 0px;
min-width: 150px;
_width: 150px; /* ie6 min-width hack */
}
/* color schema */
ul.mcdropdown_menu {
/*
height: 19px;
*/
height: auto;
background-color: #e1e0e0;
padding: 5px 5px;
/* define font here for IE6 */
font: 11px Arial, Helvetica, sans-serif;
}
ul.mcdropdown_menu li {
padding: 2px 20px 2px 6px;
/* this is needed to ensure that all browsers have the same line-height--fixes issues in Chrome (Mac) and IE10 */
line-height: 14px;
}
/* we don't use "ul.mcdropdown_menu > li" here so that IE6 knows how to style the root level */
ul.mcdropdown_menu li.mc_root {
cursor: pointer;
white-space: nowrap;
color: #666;
border-top: 1px solid #fff;
padding: 2px 20px 2px 6px;
margin: 0 10px;
}
ul.mcdropdown_menu > li.mc_endcol {
border-bottom: 1px solid #fff;
}
/* this is for IE6 only */
ul.mcdropdown_menu li.mc_hover {
background-color: #ccc !important;
}
ul.mcdropdown_menu > li:hover {
border-top: 1px solid #999;
background-color: #999 !important;
color: #fff;
}
ul.mcdropdown_menu > li:hover.mc_endcol {
border-bottom: 1px solid #999;
}
ul.mcdropdown_menu > li:hover + li:not(.mc_firstrow) {
border-top: 1px solid #999;
}
ul.mcdropdown_menu li.mc_parent {
padding-right: 20px !important;
background: url(../images/mcdropdown/mcdd_icon_normal.gif) no-repeat 100% 50%;
}
ul.mcdropdown_menu li:hover.mc_parent {
background: #999 url(../images/mcdropdown/mcdd_icon_hover.gif) no-repeat 100% 50% !important;
color: #fff !important;
}
ul.mcdropdown_menu ul {
background: #f0f0f0;
/* add a slight border for better visualization of deep menus */
border: 1px solid #d0d0d0;
padding-bottom: 10px;
/* IE 6/7 will bleed through the background color if we don't set the visibility to hidden */
visibility: hidden;
}
ul.mcdropdown_menu ul li {
background: #f0f0f0;
padding-left: 16px !important;
border-top: 1px solid #fff;
color: #666;
white-space: nowrap;
}
ul.mcdropdown_menu ul li.mc_firstrow {
border-top: 1px solid #f0f0f0;
}
ul.mcdropdown_menu ul li.mc_endcol {
border-bottom: 1px solid #fff;
}
ul.mcdropdown_menu ul li:hover {
background-color: #d6d6d6;
border-top: 1px solid #dedede;
color: #666;
}
ul.mcdropdown_menu ul li.mc_endcol:hover {
border-bottom: 1px solid #dedede;
}
ul.mcdropdown_menu ul li:hover + li:not(.mc_firstrow) {
border-top: 1px solid #dedede;
}
/*
* drop down shadows
*/
div.mcdropdown_shadow {
display: none;
position: absolute;
margin: 3px 0 0 3px;
/* for IE6, we use just a square transparent image */
background: #000;
filter :alpha(opacity=33);
}
/* ie6 ignores this selector */
html>body div.mcdropdown_shadow {
/* let's use a transparent PNG */
margin: 5px 0 0 5px;
padding: 5px 0 0 5px;
background: transparent url(../images/mcdropdown/shadow.png) right bottom no-repeat !important;
/* remove the filter for IE7 */
filter: none;
}
/*
* styles for the dropdown menu
*/
/* autocomplete styles */
ul.mcdropdown_autocomplete {
display: block;
position: absolute;
height: auto;
max-height: 210px;
overflow-x: hidden;
overflow-y: auto;
clear: both;
padding: 5px 10px;
background-color: #e1e0e0;
z-index: 10000;
margin: 0px;
list-style-type: none;
width: 392px;
font: 11px Arial, Helvetica, sans-serif;
}
ul.mcdropdown_autocomplete ul {
display: none;
list-style-type: none;
margin: 0px;
padding: 0px;
}
ul.mcdropdown_autocomplete ul li {
margin: 0px;
}
ul.mcdropdown_autocomplete li {
display: block;
font: 11px Arial, Helvetica, sans-serif;
cursor: pointer;
white-space: nowrap;
color: #666;
border-top: 1px solid #fff;
padding: 2px 26px 2px 6px;
}
ul.mcdropdown_autocomplete li.mc_endcol {
border-bottom: 1px solid #fff;
}
ul.mcdropdown_autocomplete li.mc_parent {
padding-right: 20px !important;
background: url(../images/mcdropdown/mcdd_icon_normal.gif) no-repeat 100% 50%;
}
ul.mcdropdown_autocomplete li.mc_hover {
border-top: 1px solid #999;
background-color: #999 !important;
color: #fff;
}
ul.mcdropdown_autocomplete li.mc_hover_parent {
background: #999 url(../images/mcdropdown/mcdd_icon_hover.gif) no-repeat 100% 50% !important;
color: #fff !important;
}
Things I have tried that Failed
.category {
float: left;
display: block;
}
#category_1 {
margin-left: 20px; /* or space you want..*/
}
<style>
#category, #category_1{
display: inline;
}
</style>
Please guide me. Thanks.

Add this to your css:
div.test > div {
float: left;
width: 408px;
margin-right: 20px;
}

According to the plugin page:
NOTE: The initial element that you apply the plug-in to is destroyed
and replaced with a new input element with the same id attribute.
While the mcDropdown() method does not destroy the jQuery chain, it
does effectively return a "dirty" reference (since the original
element no longer exists.) Because of this, you'll want to make sure
that the mcDropdown() method is the last call in your chain. Also, if
you plan on caching a reference to the element, you will need to
create the cached instance after you initiated the widget.
Honestly I'm not even sure if that's related.
But your code (albeit not functioning as advertised) is lining up the way you want when I look at it.
Here's a fiddle for you to see what I see.
Keep in mind of course that I'm not sure why it's not functioning properly. I put it on my desktop and replicated the whole example as-is and still nothing. But the input boxes are nice and neat :)
I did notice you left off the jquery.bgiframe.js file but I don't think that's necessary.

CSS/Javascript <ul> Menu Pop Up

I'm trying to create a simple menu pop-up effect using anchors within a div and unordered lists.
I want the html to look something like this:
<div class="info">
Link |
<a onclick="menu('id1');">Another Link</a>
<ul id="id1" class="submenu">
<li>Stuff</li>
<li>Other</li>
<li>Hooray</li>
</ul>
</div>
Here is my javascript [pretty simple, not the problem, i don't think]:
function menu(id) {
var myLayer = document.getElementById(id);
if (myLayer.style.display == "none" || myLayer.style.display == "") {
myLayer.style.display = "block";
} else {
myLayer.style.display = "none";
}
}
The css is I believe where the problem is:
.info ul .submenu
{
border: solid 1px #000;
border-top: none;
background: #FFFFFF;
position: relative;
top: 4px;
width: 150px;
padding: 6px 0;
clear: both;
z-index: 2;
display: none;
}
.info ul .submenu li
{
background: none;
display: block;
float: none;
margin: 0 6px;
border: 0;
height: auto;
line-height: normal;
border-top: solid 1px #00ff00;
}
.info .submenu li a
{
background: none;
display: block;
float: none;
padding: 6px 6px;
margin: 0;
border: 0;
height: auto;
color: #ff0000;
line-height: normal;
}
.info .submenu li a:hover
{
background: #0000ff;
}
I don't really know how to create the css on the ul so that if appears over the underlying text. I can't get it in the right spot.
I just want to click the <a> tag and a menu will pop up directly below the <a> tag.

I cleaned up your CSS:
.info ul.submenu
{
border: solid 1px #000;
border-top: none;
background-color: #fff;
position: relative;
top: 4px;
width: 150px;
padding: 6px 0px 0px 0px;
z-index: 2;
display: none;
}
.info ul.submenu li
{
display: block;
border: none;
border-top: solid 1px #00ff00;
}
.info ul.submenu li a
{
display: block;
padding: 6px 0px 6px 4px;
color: #ff0000;
}
.info ul.submenu li a:hover
{
background: #0000ff;
}
Let me know if the problem is still there. Like I said earlier, I don't see "a"'s moving on show/hide.
EDIT: Ok. I'm much more stronger with jQuery as oppose to plain javascript. If you cannot use jQuery for whatever reason, I have to leave it up to you to perform the same with plain js. Sorry!
HTML:
<ul class="root">
<li>
<div class="menuHeader">Something 1</div>
<ul class="parent">
<li>asdf 1.1</li>
<li>asdf 1.2</li>
<li>asdf 1.3</li>
</ul>
</li>
<li>
<div class="menuHeader">Something 2</div>
<ul class="parent">
<li>asdf 2.1</li>
<li>asdf 2.2</li>
<li>asdf 2.3</li>
</ul>
</li>
<li>
<div class="menuHeader">Something 3</div>
<ul class="parent">
<li>asdf 3.1</li>
<li>asdf 3.2</li>
<li>asdf 3.3</li>
</ul>
</li>
</ul>
CSS:
.info ul.root > li
{
width: auto;
float: left;
border:solid 1px blue;
padding:5px;
}
.info ul.parent
{
padding:0px;
display:none;
}
.info .menuHeader
{
cursor:pointer;
}
.info li
{
list-style: none;
}
Javascript (utilizing jQuery):
$(document).ready(function() {
$('.menuHeader').click(function(event) {
$('.parent').hide();
$(this).siblings('.parent').show();
});
});
I included only the functional kind of stuff in the CSS. Obviously, you need different look, so you may play with colors on your own. Let me know if you have more questions.

Try:
ul .submenu ==> ul.submenu
in the css.

I have made a couple of changes to ur css -
i am directly refering to submenu class
.submenu
{
list-style: none;
display: none;
border: solid 1px #000;
border-top: none;
background: #FFFFFF;
position: relative;
top: 4px;
margin:0;
padding: 0 5px;
width: 150px;
clear: both;
z-index: 2;
}
.submenu li
{
background: none;
display: block;
float: none;
margin: 0 6px;
border: 0;
height: auto;
line-height: normal;
border-top: solid 1px #00ff00;
}
.submenu li a
{
background: none;
display: block;
float: none;
padding: 6px 6px;
margin: 0;
border: 0;
height: auto;
color: #ff0000;
line-height: normal;
}
.submenu li a:hover
{
background: #0000ff;
}