Chrome Menu Question

[ryanfc]

1) Script Title: Chrome CSS Drop Down Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...rome/index.htm

3) Describe problem: I would like to make my drop down a little less plain and add rounded corners at the bottom using an image I have already created. Can anyone help me alter the code to do so?

If you go here you will see the current state of my menu: http://www.mccoolmediainc.com/~pruprime/

If you look here you will see an example of the rounded bottom corner look I want: http://www.mccoolmediainc.com/~pruprime/?q=node/1

Thank you.

[Nile]

You've got so many included style files in your example page, I don't know which is the one that holds the curves. Can you tell me which does? Or only put that menu on the page so I can see it more easily? That will help me a lot, and hopefully I'll be able to solve the problem. But I'd think all you would need to do is modify the css a bit, and put different mark up in the making of the menu.

[ryanfc]

Sorry I am using drupal as the client wants to be able to update the content themselves. And Drupal links all those .css files. They main one is the style.css file.

But here is the code I have for the menu using the Chrome navigation script on this site.

.chromestyle{
width: 96%;
font-weight: bold;
}

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

.chromestyle ul{
border:0;
width: 100%;
background: url(images/navigation_off.jpg) right center no-repeat; /*THEME CHANGE HERE*/
padding: 4px 0;
margin: 0;
text-align: right; /*set value to "left", "center", or "right"*/
}

.chromestyle ul li{
display: inline;
}

.chromestyle ul li a{
color: #FFFFFF;
padding: 4px .91em;
margin: 0;
text-decoration: none;
}

.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
background: url(chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
}

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

.dropmenudiv{
position:absolute;
top: 0;
opacity: 0.90;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 0.916em;
line-height:18px;
z-index:100;
background-color: #e2e2e2;
visibility: hidden;
width:auto;
width:120px;
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 #b8b8b8; /*THEME CHANGE HERE*/ /*THEME CHANGE HERE*/
padding: 2px 4px;
text-decoration: none;
font-weight: bold;
color: #154B6F;
text-align:left;
}

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

.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
color: #000000;
}

Now the code on the inside page that does the rounded bottom is from drupal, but the problem I ran into with it was that on Relocation the navigation was running off the right side of the page so you could not see half of it. That is why I decided to take it out and add Chrome. But here is the code from Drupal that makes the rounded corners.

#primary-menu ul.menu li ul {
  background: transparent url(../acquia_marina/images/drop-bottom.png) no-repeat 0 bottom;
  left: -999em;
  opacity: 0.95;
  margin: 0 0 0 -10px;
  padding: 2px 0 4px 0;
  position: absolute;
  width: 144px;
  z-index: 2;
}

[ryanfc]

Running into another problem now. I am trying to replace the text of the main navigation with images and for some reason there is a gap on the bottom. I have checked the padding and margins and cannot figure out where it is coming from.

[Nile]

On which page? You've got two pages up there ^^.

[ryanfc]

I am working on the main page navigation first: http://www.mccoolmediainc.com/~pruprime/

the second page just shows how I want the bottom to be rounded on the drop down menu. What I do not like about the navigation on the inside page is that it keeps running off the side of the page on the right side. That is why I decided to scrap it and use Chrome.