Learn VBA & Macros in 1 Week!

CSS - Select Box / Drop Down Menu (i Give Up)

Full Excel VBA Course - Beginner to Expert

Select Box / Drop Down Menu (i Give Up)	View Content

Hi, i cannot seem to get my select box / drop down box working in all browsers... i have spent nearly a week trying to sort this and i cannot get it to work

The drop down menu does not show correctly in google chrome (mac) or safari (mac) or IE7 (PC) (there seems to be a padding issue) HOWEVER it shows fine in firefox (pc) and firefox (mac)

I have attached screenshots below of the problem and you can see my code on the following url: http://goo.gl/7XAIz

I would be very grateful if someone could help me with this, as i just can't get it to work, thanks in advance for your help...

Full Excel VBA Course - Beginner to Expert

Css Select Drop Down Menu

Similar Tutorials

View Content

Hi,

On all select drop down menus there is some padding around the text, if you go to www.a1-megastore.com you will see what I mean on the search at the top. Do you know how I can get rid of this?

Ian

Drop Down Menu; How To Align The Right Edge Of Drop Down And Parent Menu?

Similar Tutorials

View Content

Hello everyone,

I have a drop-down menu that is currently working well.

The only change I need to make is to have the right edge of the drop-down menu to align with the right edge of the parent menu. When you hover over the menu, it currently "drops" down and to the right, with the left edges aligned.

I want the menu to "drop" down and to the left, so the right edges are aligned.

I have tried fiddling with floats and absolute/relative positioning. I'm not sure what needs to be changed.

Any help you can provide is greatly appreciated! I'm learning via "cut and paste", so please go easy on any terminology you may use.

Thank you!

Here is the page: http://www.littlebuddymedia.com/site05/012.html

The menu currently drops like this (aligned along the left edge): http://www.justskins.com/wp-content/uploads/2008/12/drop-down-menu.gif

I want the menu to do this (align along the right edge; see how "Artists" is aligned under "Music" along the right edge): http://artatm.com/wp-content/uploads/2009/11/mtvmenu.JPG

Here is my code:

Code:


.chromestyle{
     width: 100%;
     font-weight: bold;
     float: left;
     height: 29px;
}

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

.chromestyle ul{
border: 0px solid #BBB;
width: 100%;
background: url(chromebg.gif) center center repeat-x; /*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: #000000;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-left: 1px solid #DADADA;
}

.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;
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;
}


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

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

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

Show Selected Menu With Hierarchy On Each Page. Drop Down Menu Help Needed......

Similar Tutorials

View Content

Following sample is from http://www.code-couch.com/jeff/snippets/general/tektips-navigation-example.html
is what I am trying to reference to create a template. But how do I how keep the state of Menu on each requested page any help is appreciated. The following menu is saved in a separate jsp file i.e. navs.jsp. I include this navigation jsp file in all of my files. Initially the drop down looks like:

Code:


. Ask.Jeeves 
. [+] Google.com 
. [+] Yahoo.com

Now clicking [+] in front of Google.com will look like.

Code:


. Ask.Jeeves 
. [-] Google.com 
     . Google.co.ie
     . Google.co.ie
     . [+] Google.co.nz 
. [+] Yahoo.com

Lets's say now if I click on Google.co.ie it takes me to sample.jsp and on this requested page (sample.jsp) how can I show the following menu hierarchy with Google.co.ie bold/underlined/colorchanged showing what menu content I clicked and am viewing the appropriate content i.e.

Code:


. Ask.Jeeves 
. [-] Google.com 
     . Google.co.ie
     . Google.co.ie
     . [+] Google.co.nz 
. [+] Yahoo.com

Same way clicking Google.com or Yahoo.com or Ask.Jeeves shows you the following hierarchy on the requested page with higlight/bold/colored the link we just selected. i.e.

Code:


. Ask.Jeeves 
. [+] Google.com 
. [+] Yahoo.com

Any time clicking on the menu takes me to some page but on that page I want to show th hierarchy of the menu all the way to which is recently clicked with different color setting.

Here is the source for the above:

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="content-language" content="en"/>
<title>Test Harness</title>

<style type="text/css">

ul li ul {display:none;list-style-type: none;}

#myNav li a:hover {
color: blue;
}

#myNav li a:active {
color: #FF0000;
background: #FFFFFF;
}

#myNav { list-style-image: url(page.GIF); }
</style>

<script type="text/javascript">
<!--
function initNav() {
	var navObj = document.getElementById('myNav');
	var ulCollection = navObj.getElementsByTagName('li');
	for (var loop = 0; loop < ulCollection.length; loop++) {
		if(ulCollection[loop].getElementsByTagName('ul').length > 0) {
			/* we have an LI that contains a UL */
			if (ulCollection[loop].getElementsByTagName('span').length > 0) {
				/* there is at least one SPAN tag present */
				ulCollection[loop].getElementsByTagName('span')[0].innerHTML = "[<a href=\"javascript://\" onclick=\"this.innerHTML=this.innerHTML=='+'?'-':'+';temp=this.parentNode.parentNode.getElementsByTagName('ul')[0].style;temp.display=temp.display=='block'?'none':'block';\">+</a>] ";
			}
		}
	}
}
window.onload = initNav;
//-->
</script>

</head>
<body>
<ul id="myNav">
	<li><a href="http://www.askjeeves.com">Ask.Jeeves</a></li>
	<li><span></span><a href="http://www.google.com">Google.com</a>
		<ul>
			<li><a href="http://www.google.co.uk">Google.co.uk</a></li>
			<li><a href="http://www.google.co.ie">Google.co.ie</a></li>
			<li><span></span><a href="http://www.google.co.nz">Google.co.nz</a>
			<ul>
			   <li>*3*</li>
			   <li>*4*</li>
			</ul>
</li>
		</ul>
	</li>

	<li><span></span><a href="http://www.yahoo.com">Yahoo.com</a>
		<ul>
			<li><a href="http://www.yahoo.co.uk">Yahoo.co.uk</a></li>
			<li><a href="http://www.yahoo.co.nz">Yahoo.co.nz</a></li>
		</ul>
	</li>
</ul>
</body>
</html>

Any help is really appreciated thanks.

Vertical Drop-down Menu - Sub-menu's Don't Appear Long Enough (time Not Length)

Similar Tutorials

View Content

EDIT:: Simplier way to write the question ^.^ :: When I scroll off the menu/link onto the first link in the submenu it stays, but when I mvoe down to the next item in the submenu it disappears.
(My drop down is vertically aligned on the left.)
(bits of the code that relate to the menu)

PHP Code:
.btn1 { position: absolute; left: 165px; top: 200px; }
.btn2 { position: absolute; left: 165px; top: 240px; }
.btn3 { position: absolute; left: 165px; top: 280px; }
.btn4 { position: absolute; left: 165px; top: 320px; }
.btn5 { position: absolute; left: 165px; top: 360px; }
.btn6 { position: absolute; left: 165px; top: 400px; }
.btn7 { position: absolute; left: 165px; top: 440px; }
.btn8 { position: absolute; left: 165px; top: 480px; }
.link1 { position: absolute; left: auto; top: 240px; }
.link2 { position: absolute; left: auto; top: 280px; }
.link3 { position: absolute; left: auto; top: 320px; }
.link4 { position: absolute; left: auto; top: 360px; }
.link5 { position: absolute; left: auto; top: 400px; }
.link6 { position: absolute; left: auto; top: 440px; }
.link7 { position: absolute; left: auto; top: 480px; }
.link8 { position: absolute; left: auto; top: 520px; }
.link9 { position: absolute; left: auto; top: 560px; }

#nav, #nav ul { padding: 0; margin: 0; list-style: none; }
#nav a { display: block; width: 100px; }
#nav li { width: 100px; }
#nav li ul { position: absolute; width: 100px; left: -9999px; display: none; top: 0; z-index: 3; }
#nav li:hover ul { display: block; left: 266px; z-index: 3; }
#nav li:over ul { display: block; left: 266px; z-index: 3; }

PHP Code:
<ul id="nav">
  <li><a href="HOBmain.htm"><img class="btn1" src="../mainbtn.gif" width="100" height="38" alt="MainBtn"></a></li>
  <li><a href="HOBmain.htm"><img class="btn2" src="../blogbtn.gif" width="100" height="38" alt="BlogBtn"></a>
    <ul>
      <li class="link1"><a href=""><img src="../mbtn.gif" alt="bMainBtn"></a></li>
      <li class="link2"><a href="#"><img src="../anmbtn.gif" alt="bAnimeBtn"></a></li>
      <li class="link3"><a href="#"><img src="../mgabtn.gif" alt="bMangaBtn"></a></li>
      <li class="link4"><a href="#"><img src="../gmebtn.gif" alt="bGameBtn"></a></li>
      <li class="link5"><a href="#"><img src="../bookbtn.gif" alt="bBookBtn"></a></li>
    </ul>
  </li>
    <li><a href="HOBmuse.htm"><img class="btn3" src="../musebtn.gif" width="100" height="38" alt="MuseBtn"></a>
    <ul>
      <li class="link2"><a href="HOBmuse.htm"><img src="../mbtn.gif" alt="mMainBtn"></a></li>
      <li class="link3"><a href="HOBmuse.htm"><img src="../pmbtn.gif" alt="mPoemBtn"></a></li>
      <li class="link4"><a href="HOBmuse.htm"><img src="../stybtn.gif" alt="mStoryBtn"></a></li>
      <li class="link5"><a href="HOBmuse.htm"><img src="../drmbtn.gif" alt="mDreamBtn"></a></li>
    </ul>
  </li>
   <li><a href="HOBodd.htm"><img class="btn4" src="../oddbtn.gif" width="100" height="38" alt="ComicBtn"></a>
    <ul>
      <li class="link3"><a href="HOBodd.htm"><img src="../mbtn.gif" alt="cMainBtn"></a></li>
    </ul>
  </li>
   <li><a href="HOBart.htm"><img class="btn5" src="../artbtn.gif" width="100" height="38" alt="ArtBtn"></a>
    <ul>
      <li class="link4"><a href="HOBart.htm"><img src="../mbtn.gif" alt="aMainBtn"></a></li>
      <li class="link5"><a href="HOBart.htm"><img src="../recbtn.gif" alt="aRecentBtn"></a></li>
      <li class="link6"><a href="HOBart.htm"><img src="../gaibtn.gif" alt="aGaiaBtn"></a></li>
    </ul>
  </li>
   <li><a href="HOBpic.htm"><img class="btn6" src="../picbtn.gif" width="100" height="38" alt="PicsBtn"></a>
    <ul>
      <li class="link5"><a href="HOBpic.htm"><img src="../mbtn.gif" alt="pMainBtn"></a></li>
      <li class="link6"><a href="HOBpic.htm"><img src="../recbtn.gif" alt="pRecentBtn"></a></li>
    </ul>
  </li>
   <li><a href="HOBfaq.htm"><img class="btn7" src="../faqbtn.gif" width="100" height="38" alt="FaqBtn"></a></li>
   <li><a href="HOBcon.htm"><img class="btn8" src="../contactbtn.gif" width="100" height="38" alt="ContactBtn"></a> </li>
</ul>

<script type="text/javascript" src="drop_down.js"></script>
the "nav" is referring to a bit of js, and this is in my header. Also not sure if it's correct, but I can worry about that later.
link: The Page

Only One Level Of Drop Down Menu Appearing In Horizontal Menu In Ie 6 And 7

Similar Tutorials

View Content

Hi all,

I've got a horizontal menu that is working just fine in every browser but IE 6 and 7. In IE it's almost there, except that the submenus will only appear one level deep. The menu is created with nested lists. The :hover functionality is simulated via JavaScript for IE 6. The IE developer toolbar shows the 3rd level menu is correctly being changed to display: block when its parent is hovered, and the border the dev toolbar draws even puts it in the correct place, it just doesn't actually appear.

You can find the page he
http://www.perceptes.com/topdog/

The CSS and JS (uses jQuery) can be found he
http://www.perceptes.com/topdog/css/screen.css
http://www.perceptes.com/topdog/css/ie.css (loaded with a conditional comment)
http://www.perceptes.com/topdog/js/tdps.js
http://www.perceptes.com/topdog/js/ie.js (loaded with a conditonal comment)

For a specific example of what I'm talking about, try hovering over the second item, Filters & Parts. This will give you another level with four choices. Each of those also has child elements, but when hovered over, the next level doesn't appear. Try it in something other than IE 6 or 7 to see how it's supposed to look.

Thanks very much in advance!

Menu Tabs Drop Below Menu Bar

Similar Tutorials

View Content

I working on a CSS to display a round-shouldered-tab menu. My result is acceptable:
http://rickduley.webs.com/roundShoulderTabMenu.jpg
except for the fact that the tabs are set below the menuBar on which the are supposed to display.

I have run out of ideas. Would someone please set me on the right path?
Thanks.

P.S.: the code is at
http://rickduley.webs.com/roundShoulderTabMenu.zip.kgb -
you have to delete the 'dot key gee bee' suffix.

Border Style Similar To That Of A Select Drop Down

Similar Tutorials

View Content

Hi,

I have created a component which is wrapped inside a div element. Is it possible to set the border of the div element similar to the borders shown by default for a select drop down?

thanks and regards,
Sim085

Css Sprites In Select Menu

Similar Tutorials

View Content

In my website (geotool.flagfox.net) I have a drop-down menu which allows people to change to locale of the website. If you look at this menu you can see that I have placed flags next to each country, but as I now have 35 different languages I don't really want to load 35 separate images (especially as most visitors never even look at this menu).

Is there a way of using CSS sprites for this? I've made a small test website to make it easier to look at this: test.rleeden.no-ip.com. You can see that I can successfully use a CSS sprite image in the main body, but I've not been able to achieve the same affect in the select menu.

Or alternatively somehow make it that the images are only downloaded if the menu is shown??

Any advice or help most welcome.

Richard

Drop Down Menu Behind Div

Similar Tutorials

View Content

Howdy.

Take a look here.

The menu is dropping behind the div for the body section in IE.

I've tried mucking with the z-index, but it doesn't seem to make a difference.

Here's the menu code;
Code:

#menu {
width:780px;
height:28px;
background: #CCCCCC url(images/menu_img.gif) no-repeat center top;
}

ul#nav {
  padding: 0;
  margin:0 25px 0 25px;
  list-style: none;
  }
  
li.navB {
  float: left;
  position: relative;
  width: 230px;
  margin:7px 0 7px 0;
  font:bold 12px arial, verdana, sans-serif;
  text-decoration:none;
  color:#2F60C0;
  }
  
li ul {
  display: none;
  position: absolute; 
  top: 15px;
  left: 0;
  padding:5px;
  width:100px;
  list-style:none;
  margin:0;
  z-index:3;
  }
  
li ul li{
  padding:2px;
  width:100px;
  list-style:none;
  margin:auto;
  }
	
li:hover ul, li.over ul{ 
  display: block;
  background:white;
  border:1px solid #333333;
  width:100px;
  padding:5px;
  position:absolute;
}

and the body code

Code:

.product_container {
width:720px;
margin:auto;
margin-top:4px;
margin-bottom:4px;
border:1px solid black;
min-height:270px;
position:relative;
clear:both;
z-index:1;
}

.product_info {
float:left;
width:500px;
position:relative;
z-index:1;
}

.product_image {
float:right;
margin:auto;
margin-top:20px;
margin-bottom:20px;
position:relative;
font:10px arial;
color:#666666;
text-align:center;
z-index:1;
}

.clear {
clear:both;
margin-top:-1px;
height:1px;
overflow:hidden;
}

Any thoughts?

Thanks

Css Drop Down Menu

Similar Tutorials

View Content

I had made a site with a pure CSS drop down menu (using hover). The problem is that it works fine in the various browsers... IE6, FF1.x, NS, Opera... But it doesn't work in IE7. Anyone know a work around for using the hover as a drop down with IE7? I can paste the code later (when I get back to where my site is) if needed.

Thanks for any input.

Css Drop Menu

Similar Tutorials

View Content

Hi, I am working on my site, and was wondering if anyone knew how to do a menu like this http://www.vh1.com/music/

The one on the left in blue.. how it turns to white. I am pretty sure this is done with css. Can anyone tell me how this is done? Thanks

Drop Down Menu Bug In Ie7

Similar Tutorials

View Content

I have a horizontal menu that drops vertically when you hover over a menu item.

In IE7, the menu hides behind images making it invisible if it drops in a spot where an image is at.

I haven't been able to find the answer to my problem, so I'm hoping someone here is familiar with this issue.

I should mention it works in Firefox, but I haven't tested any other browsers.

Css Only Drop Down Menu.

Similar Tutorials

View Content

I have been tasked with building a CSS drop down menu system. I have worked out I can use a hover event to invoke the drop-downs (and hide them again). However. How would I invoke one and keep it visible if they went down to the sub-menu rather than just disappearing because they left the element the hover is applied to?

Drop Down Menu Help

Similar Tutorials

View Content

Hi all,
I'm having an issue with a drop down menu and have been beating myself up trying to figure it out. If I position the menu as relative it works when I resize the page/browser but it screws up the layout of the page (I put the <div> code right below the menu images to get it lined up but it throws the layout way off). By works I mean the menu will open right below the "Company" menu item regardless of browser size.

Positioning the menu using absolute, it doesn't move if I resize the browser, etc. but it doesn't screw up the layout of the page. So my question is, how can I get this menu to always be under the correct menu option? You can use the link below to view my test page. The page is currently using absolute positioning and the coordinates are off since I was playing with the various positioning schemes.

http://www.info-adv.com/test/css

Any insight/help you can provide would be greatly appreciated. If you need me to elaborate or better explain my problem please let me know.

Thanks,
Tim

Drop Down Menu

Similar Tutorials

View Content

Hi,

I am trying to make a drop down menu using only CSS. I want to be able to set the width of the menu and don't want the width to be dependant of size of the menu option.

This is the XHTML code (I am using 1.0 strict):

<div class="option">
<form name="navigation">
<select name="selectname" SIZE="1">
<option class="">not wide enough</option>
<option class=""></option>
<option class=""></option>
<option class=""></option>
</select>
</form>
</div>

And the CSS part:

div.option
{
position: absolute;
top: 10px;
left: 0px;
width: 520px;
height: 50px;
z-index: 3;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 10px;
}

What I would really like is to set the menu width to preffered (in pixels) and not as wide as the phrase "not wide enough" makes it.

Is this possible with CSS. I am rying to avoid Javascript and tables (btw I'm using only divs as much as possible. Can someone point me where to look for this kind of thing.

Thanks.

Drop Down Menu Help

Similar Tutorials

View Content

dup

Css Drop Down Menu

Similar Tutorials

View Content

Ok I am creating a CSS/Javascript Horizontal drop down menu and everything looks great except when I go down and highlight items on my submenu the styles go away on the Menu Item Selected, how can I have those attributes maintain when I go on it's sub elements?

Thanks alot

Seth

Code:

<div id="Nav">
                    <ul class="menu">
                        <li>
                            <a href="#">
                                Home
                            </a>
                        </li>
                        <li>
                            <a href="#" onclick="javascript:showlayer('sm_1')">
                                Profile
                            </a>
                            <ul class="submenu" id="sm_1">
                                <li><a href="#">Portfolio</a></li>
                                <li><a href="#">Resume</a></li>
                                <li><a href="#">About Me</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">
                                Contact
                            </a>
                        </li>
                        <li>
                            <a href="#" onclick="javascript:showlayer('sm_2')">
                                Login
                            </a>
                            <ul class="submenu" id="sm_2">
                                <li><a href="#">Friends</a></li>
                                <li><a href="#">Family</a></li>
                                <li><a href="#">Admin</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>

Code:

ul, li
{
	margin:0; border:0; padding:0; list-style:none;
}
#Nav
{
	font-size:11px;
	color:#3b5d14;
	font-weight:bold;
	padding:4px;
	height:30px;
	font-family: Lucida Sans;
}
#Nav .menu li 
{
	/*background:url(Images/Light/Left-Menu.png) left top no-repeat;*/
	height:30px;
	float:left;
	margin-right:10px;
}
#Nav .menu li a
{
	color:#F1F1F1;
	width: 75px;
	text-decoration:none;
	padding:0 10px;
	height:30px;
	line-height:30px;
	display:block;
	float:left;
	padding:0 26px 0 10px;
	background:url(Images/Light/Right-Menu-Off.png) right top no-repeat;
	font-family: Lucida Sans;
}


#Nav .menu li a:hover
{
	color:#666666;
	background: url(Images/Light/MenuRight.png) right top no-repeat;
}

#Nav .menu li:hover
{
		
	background: url(Images/Light/Menu-Hover.png) left top no-repeat;
}

#Nav ul .submenu 
{
	border:solid 1px #7ea3bb;
	margin-left: auto;
	margin-right: auto;
	/*border-top:none;*/
	background:#FFFFFF;
	position:relative;
	top:1px;
	width:100px;
	padding:6px 0;
	clear:both;
	z-index:2;
	display:none;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);opacity:.95
}
#Nav ul .submenu li
{
	background:none;
	display:block;
	float:none;
	margin:0 6px;
	border:0;
	height:auto;
	line-height:normal;
	/*border-top:solid 1px #DEDEDE;*/
}
#Nav .submenu li a
{
	background:none;
	display:block;
	float:none;
	padding:6px 6px;
	margin:0;
	border:0;
	height:auto;
	color:#105cbe;
	line-height:normal;
}
#Nav .submenu li a:hover
{
	background:#ebf4fa;
}

Drop Down Menu

Similar Tutorials

View Content

Hey guys,

New to the forum. Mainly came on here to get help with my nav bar. It works perfectly in FF and IE 8.07+, but the problem it with IE8.06, where it doesn't show at all. Not too worried about pre-8.06, only a small amount of my page hits comes from below that version.

I've spent ages looking for a problem, but can't find where I've went wrong. There's may be some superfluous stuff in there that I've added to try and fix the problem.. Please help? =)

------------------------

Code:

#PageList1 ul {
height: 1.5em;
overflow:hidden;
margin: 10px -10px 5px;
width: 100%;
padding: 10px;
background-image:url('http://4.bp.blogspot.com/-WKkxGKrRVcw/TbFWFn_2VxI/AAAAAAAAAis/NKf1k3sO9A8/s1600/nav_bg2.jpg');
background-repeat:repeat-x;
}

#PageList1 li {
height: 1.5em;
list-style-type:none;
float:left;
}

#PageList1 li a {
display:block;
height: 1.5em;
width:auto;
clear:left;
font-weight:bold;
font-size:9pt;
line-height: 0.5em;
margin: -9px 0px -23px;
color: #ffffff;
background-image:url('http://3.bp.blogspot.com/_vhqPwC7csIg/TSUQG6Q3tfI/AAAAAAAAAYU/5ceiGi8na3s/s1600/gradient40px.jpg');
background-repeat:repeat-x;
text-align:center;
text-decoration:none;

padding: 10px 10px 15px;

	border: 1px solid #ccc;
	border-right: 0px solid #ccc;
	border-bottom: 0px solid #ccc;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
    -moz-box-shadow: 3px 3px 4px #000;
    -webkit-box-shadow: 3px 3px 4px #000;
    box-shadow: 3px 3px 4px #000;
}
#PageList1 li a:hover, #PageList1 li a.sfhover {
background:transparent;
font-weight:bold;
color: white;
}

#PageList1 li ul {
	left: -999em;
        position: absolute;
	width: 13em; /* Width to help Opera out */
height: auto;	
background-color: #ccc; 
colour:#fff; 
clear: left;
}

#PageList1 li:hover ul, #PageList1 li.sfhover ul {
	left: auto;
	margin: 8px -80px 0px;
width: 13em;
height: auto;
background: #ccc;

}

#PageList1 li:hover li a, #PageList1 li.sfhover li a {
background:#ccc;
	border: 0px solid #ccc;
	border-right: 0px solid #ccc;
	border-bottom: 0px solid #fffccc;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
padding: 0px;
margin: 5px 0px 0px;
    -moz-box-shadow: 0px 0px 0px #000;
    -webkit-box-shadow: 0px 0px 0px #000;
    box-shadow: 0px 0px 0px #000;
	color: #000; 
}
#PageList1 li li a:hover, #PageList1 li li a.sfhover {
	background-color: #ccc; 
color: #fff;}

<script type='text/javascript'>
sfHover = function() {
	var sfEls = document.getElementById("PageList1").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>

Trying To Fix My Drop-down Menu Pls Help!

Similar Tutorials

View Content

Hi this theme had an old dropdown menu that was acting weird in some browsers so I updated it with a plugin and now to need to customize it to look a certain way.

There are a few stylesheets at work because of the plugin but I am unable to discern why the "Contact Us" text is off-center in the button. I can see that it seems to be too long, but I don't know why it is favoring the right side of the background, instead of being centered in the background. If someone could help me demystify this I would be MUCH obliged.

I will post a link so that it can be inspected... When I am allowed after 4 more posts!

Please inspect the elements (too much code to post with all different style sheets at play!).

Thank you.

EDIT: here is link: http://drewclifton.com/clients/northern-computer/

You can also see that the dropdown under 'Services' looks funky; I'm thinking a 'sliding door' solution would be appropriate yes? Thank you.

Drop Down Menu Help....

Similar Tutorials

View Content

I have made a menu which I love because it is the layout that I want.
However, I am having problems with the menu when I try to add a "Drop Down" feature to it.

The menu I currently have and use is:
http://www.gc40.com/menu2.html

I would like to turn some of the tabs like services into a drop down menu. I found a script that was a drop down menu and I tried to customize it to match my original menu but failed.
The script that I found is: http://www.gc40.com/menu1.html

Is there anyone that can customize http://www.gc40.com/menu2.html for me using http://www.gc40.com/menu1.html so that I can have drop down capabilities?

I would really appreciate the help. Thanks guys.