Trouble with horizontal nav button sub-menu 1

[Evil8]

Hello,

I need to add two items into a sub-menu in my horizontal navigation menu.

Currently code:

<div id="navbar">
   <a href="index.html>Home</a>
   <a href="mail.html>Email</a>
   <a href="workshops.html">Workshops</a>
</div> <!-- end navbar -->

I tried:

<div id="navbar">
   <a href="index.html>Home</a>
   <a href="mail.html>Email</a>
   <a href="#">Workshops</a>
     <ul class="sub-level">
         <li><a href="games.html">Games</a></li>
         <li><a href="theory.html">Theory</a></li>
     </ul>
</div> <!-- end navbar __>

and

<div id="navbar">
   <a href="index.html>Home</a>
   <a href="mail.html>Email</a>
   <a href="#">Workshops</a>
   <li><ul class="sub-level">
         <li><a href="games.html">Games</a></li>
         <li><a href="theory.html">Theory</a></li>
       </ul>
   </li>
</div> <!-- end navbar __>

The first ul code set does nothing. The second wrapped with li moves the Workshops button down vertically to the rest of the buttons and the sub-menu shows at the top of the page horizontally.

I'll keep working on this but if anyone can help I'd appreciate it.

Thanks!

 

[ChrisHirst]

And the CSS that goes with it is?

Because the smart money (mine) is on .sub-level being set to position: absolute; without you understanding HOW positioning really works.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[Evil8]

Hi Chris,

I'm pretty sure it does have to deal with the CSS. I've got everything running horizontally now with the sub-menu showing, but that isn't falling underneath the top-level. Again on hover it shows up at the top of the page. I so have to clean up this style page...

CSS:

/* #container has an absolute width (780 pixel) */

#leftnav a, #rightnav a, navbar a{
	color:#fff;
	cursor:pointer; 
	text-decoration:none;
}

#leftnav a, #rightnav a{
	height:25px; 
	line-height:25px; 
	display:block; 
	text-indent:5px; 
	width:100px;
}

#navbar a{
	height:28px; 
	line-height:28px; 
	padding:0 8px; 
	display:inline; 
	background:#274D7E; 
	text-decoration:none;
	color:#FFF;
}

#leftnav a:hover, #rightnav a:hover, #navbar a:hover{text-decoration:underline;}

#leftnav li:hover, #rightnav li:hover, #navbar a:hover{background:#09C;position:relative;}

#leftnav ul, #rightnav ul, #navbar ul{margin:0; padding:0;}

#leftnav li, #rightnav li, #navbar li{list-style:none;}

#navbar li{float:left;}

#container{
	width:100%;
	margin:15px 0px 0px 10px;
}

#topbar{
	width:auto; 
	display:block;
	vertical-align:central;
	height:60px; 
	text-align:center; 
	background:#FFFFFF url(../PNGfiles/compass.png) center no-repeat;
}  

#main_large{
	width:75%; 
	margin-right:20px; 
	float:left;
	text-align:left;
	border-left-style:solid;
	border-left-color:#274D7E;
}

#main_large h1{margin-left:10px;}

#main{
	width:50%; 
	margin-right:20px; 
	float:left;
	text-align:center;
	border-left-style:solid;
	border-left-color:#274D7E;
	border-right-style:solid;
	border-right-color:#274D7E;
}
	

#wrapper {
width:500px;
margin:30px auto;
}

#main_left{
	padding-left:10px;
	width:45%;
	float:left;
	text-align:left;
}

#main_right{
	width:45%; 
	margin:0 10px 0 10px;
	float:left;
	text-align:left;
}
	
	

#navbar{
	width:auto; 
	display:block; 
	height:28px; 
	border-bottom:#274D7E solid; 
	border-bottom-width:9px; 
}  

#leftnav{
	width:20%; 
	margin-right:20px; 
	float:left; 
	font-size:1.0em;
	overflow:hidden;
}
	
#rightnav{
	width:25%; 
	float:right; 
	font-size:.75em;
}

/*Seconda Level*/
#leftnav .sub-level, #navbar .sub-level{background: #28597a; overflow:hidden; font-size:10px;}

/*Third Level*/
#leftnav .sub-level .sub-level{background: #09C;}

/*RESET STYLES*/
li:hover .sub-level .sub-level{display:none;}
.sub-level li:hover .sub-level{display:block;}

#img-container{
	background-color:#f5f5f5;
	padding:15px;
	-moz-border-radius:12px;
	-khtml-border-radius: 12px;
	-webkit-border-radius: 12px;
	border-radius:12px;
}

#img-container img{
	height:100%;
	width:100%;
}

#main_left img{
	margin:50px 75px;
	}

#main p{
	font-size:12px;
	text-align:left;
	margin:10px 10px 10px 10px;
}

#main table{
	width:auto;
	margin:25px 0 25px 0;
	text-align:left;
	background-color:#FFFFFF;
}

#main_large table{
	border:solid #274D7E;
	width:auto;
	margin:0 25px;
	text-align:left;
}

#main_large tr{height:25px;}
#main_large td{width:250px;}

/* ------------------------------
CUSTOM CLASSES
------------------------------ */
ul.top-level{background:#274D7E;}

ul.top-level li{
	border-bottom:#fff solid; 
	border-top:#fff solid; 
	border-width:1px;
}

ul.sub-level{display:none;}

li:hover .sub-level{
  background:#28597a;
  border:#fff solid;
  border-width:1px;
  display:block;
  position:absolute;
  left:75px;
  top:5px;
}
ul.sub-level li{
  border:none;
  float:left;
  width:150px;
}

Thanks

 

[Evil8]

It's in my CSS somewhere... I've got the top-level nav buttons displaying correctly. The sub-level for Workshops positions at the top of the page horizontally instead of vertically under the top-level button.

 

[ChrisHirst]

So position: absolute; as suspected.

For an child element to be constrained within it's parent, the parent MUST be positioned other than static, otherwise it WILL take it's origin point from the top edge & left edge intersection of the nearest positioned element, or if no positioned element exists, the top left corner of the body element will be used.

http://webmaster-talk.eu/en/articles/8-website-development-and-design/13-css-positioning

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[Evil8]

Thanks for your time Chris. I see what's going on, but I'm not sure yet how to fix the issue without messing up something else. I may just scrap the the sub-menu idea. My brain is fried right now...

Thanks again.

 

[ChrisHirst]

Without an explicit position set on an elemenet they are all position: static so you just need to set position: relative; on the parent <li>


Or for the entire list element in the rule set for ul.top-level li{

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum