CSS dropdowns (mine need a little tweaking)

[jessmolchan]

Hi Everyone!So I'm trying to create a supplemental drop down menu for my website.I have created a simple version of what I want, but my problem is I need to be able to isolate each heading and position it separately, because each of the headings is in a different position (not a straight line like a traditional header).here is my css: /*dropdownmenu*/@charset "utf-8";/* CSS Document */body{padding: 25px;}/* Navigation Structure */.nav-container-outer{background: #000000;padding: 0px;height: 80px; background: url(../image-files/dropdownarea.png);}.float-left{float: left;}.float-right{float: right;}.nav-container .divider{display:block;font-size:1px;border-width:0px;border-style:solid;}.nav-container .divider-vert{float:left;width:0px;display: none;}.nav-container .item-secondary-title{display:block;cursor:default;white-space:nowrap;}.clear{font-size:1px;height:0px;width:0px;clear:left;line-height:0px;display:block;float:none;}.nav-container{position:relative;zoom:1;margin: 0 auto;}.nav-container a, .nav-container li{float:left; display:block;white-space:nowrap;}.nav-container div a, .nav-container ul a, .nav-container ul li{float:none;}.nav-container ul{left:-10000px;position:absolute;}.nav-container, .nav-container ul{list-style:none;padding:0px;margin:0px; }.nav-container li a{float:none;}.nav-container li{position:relative;}.nav-container ul{z-index:10;}.nav-container ul ul{z-index:20;}.nav-container ul ul ul{z-index:30;}.nav-container ul ul ul ul{z-index:40;}.nav-container ul ul ul ul ul{z-index:50;}li:hover>ul{left:auto;}#nav-container ul {top:100%;}#nav-container ul li:hover>ul{top:0px;left:100%;}/* Primary Items */ #nav-container a{ padding:7px 17px 7px 18px;margin: 10px 50px 10px 50px; color: #000000; font-family: Trebuchet MS, Arial, sans-serif, Helvetica;font-size:14px;text-decoration:none;font-weight: bold;background-repeat: no-repeat;background-position: top;}#nav-container a:hover{color: #000000; background-repeat: no-repeat;background-position: center;}/* Secondary Items Container */ #nav-container div, #nav-container ul{ padding:10px 4px 10px 4px;margin:0px 60px 0px 60px; background-repeat: repeat-x;background-color: #ffffff; }/* Secondary Items */ #nav-container div a, #nav-container ul a{ padding:3px 10px 3px 6px;background-color: transparent;background-repeat: no-repeat;background-position: 0px 22px;font-size:11px;border-width:0px;border-style:none;margin: 0px 0px 0px 0px;width: 135px; }/* Secondary Items Hover State */ #nav-container div a:hover, #nav-container ul a:hover{ background-color: #eeeeee; background-repeat: no-repeat;text-decoration: underline; color:#000000; }/* Secondary Item Titles */ #nav-container .item-secondary-title{ cursor:default;padding:4px 0px 3px 7px;color: #000000; font-family: Arial, Trebuchet MS, Arial, sans-serif, Helvetica;font-size:11px;background-repeat: no-repeat;font-weight:bold;}/* Horizontal Dividers */ #nav-container .divider-horiz{ border-top-width:1px;margin:5px 5px;border-color: #000000; }/* Vertical Dividers */ #nav-container .divider-vert{ border-left-width:1px;height:15px;margin:4px 2px 0px 2px;border-color:#AAAAAA;}any help would be greatly appreciated...i seem to be at a road block...let me know if you need the html or any other info...Thanks!~Jessica

[MrFish]

You need to give us more information. I don't see your problem and I can't tell what you are trying to do. And I'm certainly not going to take your css and try to create an html document to load the css to . Could you give us a link? Or if not, describe the problem exactly and give us the only information that is relevant. Chances are you are going to need a little javascript.

[jessmolchan]

I'm sorry, yeah, I uploaded everything. You can see here what the problem is:http://www.disneymadesimple.com/demo.htmlI need the dropdowns to line up under each park icon.Thank you so much for the quick reply and help!! ~Jessica

[dsonesuk]

give id ref to li which precede headings

   <ul id="nav-container" class="nav-container">	  <li id="hollywood"><a class="item-primary" href="#">Hollywood Studios</a>				<ul style="width:150px;">		 <li><a href="#">Introduction to Hollywood<br />Studios</a></li>		 <li><a href="#">Park Sections</a></li>		 <li><a href="#">Attractions</a></li>		 <li><a href="#">Entertainment</a></li>		  <li><span class="divider divider-horiz" ></span></li>		  <li><span class="item-secondary-title" >Dining</span></li>		 <li><a href="#">Character Dining</a></li>		 <li><a href="#">Unique Dining</a></li>		 <li><a href="#;">Quick Service Dining</a></li>		 <li><a href="#;">Signature Dining</a></li>		 <li><a href="#;">Casual Dining</a></li>		 <li><a href="#;">Fast Casual</a></li>		 <li><span class="divider divider-horiz" ></span></li>		 <li><a href="#;">Shopping</a></li>		 <li><a href="#;">Tours</a></li>	 <li><a href="#;">Special Events</a></li>	 <li><a href="#;">Guest Services</a></li>	 <li><a href="#;">Fast Pass</a></li>	 <li><a href="#;">Characters</a></li>	 <li><a href="#;">Transportation</a></li>	 <li><a href="#;">General Tips and Our<br />Favorite Things To Do!</a></li>		 </ul></li>   	  <li><span class="divider divider-vert" ></span></li>	  <li id="magic"><a class="item-primary" href="#">Magic Kingdom</a>   		 <ul style="width:150px;">		 <li><a href="#">Introduction to Magic<br />Kingdom</a></li>		 <li><a href="#">Park Sections</a></li>		 <li><a href="#">Attractions</a></li>		 <li><a href="#">Entertainment</a></li>	 <li><span class="divider divider-horiz" ></span></li>	 <li><span class="item-secondary-title" >Dining</span></li>		 <li><a href="#">Character Dining</a></li>		 <li><a href="#">Unique Dining</a></li>		 <li><a href="#;">Quick Service Dining</a></li>		 <li><a href="#;">Signature Dining</a></li>		 <li><a href="#;">Casual Dining</a></li>		 <li><a href="#;">Fast Casual</a></li>		 <li><span class="divider divider-horiz" ></span></li>		 <li><a href="#;">Shopping</a></li>		 <li><a href="#;">Tours</a></li>	 <li><a href="#;">Special Events</a></li>	 <li><a href="#;">Guest Services</a></li>	 <li><a href="#;">Fast Pass</a></li>	 <li><a href="#;">Characters</a></li>	 <li><a href="#;">Transportation</a></li>	 <li><a href="#;">General Tips and Our<br />Favorite Things To Do!</a></li>		 </ul></li>   	  <li><span class="divider divider-vert" ></span></li>	  <li id="epcot"><a class="item-primary" href="#">Epcot</a>   		 <ul style="width:150px;">		 <li><a href="#">Introduction to Epcot</a></li>		 <li><a href="#">Park Sections</a></li>		 <li><a href="#">Attractions</a></li>		 <li><a href="#">Entertainment</a></li>	 <li><span class="divider divider-horiz" ></span></li>	 <li><span class="item-secondary-title" >Dining</span></li>		 <li><a href="#">Character Dining</a></li>		 <li><a href="#">Unique Dining</a></li>		 <li><a href="#;">Quick Service Dining</a></li>		 <li><a href="#;">Signature Dining</a></li>		 <li><a href="#;">Casual Dining</a></li>		 <li><a href="#;">Fast Casual</a></li>		 <li><span class="divider divider-horiz" ></span></li>		 <li><a href="#;">Shopping</a></li>		 <li><a href="#;">Tours</a></li>	 <li><a href="#;">Special Events</a></li>	 <li><a href="#;">Guest Services</a></li>	 <li><a href="#;">Fast Pass</a></li>	 <li><a href="#;">Characters</a></li>	 <li><a href="#;">Transportation</a></li>	 <li><a href="#;">General Tips and Our<br />Favorite Things To Do!</a></li>		 </ul></li>   	  <li><span class="divider divider-vert" ></span></li>	  <li id="animal"><a class="item-primary" href="#;">Animal Kingdom</a>   		 <ul style="width:150px;">		 <li><a href="#">Introduction to Animal<br />Kingdom</a></li>		 <li><a href="#">Park Sections</a></li>		 <li><a href="#">Attractions</a></li>		 <li><a href="#">Entertainment</a></li>	 <li><span class="divider divider-horiz" ></span></li>	 <li><span class="item-secondary-title" >Dining</span></li>		 <li><a href="#">Character Dining</a></li>		 <li><a href="#">Unique Dining</a></li>		 <li><a href="#;">Quick Service Dining</a></li>		 <li><a href="#;">Signature Dining</a></li>		 <li><a href="#;">Casual Dining</a></li>		 <li><a href="#;">Fast Casual</a></li>		 <li><span class="divider divider-horiz" ></span></li>		 <li><a href="#;">Shopping</a></li>		 <li><a href="#;">Tours</a></li>	 <li><a href="#;">Special Events</a></li>	 <li><a href="#;">Guest Services</a></li>	 <li><a href="#;">Fast Pass</a></li>	 <li><a href="#;">Characters</a></li>	 <li><a href="#;">Transportation</a></li>	 <li><a href="#;">General Tips and Our<br />Favorite Things To Do!</a></li>		 </ul></li></ul>

then use below css#nav-container a{ padding:7px 17px 7px 18px;margin: 10px 50px 10px 50px; /*heading positionings*/color: #000000; /*natural heading color*/font-family: Trebuchet MS, Arial, sans-serif, Helvetica;font-size:14px;text-decoration:none;font-weight: bold;background-repeat: no-repeat;background-position: top;visibility:hidden;}#nav-container li#hollywood{left:-50px;}#nav-container li#magic{left:-58px;}#nav-container li#epcot{left:-70px;}#nav-container li#animal{left:56px;}#nav-container li ul ul:hover, #nav-container li li, #nav-container li ul:hover{left:0px;}#nav-container ul a {visibility:visible;}I don't know exactly what you wanted with the headings, but i used visiblity to hide them out of veiw.

[jessmolchan]

That was perfect! Exactly what I wanted and I didn't even say that I wanted to hide that text!That was twice you helped me now, thank you so much, you have no idea how much time and aggravation you have saved me!Thanks again, ~Jessica