CSS Drop Menu

I would like to change the static menu on the site below to a dropc down CSS menu

http://theonlinebeatz.com/mobile/temp/

for example the playlist I will like to add a drop down menu to read the difrfent playlist catergories:

Pop
80 &90
Rock
Etc..
Etc..
Etc...
index.txt
style.css
Dj_ElMasterAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
Inside the LI tag but after the anchor tag just add another list e.g.

<li>
     <a href="">PLAYLIST</a>
     <ul>
          <li><a href="">Pop</a></li>
          ...
          ...
     </ul>
</li>

Open in new window


In your css add
.group > li {
     position:relative
}
.group ul {
     display:none;
     position:absolute;
     top:30px;
     left:0px;
}

.group li:hover ul {
     display:block
}

Open in new window


That's the basics of it.  All that would be left is to style it.

p.s.
CONTAC US -> CONTACT US
0
Dj_ElMasterAuthor Commented:
were on the CSS do I add this?
0
GaryCommented:
In your style.css file.
0
Angular Fundamentals

Learn the fundamentals of Angular 2, a JavaScript framework for developing dynamic single page applications.

Dj_ElMasterAuthor Commented:
any were in the style.css file?
0
GaryCommented:
Yes, usually at the end so it doesn't get overridden by any other styles.
0
Dj_ElMasterAuthor Commented:
still no go. Can you post the edit version of the css and the html please?

Thanks
0
GaryCommented:
It's easier if you upload the changes so I can see where it is wrong.
0
Dj_ElMasterAuthor Commented:
0
Dj_ElMasterAuthor Commented:
here u go
0
GaryCommented:
Change your css to this.
/*
	 CSS-Tricks Example
	 by Chris Coyier
	 http://css-tricks.com
*/

* { margin: 0; padding: 0; }
html { overflow-y: scroll; }
body { font: 12px/1.4 Helvetica, sans-serif; background: #333; color: #333; }
.group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.group { display: inline-block; clear: both; }
/* start commented backslash hack \*/ * html .group { height: 1%; } .group { display: block; } /* close commented backslash hack */
article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; }
a:focus { outline: 0; }

#page-wrap {
	width: 650px;
	background: #91c7ff;
	padding: 8px;
	background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
	background: -moz-linear-gradient(top,  #eee,  #ccc);
	-webkit-border-radius: 16px;
	-moz-border-radius: 16px;
	margin-top: 40px;
	margin-right: auto;
	margin-bottom: 5px;
	margin-left: auto;
}

#main-content { padding: 14px; }

h1 { font: bold 32px Helvetica, Arial, Sans-Serif; letter-spacing: -1px; padding: 14px; color: #333; text-shadow: 1px 1px 1px white; }
p { margin: 0 0 15px 0; }

.group {
	width: 627px;
}
nav ul {
	list-style: none;
	background: #154c85;

	position: relative;
	left: -9px;
	padding-top: 5px;
	padding-right: 20px;
	padding-bottom: 5px;
	padding-left: 20px;
}
nav ul li { display: inline-block; }

#cssmenu ul {
  margin: 0;
  padding: 7px 6px 0;
  background: #7d7d7d url(images/overlay.png) repeat-x 0 -110px;
  line-height: 100%;
  border-radius: 1em;
  font: normal 0.5333333333333333em Arial, Helvetica, sans-serif;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  width: auto;
}
#cssmenu li {
  margin: 0 5px;
  padding: 0 0 8px;
  float: left;
  position: relative;
  list-style: none;
}
#cssmenu a,
#cssmenu a:link {
  font-weight: bold;
  font-size: 13px;
  color: #e7e5e5;
  text-decoration: none;
  display: block;
  padding: 8px 20px;
  margin: 0;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
#cssmenu a:hover {
  background: #000;
  color: #fff;
}
#cssmenu .active a,
#cssmenu li:hover > a {
  background: #979797 url(images/overlay.png) repeat-x 0 -40px;
  background: #666666 url(images/overlay.png) repeat-x 0 -40px;
  color: #444;
  border-top: solid 1px  #f8f8f8;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  text-shadow: 0 1px 0 #ffffff;
}
#cssmenu ul ul li:hover a,
#cssmenu li:hover li a {
  background: none;
  border: none;
  color: #666;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
}
#cssmenu ul ul a:hover {
  background: #7d7d7d url(images/overlay.png) repeat-x 0 -100px !important;
  color: #fff !important;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
#cssmenu li:hover > ul {
  display: block;
}
#cssmenu ul ul {
  display: none;
  margin: 0;
  padding: 0;
  width: 185px;
  position: absolute;
  top: 40px;
  left: 0;
  background: url(images/overlay.png) repeat-x 0 0;
  border: solid 1px #b4b4b4;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
#cssmenu ul ul li {
  float: none;
  margin: 0;
  padding: 3px;
}
#cssmenu ul ul a,
#cssmenu ul ul a:link {
  font-weight: normal;
  font-size: 12px;
}
#cssmenu ul:after {
  content: '.';
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
* html #cssmenu ul {
  height: 1%;
}



nav ul li a {
	display: block;
	float: left;
	border-top: 1px solid #96d1f8;
	background: #3e779d;
	background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
	background: -moz-linear-gradient(top,  #65a9d7,  #3e779d);
	height: 36px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	-webkit-box-shadow: rgba(0,0,0,1) 0 1px 3px;
	-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
	text-shadow: rgba(0,0,0,.4) 0 1px 0;
	-webkit-text-stroke: 1px transparent;
	color: rgba(255,255,255,.85);
	text-decoration: none;
	margin-top: 0;
	margin-right: 5px;
	margin-bottom: 0;
	margin-left: 0;
	padding-top: 0;
	padding-right: 10px;
	padding-bottom: 0;
	padding-left: 10px;
	font-family: "Lucida Grande", "Verdana", sans-serif;
	font-size: 11px;
	line-height: 35px;
	font-weight: bold;
}
nav ul li a:hover {
	border-top: 1px solid #4789b4;
	background: #28597a;
	background: -webkit-gradient(linear, left top, left bottom, from(#3d789f), to(#28597a));
	background: -moz-linear-gradient(top,  #3d789f,  #28597a);
	color: rgba(255,255,255,.85); 
}	
nav ul li a:active, nav ul li a.current {
	border-top-color: #245779;
	background: #1b435e;
	position: relative;
	top: 1px; 
}
.contentWrapper {
  height: 596px;  /* Height of page-wrap after header */

  width: 100%;
  min-width: 100%;

  display: table;
}

.contentContainer {
  height: 100%;
  width: 100%;
  min-width: 100%;

  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.content {
  display: inline-block;
} 
.group > li {
     position:relative
}
.group ul {
     display:none;
     position:absolute;
     top:37px;
     left:0px;
}

.group li:hover ul {
     display:block
} 

Open in new window


Remove the center from the div in this block
<nav>
<div align="center">
<ul class="group">
0
Dj_ElMasterAuthor Commented:
Nice much better, but the drop down menu shows under the player anything we can do about that?


Check it out

http://theonlinebeatz.com/Mobile/temp/
0
GaryCommented:
In .group ul {} line 230 in style.css add
z-index:99;
0
Dj_ElMasterAuthor Commented:
wow awsome. One last one I promise if I want to change the drop menu from droping verticle to dispaly horizontaly is this posible?
0
GaryCommented:
Replace .group ul {}

with
.group ul {
    display: none;
    left: -85px;
    position: absolute;
    top: 37px;
    width: 627px;
    z-index: 99;
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Dj_ElMasterAuthor Commented:
Thanks for the help
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.