PDA

View Full Version : CSS Menu / dropdown Sub-Menu Alignment Issue



diesel12
Aug 14th, 2007, 08:46 PM
I don't have much experience with positioning and the effects on css. I have a css / javascript menu with dropdown menus that is placed in a div, this div is inside a Header Div. The header div is position: relative and contains a background image that makes of the header. I believe this relative positioning is what is causing the sub menus to appear too far to the right.... If i take the menu div out of the header div the problem is resolved, but then I have no header.... I've also played with the sub-menu div positioning with no luck...

I've tried playing with the position value of the Menu Div as well as the Header Div that contains the menu with no luck. I even created a Menu Container Div to be a buffer between the menu div and the header div and played with position values of the three with no luck... any feedback appreciated!

the page is here: http://www.ipagio.com/test/testtest1.html

The CSS:

.chromestyle{
width: 683px;
font-weight: bold;
height: 20px;
position: relative;
}

.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.chromestyle ul{
border: 1px solid #BBB;
width: 100%;
background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
padding: 4px 0;
margin: 0;
text-align: center; /*set value to "left", "center", or "right"*/
}

.chromestyle ul li{
display: inline;
}

.chromestyle ul li a{
color: #494949;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-right: 1px solid #DADADA;
}

.chromestyle ul li a:hover{
background: url(chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
}

.chromestyle ul li a[rel]:after{ /*HTML to indicate drop down link*/
content: " v";
/*content: " " url(downimage.gif); /*uncomment this line to use an image instead*/
}


/* ######### Style for Drop Down Menu ######### */

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4); /*Add Shadow in IE. Remove if desired*/
}


.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}

* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}

.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #F0F0F0;
}


The HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Chrome CSS Drop Down Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="chrometheme/chromestyle.css" />
<link href="/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="chromejs/chrome.js">

/***********************************************
* Chrome CSS Drop Down Menu- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

</head>

<body>
<div id="topPan">
<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://www.ipagio.com/">Home</a></li>
<li><a href="http://www.ipagio.com/mortgage-website-features.html" rel="dropmenu1">Features</a></li>
<li><a href="http://www.ipagio.com/mortgage-website-demo.html" >Demos</a></li>
<li><a href="http://www.ipagio.com/mortgage-website-search-engine-optimization.html" rel="dropmenu3">SEO</a></li>
<li><a href="http://www.ipagio.com/mortgage-website-lead-generation.html" rel="dropmenu4">Lead Generation </a></li>
<li><a href="http://www.ipagio.com/mortgage-website-pricing.html" rel="dropmenu5">Pricing</a></li>
<li><a href="http://www.ipagio.com/mortgage-website-purchase.html" rel="dropmenu6">Purchase</a></li>
<li><a href="http://www.ipagio.com/contact-us.html" rel="dropmenu7" >Contact</a></li>
</ul>
</div>

<!--1st drop down menu -->
<div id="dropmenu1" class="dropmenudiv">
<a href="http://www.ipagio.com/mortgage-website-features.html">Website Features</a>
<a href="http://www.ipagio.com/mortgage-website-features.html">Technical Features</a>
<a href="http://www.ipagio.com/mortgage-website-content.html">Website Content</a>
<a href="http://www.ipagio.com/mortgage-website-hosting.html">Hosting</a>
<a href="http://www.ipagio.com/mortgage-website-live-chat.html">Live Chat</a>
<a href="http://www.ipagio.com/mortgage-website-email-newsletter-database.html">Newsletter Database</a></div>


<!--2nd drop down menu -->
<div id="dropmenu3" class="dropmenudiv" style="width: 150px;">
<a href="http://www.ipagio.com/mortgage-website-search-engine-optimization.html">On-Page SEO</a>
<a href="http://www.ipagio.com/mortgage-website-search-engine-optimization-services.html">SEO Services</a>
<a href="http://www.ipagio.com/mortgage-website-search-engine-optimization-basics.html">Mortgage SEO Basics</a></div>

<!--3rd drop down menu -->
<div id="dropmenu4" class="dropmenudiv" style="width: 150px;">
<a href="http://www.ipagio.com/mortgage-website-lead-generation.html">Lead Generation</a>
<a href="http://www.ipagio.com/mortgage-website-lead-management.html">Lead Management</a></div>

<!--4th drop down menu -->
<div id="dropmenu5" class="dropmenudiv" style="width: 150px;">
<a href="http://www.ipagio.com/mortgage-website-pricing.html">Pricing</a>
<a href="http://www.ipagio.com/mortgage-website-competitive-analysis.html">Competitive Analysis</a></div>

<!--5th drop down menu -->
<div id="dropmenu6" class="dropmenudiv" style="width: 150px;">
<a href="http://www.ipagio.com/mortgage-website-purchase.html">Purchase</a>
<a href="http://www.ipagio.com/mortgage-website-build-process.html">Build Process</a></div>

<!--5th drop down menu -->
<div id="dropmenu7" class="dropmenudiv" style="width: 150px;">
<a href="http://www.ipagio.com/contact-us.html">Contact Us</a>
<a href="http://www.ipagio.com/mortgage-website-legal.html">Legal</a></div></div>
<script type="text/javascript">

cssdropdown.startchrome("chromemenu")

</script>

</body>

</html>



Any feedback appreciated!!!

diesel12
Aug 14th, 2007, 09:20 PM
Well it looks like a simple solution will be to just take any positioning in the header out ... then just rebuild header elements as needed..... problem solved....