I just want a sub-menu...

[apriljoanne]

I don't know why this code is giving me so many problems. It's like I change one thing and EVERYTHING stops working. Ugh. Okay, so I gave up on the slider but I want sub-navigation menus on my nav bar without losing the styling of the existing navigation menu.

Here's my style sheet:

/* Global properties ======================================================== */
html, body {width:100%; padding:0; margin:0;}
body {font:14px/25px Arial,Helvetica,sans-serif;color:#939393;min-width:1264px;background:#131313}
.ic {border:0;float:right;background:#fff;color:#f00;width:50%;line-height:10px;font-size:10px;margin:-220% 0 0 0;overflow:hidden;padding:0}
.main {width:100%; background:#272727;}
/***********************************************************************/
a {text-decoration:none; cursor:pointer;}
a:hover {text-decoration:none;}
a.button {background:#2098f5; font-size:20px; line-height:24px; color:#fff; display:inline-block; padding:5px 23px 5px 23px; }
a.button:hover {background:#131313; }
a.link {text-decoration:none; cursor:pointer; color:#2098f5; }
a.link:hover {text-decoration:underline;}
.color-1 { color:#fff;}
a.color-1:hover {text-decoration:underline;}
.font-3 {font-size:17px; line-height:33px; color:#292929;}
h2 { font-size:36px; line-height:45px; color:#fff; font-weight:normal; letter-spacing:-1px;}
h3 { font-size:24px; line-height:30px; color:#fff; font-weight:normal; }
ul {margin:0; padding:0;list-style-image:none;}
ul.list-1 li {padding:0px 0 0px 11px; line-height:25px; background:url(../images/marker.gif) 0 10px no-repeat;}
ul.list-1 li a { font-size:14px; color:#fff; line-height:25px;}
ul.list-1 li a:hover {color:#2098f5;}
/******************************************************************/
.clear {clear:both; line-height:0; font-size:0; width:100%;}
.wrapper {width:100%; overflow:hidden; position:relative}
.wrap {overflow:hidden; position:relative}
.extra-wrap {overflow:hidden;}
.fleft {float:left;}
.fright {float:right;}
.img-indent {float:left; margin:3px 30px 17px 0;}
.last {margin-right:0px !important;}
.img-radius {border-radius:4px;}

.top-1 {margin-top:37px;}
.top-2 {margin-top:29px;}
.top-3 {margin-top:21px;}
.top-4 {margin-top:31px;}
.top-5 {margin-top:12px;}

.left-1 {padding-left:30px;}

.bot-0 {padding-bottom:0 !important; margin-bottom:0 !important;}
.bot-1 {margin-bottom:39px;}
.bot-2 {margin-bottom:29px;}

.pad-1 {margin:13px 0px 12px 0px;}

.p1 {padding-bottom:25px;}
.p2 {padding-bottom:15px;}
.p3 {padding-bottom:12px;}
.p4 {padding-bottom:20px;}
.p5 {padding-bottom:23px;}
.p6 {padding-bottom:8px;}


/*********************************header*************************************/
header {width:100%; z-index:101; }
header>div {width:1264px; margin:0 auto; position:relative; }

h1 {position:absolute; left:132px; top:0px; display:inline-block; z-index:100;}

.social-icons {overflow:hidden; text-align:right; padding:17px 162px 13px 0 }
.social-icons span {display:inline-block; font-size:24px; line-height:28px; color:#fff; margin:-1px 20px 0 0; letter-spacing:-1px;}
.social-icons a {display:inline-block; width:23px; height:23px; float:right;}
.icon-1 {background:url(../images/icon-1.png) 0 0 no-repeat;}
.icon-2 {background:url(../images/icon-2.png) 0 0 no-repeat; margin-left:7px;}
.icon-3 {background:url(../images/icon-3.png) 0 0 no-repeat; margin-left:7px;}
.social-icons a:hover {background-color:#1e93f4;}

nav {position:absolute; left:132px; bottom:0; z-index:100; background:url(../images/nav-bg.png) 0 0 repeat;}
ul.menu {margin:0 29px 0 30px;}
ul.menu li {float:left; line-height:35px; margin:0px 0 0px 0px; background:transparent;}
ul.menu li a {font-size:28px; line-height:35px; color:#fff; display:block; padding: 17px 33px 18px 33px; }
ul.menu li:hover, ul.menu li.current {background:#2098f5;}
/*********************************content*************************************/
#content {width:960px; margin:0 auto; padding-bottom:78px;}

.line-1 {background:url(../images/line.png) 0 bottom repeat-x; padding-bottom:29px; margin-bottom:24px;}
.img-border {border:#fff 4px solid;}

.block-1>div {float:left; width:180px; margin-right:40px;}
.block-1>div h3 {margin:14px 0 4px 0;}
.block-1>div a.button {margin:18px 0 0px 0;}

.form-1 {}
.form-1 label {font:14px/25px Arial, Helvetica, sans-serif; color:#939393; padding-bottom:5px; }
.form-1 input {overflow-x:visible; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#535353; background:#131313; padding:8px 10px 9px 15px;outline: medium none; width: 245px; float:left; margin-bottom:12px;}
.select-1 {width:290px; margin-bottom:12px; overflow-x:visible;}
.form-1 .select-2 {width:128px; margin-right:14px; float:left;}
.form-1>a.button {margin-top:30px; padding-left:36px; padding-right:37px;}

.lists {overflow:hidden;}
.lists ul {float:left; margin-right:15px; width:120px;}
.lists-2 {margin:23px 0 23px 0; overflow:hidden;}
.lists-2 ul {float:left; margin-right:40px; width:180px;}

.block-2>a {float:left; margin-right:20px; display:inline-block;}

/****************************footer************************/
footer { width:100%; position:relative; overflow:hidden; text-align:center; padding:32px 0 45px 0; background:#131313;}
footer p, footer a {color:#939393;}
footer a:hover {text-decoration:underline;}



Here's the navigation section of the body:


<header>
<div>
<h1><a href="http://apriljoanne.myitworks.com/shop/"><img src="images/logo.jpg" alt=""></a></h1>
<div class="social-icons">
<span>Follow Us:</span>
<a href="#" class="icon-3"></a>
<a href="#" class="icon-2"></a>
<a href="#" class="icon-1"></a>
</div>
<div id="slide">
<div class="slider">
<ul class="items">
<li><img src="images/slider-1.jpg" alt="" /></li>
<li><img src="images/slider-2.jpg" alt="" /></li>
<li><img src="images/slider-3.jpg" alt="" /></li>
</ul>
</div>
<a href="#" class="prev"></a><a href="#" class="next"></a>
</div>
<nav>
<ul class="menu">
<li class="current"><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="https://apriljoanne.myitworks.com/join/" target="_blank">Join</a></li>
<li><a href="http://apriljoanne.myitworks.com/shop/" target="_blank">Products</a></li>
<ul><li><a href="index.html">Skinny Wraps</a></li>
<li><a href="test">Hair Skin & Nails</a></li>
</ul>
<li><a href="about.html#whywrap">Why Wrap?</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div></header>


A live version can be seen at aprilwraps.com/test
As you can see in the code the skinny wraps and hair skin and nails are what I want as sub-menus but as you can see on the live version it doesn't work. What is the simplest way to update this? I tried adding the display block to the ul.menu:hover but it didn't work. I didn't write the style sheet code, so maybe I didn't type it in right... I don't know. Please help!

[coothead]

Hi there apriljoanne,


try it like this...


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">

<title>untitled document</title>

<style>
body {
font:14px/25px Arial,Helvetica,sans-serif;
color:#939393;
min-width:1264px;
background:#131313
}
ul.menu {
margin:0 29px 0 30px;
padding:0;
list-style-type:none;
}
ul.menu li {
float:left;
line-height:35px;
margin:0px 0 0px 0px;
background:transparent;
}
ul.menu ul {
position:absolute;
padding:0;
margin:0;
list-style-type:none;
display:none;
}
ul.menu ul li {
float:none;
}
ul.menu li a {
font-size:28px;
line-height:35px;
color:#fff;
display:block;
padding: 17px 33px 18px 33px;
text-decoration:none;
}
ul.menu li:hover, ul.menu li.current {
background:#2098f5;
}
ul.menu li:hover ul {
display:block;
}
</style>

</head>
<body>


<ul class="menu">
<li class="current"><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="https://apriljoanne.myitworks.com/join/" target="_blank">Join</a></li>
<li><a href="http://apriljoanne.myitworks.com/shop/" target="_blank">Products</a>
<ul class="sub-menu">
<li><a href="index.html">Skinny Wraps</a></li>
<li><a href="test">Hair Skin & Nails</a></li>
</ul></li>
<li><a href="about.html#whywrap">Why Wrap?</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>


</body>
</html>



coothead

[apriljoanne]

Darn, it didn't work. I tried putting it in the style sheet first, then I also tried putting it in the <head> section like you typed. I even took out the other styling around it. I'm stumped.

[coothead]

Hi there apriljoanne,


you must replace your code that you have between the "nav tags" with mine...


<ul class="menu">
<li class="current"><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="https://apriljoanne.myitworks.com/join/" target="_blank">Join</a></li>
<li><a href="http://apriljoanne.myitworks.com/shop/" target="_blank">Products</a>
<ul class="sub-menu">
<li><a href="index.html">Skinny Wraps</a></li>
<li><a href="test">Hair Skin & Nails</a></li>
</ul></li>
<li><a href="about.html#whywrap">Why Wrap?</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>



coothead

[apriljoanne]

Thanks for your help. So now the positioning is right, but it's not a link and if I try to click it it goes away.

[coothead]

Hi there apriljoanne,


I brief look at you page suggests the need for the "z-index attribute. ;)

try this amendment...


ul.menu ul {
position:absolute;
z-index:1;
padding:0;
margin:0;
list-style-type:none;
display:none;
}


coothead

[apriljoanne]

So now I'm trying to edit the text for the sub-menu. I want the font smaller and the box smaller as well. I tried adding a ul.submenu but the styling didn't stick. Any suggestions?

[apriljoanne]

Nevermind! Figured soemthing out on my own this time haha :) Thanks for the help

[coothead]

No problem, you're very welcome. ;)


coothead