Drop Down Menu Help

[Kaldia]

Hi Everyone,

I am having problems trying to edit a drop down menu from a template.

I'm using this:

http://www.justfreetemplates.com/preview/web-templates/2125.html

I need a couple of the links to just be regular links, while the others have a single column drop down menu. I've figured out how to make the single columns, but when I remove all the items from the links I dont want to drop down, I am still left with a little gray blank box that pops up when you hover your mouse over the link.

In a nutshell, how do you change one of these links from a drop down menu to just a normal link?

Thank you in advance!
-K

 

[krymson]

You can change the class or even remove the class.

 

[Kaldia]

Thanks Krymson,

when I remove the class the menu gets all out of whack and pushed over to the left.

currently the HTML looks like:
(Where the first ">" is obviously actually "<")


>div id="main1">
>ul id="menu2">
>li class="menu_right"><a href="#">Home</a>
>div class="dropdown_1column align_right">
>div class="col_1">
>/div>
>/div>

The CSS Linked to the menu looks like:
}
#main1{
text-align:center;
width:920px;
position:relative;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
height: auto;
}

}

#menu2 li .black_box {
background-color:#333333;
color: #eeeeee;
text-shadow: 1px 1px 1px #000;
padding:4px 6px 4px 6px;

/* Rounded Corners */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

/* Shadow */
-webkit-box-shadow:inset 0 0 3px #000000;
-moz-box-shadow:inset 0 0 3px #000000;
box-shadow:inset 0 0 3px #000000;
}

#menu2 li ul {
list-style:none;
padding:0;
margin:0 0 12px 0;
}
#menu2 li ul li {
font-size:12px;
line-height:24px;
position:relative;
text-shadow: 1px 1px 1px #ffffff;
padding:0;
margin:0;
float:none;
text-align:left;
width:130px;
}
#menu2 li ul li:hover {
background:none;
border:none;
padding:0;
margin:0;
}

#menu2 li .greybox li {
background:#F4F4F4;
border:1px solid #bbbbbb;
margin:0px 0px 4px 0px;
padding:4px 6px 4px 6px;
width:116px;

/* Rounded Corners */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
#menu2 li .greybox li:hover {
background:#ffffff;
border:1px solid #aaaaaa;
padding:4px 6px 4px 6px;
margin:0px 0px 4px 0px;
}

I don't know if any of this helps. While I understand most of CSS coding I don't really understand why when I remove the "dropdown" class element it seems to mess up the alignment.

Any more help would be so very much appreciated!

Thank you
Sanghee

 

[krymson]

You can create another class element so that it works with the menu but if it was a good designed menu, when you don'y order that menu itme with other <li"> it shouldnt drop down, so the html should look like this...

<ul>
<li>Menu Item with no drop down</li>
<li>Menu Item with Drop Down <ul><li>Sub Item</li></ul></li>
</ul>

somthing like that, havent done dropdowns in a while so im a bit rusty

 

[HireLogo]

I'm sure I can help you out, but I'm not entirely sure what you're trying to do. Can you explain it using names of links and or nav links.