|
CSS - Drop Downs - Ie6?
Is is possible to get CSS drop-downs to work in IE6?
If so what does it require? Thanks! Similar TutorialsHi there, Any help would be appreciated. Im currently building a site http://lafine.101webtech.com Im implementing the drop down menu system from CSSPlay for some reason its all good in IE7, Firefox, Safari (PC) but IE6 is not display the top level items as a horizontal list. I know the menu works in IE6 as I tested on the site before I grabbed the code. It must be something in my implementation but I can't for the life of me work out what. Cheers, Phil This method is just awesome, but how on earch does someone get the font color to stay on its hover state? http://htmldog.com/articles/suckerfish/dropdowns/ This should be a sticky and lets solve this problem together. This question is always asked but never answered. Hi there, I have this css to display some drop downs, but the drop downs are not showing in IE, but they are in FF. any ideas why? Code: #navt,
#navt ul {
padding: 0;
margin: 0;
list-style: none;
z-index: 1000;
}
#navt a {
display: block;
z-index: 1000;
width: 10em;
}
#navt li {
float: left;
z-index: 1000;
width: 10em;
}
#navt li ul {
z-index: 1000;
position: absolute;
width: 10em;
left: -999em;
}
#navt li:hover ul {
z-index: 1000;
left: auto;
}
#navt li:hover ul,
#navt li.sfhover ul {
z-index: 1000;
left: auto;
}
Hello All, I'm working on this site at the moment: http://www.whitecapgraphics.com/APP Unfortunately I seem to be missing the drop down menus in IE6. Can anyone explain why? (No, I haven't made it standards compliant yet and I am aware that the png is not transparent in IE6. Aside from that feel free to pick on me for anything else, I take criticism well.) CSS: Code:
* {margin:0; padding:0;}
body {
background-image:url(images/background.gif);
color:#450109;
}
a {
color:#450109;
text-decoration:none;
font-weight:bold;
font-variant:small-caps;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:.9em;
}
a:hover {
color:#D6970C;
text-decoration:overline underline;
}
div#main {
background-color: #FFFFFF;
margin: auto;
width: 95%;
border-width: 0px 5px 0px 5px;
border-style: solid;
border-right-color: #450109;
border-left-color: #D6970C;
border-bottom:15px solid #450109;
}
#main #logo {
background-image:url(images/logo.jpg);
background-position:top center;
background-repeat:no-repeat;
background-color:#71001E;
}
#main #leftflourish {
float:left;
}
#main #rightflourish {
float:right;
}
div#navigation {
background-color:#400000;
float: right;
margin: 0;
width: 100%;
min-height: 24px;
}
div#navigation ul {
margin-left: 193px;
padding-left: 5px;
padding-right: 5px;
}
div#navigation ul li {
background-color: #400000;
float: left;
list-style-type:none;
width: 25%;
position: relative;
z-index:99;
}
div#navigation a {
text-decoration:none;
font-variant:normal;
color: #DFCDB6;
text-align:center;
display: block;
width: 100%;
line-height: 25px;
font-family: serif;
font-size:1.1em;
font-weight:normal;
}
div#navigation a:hover {
color: #FFCC00;
}
div#navigation ul li ul {
width: 90%;
padding: 0;
margin:0;
margin-left:5%;
margin-right: 5%;
position:absolute;
display: none;
}
div#navigation ul li ul li {
width: 100%;
}
/* shows drop down on hover */
div#navigation ul li:hover ul, div#navigation ul li ul:hover {display:block;}
div#lcolumn {
width: 190px;
float: left;
margin: 0;
padding: 0;
position: relative;
top: -66px;
z-index:999;
}
div#lcolumn ul li {
list-style-type:none;
text-align:center;
width: 167px;
padding-bottom: .1em;
}
#main #body #lcolumn ul li a {
background-image: url(images/yapdropback.jpg);
display: block;
background-repeat: no-repeat;
min-height: 24px;
color:#DFCDB6;
text-decoration:none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size:.9em;
line-height: 24px;
letter-spacing: -.02em;
font-variant:small-caps;
}
#main #body #lcolumn ul li a:hover {
color: #ffcc00;
}
#main #body #lcolumn #featureContent {
padding-top: 24px;
}
#main #body #lcolumn #featureContent div{
padding-right: 30px;
padding-top: 60px;
background-image: url(images/featuresback.jpg);
background-repeat: no-repeat;
}
#main #body {
background-image:url(images/chaser.jpg);
background-position:bottom right;
background-repeat:no-repeat;
position: relative;
margin-bottom:3em; /*1.25 + 1.75*/
clear:both;
}
#main #body #content {
padding-left: 200px; /*fix for IE - it's including from side of L Column*/
position: absolute;
top: 48px;
z-index:1;
}
h1 {
font-family: "Times New Roman", Times, serif;
font-size: 1.5em;
line-height:1.1em;
text-transform: uppercase;
color: #350000;
width: 50%;
}
#main #body #content div ul li {
float: right;
list-style-type:none;
padding-left: 2%;
top: .4em;
line-height:2.2em;
display:block;
font-weight:bold;
}
h2 {
position:relative;
width: 98%;
background-image:url(images/navback.jpg);
background-repeat:repeat-x;
padding-top:1%;
font-family: "Times New Roman", Times, serif;
font-size: 1.2em;
text-indent: 2em;
}
#main #body #content div ul {
width: 46%;
position: absolute;
top: .4em;
right:0;
padding-right:4%;
}
h1:first-letter {
font-size: 1.7em;
}
#content p {
padding: 2em;
}
#main #footer {
text-align: center;
position:relative;
top: -1em;
}
/* Aslett Clearing Method */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-table;}
/* backslash hack hides from IE mac \*/
* html .clearfix {height: 1%;}
* html #main #body #content {padding-left:0px; width:78%;}
.clearfix {display:block;}
/* end backslash hack */
I don't have any styles applied to these drop downs. I don't really know how to do what I need to do. I want to make this drop down: graiai [dot] com /screenshots/makethis.gif Look like this drop down: graiai [dot] com /screenshots/looklikethis.gif Help! Hi all, The following CSS and HTML work fine in Mozilla, Netscape and Firefox. It can be viewed in action at: http://www.sirfragalot.com/wikindx2/ (choose the 'chocolate vanilla fudge sundae' from the Wikindx/preferences menu.) I have two questions: 1/ I'm aware that Konqueror does not support CSS drop-downs. It doesn't concern me as I've programmed a way around it. However, the menu items occasionally stack up vertically on the left side of the browser window: they're supposed to be horizontal. This stacking and subsequent un-stacking seems to be quite random. What's the fix? 2/ In IE, the drop-downs are rendered from the bottom right corner of the originating top menu item (they should be directly underneath). What is the fix? HTML CODE: Code: <!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" xml:lang="en" lang="en">
<!-- begin header template (+ 3 lines up!) -->
<head>
<title>WIKINDX</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="chocolate.css" type="text/css" />
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").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>
</head>
<body>
<!-- begin menue template -->
<table class="menuTable" border="0" cellspacing="0" cellpadding="0" align="left">
<tr class="" align="left" valign="top">
<td class="" align="right" valign="top">
<ul id="nav">
<li><a class="menuLi" href="index.php?action=frontNoMenu">Wikindx</a>
<ul>
<li><a class="menu" href="index.php">Home</a></li>
<li><a class="menu" href="index.php?action=preferencesDisplay">Preferences</a></li>
</ul>
</li>
<li><a class="menuLi" href="index.php?action=fileNoMenu">File</a>
<ul>
<li><a class="menu" href="index.php?action=exportRtf">Export RTF</a></li>
<li><a class="menu" href="index.php?action=exportBibtex">Export BibTeX</a></li>
<li><a class="menu" href="index.php?action=showFiles">Show Files</a></li>
</ul>
</li>
<li><a class="menuLi" href="index.php?action=editNoMenu">Edit</a>
<ul>
<li><a class="menu" href="index.php?action=editCreator">Creator</a></li>
<li><a class="menu" href="index.php?action=editJournal">Journal</a></li>
<li><a class="menu" href="index.php?action=editPublisher">Publisher</a></li>
</ul>
</li>
<li><a class="menuLi" href="index.php?action=resourceNoMenu">Resources</a>
<ul>
<li><a class="menu" href="index.php?action=listDisplay">List</a></li>
<li><a class="menu" href="index.php?action=searchDisplay">Search</a></li>
<li><a class="menu" href="index.php?action=selectDisplay">Select</a></li>
<li><a class="menu" href="index.php?action=resourceNew">New</a></li>
</ul>
</li>
<li><a class="menuLi" href="index.php?action=textNoMenu">Text</a>
<ul>
<li><a class="menu" href="index.php?action=allMusings">Musings</a></li>
<li><a class="menu" href="index.php?action=randomMusing">Random Musing</a></li>
<li><a class="menu" href="index.php?action=allParaphrases">Paraphrases</a></li>
<li><a class="menu" href="index.php?action=randomParaphrase">Random Paraphrase</a></li>
<li><a class="menu" href="index.php?action=allQuotes">Quotes</a></li>
<li><a class="menu" href="index.php?action=randomQuote">Random Quote</a></li>
</ul>
</li>
<li><a class="menuLi" href="index.php?action=adminNoMenu">Admin</a>
<ul>
<li><a class="menu" href="index.php?action=superadminLogonDisplay">Logon</a></li>
</ul>
</li>
<li><a class="menuLi" href="index.php?action=helpNoMenu">Help</a>
<ul>
<li><a class="menu" href="index.php?action=helpDisplay">Wikindx Help</a></li>
<li><a class="menu" href="index.php?action=aboutWikindx">About Wikindx</a></li>
</ul>
</li>
</ul>
</td>
</tr>
</table>
<br />
<!-- end menu template -->
</body>
<!-- end footer template (+ 1 line down!) -->
</html>
CSS CODE: Code: body {
background : #74664a;
font-family : sans-serif;
font-size : 0.9em;
color : #f6eedf;
}
/* SuckerFish CSS drop down style */
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}
#nav a {
display: block;
width: 7em;
}
#nav li {
float: left;
width: 7em;
background : red;
}
#nav li ul {
position: absolute;
width: 7em;
left: -999em;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
/* End Suckerfish Style */
/* Standard links such as top menu links */
A:visited, A:link, A:active {
text-decoration : none;
color : #74664a;
background : #efd197;
border-left : 1px groove #f6eedf;
border-top : 1px groove #f6eedf;
border-right : 1px groove #f6eedf;
border-bottom : 1px groove #f6eedf;
font-size : 0.9em;
}
A:hover {
text-decoration : none;
background : #f6eedf;
color : #74664a;
border-left : 1px groove #f6eedf;
border-top : 1px groove #f6eedf;
border-right : 1px groove #f6eedf;
border-bottom : 1px groove #f6eedf;
font-size : 0.9em;
}
/* .menu = submenu links */
A.menu:visited, A.menu:link, A.menu:active {
text-decoration : none;
color : #74664a;
display : block;
border-bottom : 1px solid #f6eedf;
width : 6em;
background : #efd197;
font-size : 0.9em;
text-align : left;
}
A.menu:hover {
text-decoration : none;
background : #f6eedf;
display : block;
color : #74664a;
border-bottom : 1px solid #f6eedf;
width : 6em;
font-size : 0.9em;
text-align : left;
}
/* normal links and paging links */
A.link:visited, A.link:link, A.link:active, A.page:visited, A.page:link, A.page.active {
text-decoration : none;
color : red;
background : transparent;
border : none;
}
A.link:hover, A.page:hover {
text-decoration : none;
background : #f6eedf;
color : #74664a;
border : none;
border : none;
}
/* resource links for resource URLs */
A.rLink:visited, A.rLink:link, A.rLink:active {
text-decoration : none;
background : transparent;
color : #f6eedf;
border : none;
}
A.rLink:hover {
text-decoration : none;
background : #f6eedf;
color : #74664a;
border : none;
border : none;
}
/* image links */
A.imgLink:visited, A.imgLink:link, A.imgLink:active {
text-decoration : none;
background : transparent;
border : none;
}
A.imgLink:hover {
text-decoration : none;
background : transparent;
border : none;
}
/*****
* .titleTable: the table containing the title bar
*****/
.titleTable {
width : 90%;
}
/*****
* .menuTable: the table containing the drop-down menus
*****/
.menuTable {
margin : 0 0 0 5%;
}
/*****
* .menuLi: text-color in list items of the drop-down menus
*****/
.menuLi {
color : black;
}
/*****
* .mainTable: the table containing the main content of WIKINDX
*****/
.mainTable {
border : none;
width : 90%;
padding : 0.2em;
clear : both;
}
/*****
* redefine HTML headings - see /core/html/MISC.php
*****/
h1, h2, h3, h4 {
color : #f6eedf;
margin : 0 0 1em 0;
}
/*****
* .footerFooter: footer information at end of script - part of a table
*****/
.footerTable {
font-size : 0.6em;
color : #f6eedf;
width : 90%;
}
/*****
* .error: <p>error messages</p>
*****/
.error {
background : red;
color : black;
}
/*****
* .success: <p>success messages</p>
*****/
.success {
background : #33ff00;
color : black;
}
/*****
* .small: small text
*****/
.small, .hint {
font-size : 0.8em;
}
/*****
* .hint: text hints given to provide further information usually on form input. Often used in conjunction
* with .small and usually the class of <span>....</span>
*****/
.hint {
color : #f6eedf;
}
/*****
* alternate background colours and font sizes for <td>resources</td> in a bibliographic list
*****/
.alternate1 {
/* background : #efd197; */
/* background : #f8efdf; */
border : 2px groove #583b04;
font-size : 0.9em;
color : #f6eedf;
}
.alternate2 {
/* background : #ede5d8; */
/* background : #f6eedf; */
border : 2px groove #583b04;
font-size : 0.9em;
color : #f6eedf;
}
/*****
* .highlight: highlight <span>search terms</span> in text
*****/
.highlight {
color : #583b04;
background : yellow;
}
/*****
* .required: highlighting for <span>required</span> form input elements (asterisk).
*****/
.required {
color : red;
}
drlinklove.com/drew/index4.html Some of the navigation items have drop-down menus. It seems that sometimes the drop-down menu disappears before the user has a chance to click one of the options. Anyone have a guess to how I can make it more stable? Hello all, I'm trying to fix my drop down so it goes straight down. I originally had it so it was reading the javascript but after adjusting it quite a bit, it spans the whole parent nav bar and is completely in css. I don't mind that it's in css but I want visitors to be able to see it in ie because ie own's a good 75% of the browser population. Here is my site, i still have the javascript file in there but it doesn't do anything anymore. Any clues on how to get it so it goes straight down and is viewable in ie? Site Hey guys , I am looking to convert my css3 vertical nav bar , from the order of "DROP DOWN" to "DROP UP" . The code i am using below is from a css3 gen. If anybody could show me what values to change it would be greatly appreciated , Code:
ul#css3menu,ul#css3menu ul{
margin:0;list-style:none;background-color:#000000; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.38),rgba(255,255,255,0.16));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.38)),to(rgba(255,255,255,0.16)));background-repeat:repeat;border-width:1px;border-style:solid;border-color:#343434;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;-moz-box-shadow:1.4px 1px 2px #B1B1B1;-webkit-box-shadow:1.4px 1px 2px #B1B1B1;box-shadow:1.4px 1px 2px #B1B1B1;}
ul#css3menu ul{
display:none;position:absolute;left:-1px;top:98%;padding:0;background-color:#202020; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.16),rgba(255,255,255,0));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.16)),to(rgba(255,255,255,0)));border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;border-color:#000000;}
ul#css3menu li:hover>*{
display:block;}
ul#css3menu li:hover{
position:relative;}
ul#css3menu ul ul{
position:absolute;left:98%;top:-2px;}
ul#css3menu{
padding:6px 6px 6px 0;display:block;font-size:0;position:absolute;z-index:1000;left:10px;top:10px;}
ul#css3menu li{
display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu>li,ul#css3menu li{
margin:0 0 0 6px;}
ul#css3menu ul>li{
margin:6px 0 0;}
ul#css3menu a:active, ul#css3menu a:focus{
outline-style:none;}
ul#css3menu a{
display:block;vertical-align:middle;text-align:left;text-decoration:none;font:12px Arial,sans-serif;color:#E7E5E5;cursor:pointer;padding:8px 20px;background-color:;border-width:0;border-style:solid;border-color:transparent;}
ul#css3menu ul li{
float:none;margin:0;}
ul#css3menu ul a{
text-align:left;}
ul#css3menu li:hover>a{
background-color:#7ACF27;border-color:#F8F8F8;border-style:solid;font:12px Arial,sans-serif;color:#333;text-decoration:none; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.38),rgba(85,170,0,0.7));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.38)),to(rgba(85,170,0,0.7)));filter:progid:DXImageTransform.Microsoft.g radient(gradientType=0,startColorstr=#60FFFFFF,endColorstr=#B355AA00)}
ul#css3menu img{
border:none;vertical-align:middle;margin-right:16px;width:16px;height:16px;}
ul#css3menu ul img{
width:16px;height:16px;}
ul#css3menu img.over{
display:none;}
ul#css3menu li:hover > a img.def{
display:none;}
ul#css3menu li:hover > a img.over{
display:inline;}
ul#css3menu ul span{
background-image:none;padding-right:16px;}
ul#css3menu li.topitem>a{
background-color:traspar;border-width:1px 0 0 0;border-style:solid;border-color:;border-radius:50px;-moz-border-radius:50px;-webkit-border-radius:50px;font:bold 13px Arial,sans-serif;color:#E7E5E5;text-decoration:none;text-shadow:0 1px 1px #000000;}
ul#css3menu li.topitem:hover>a{
background-color:#00ff00; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.77),rgba(85,170,0,0.7));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.77)),to(rgba(85,170,0,0.7)));border-style:solid;border-color:#F8F8F8;font:bold 13px Arial,sans-serif;color:#444444;text-decoration:none;text-shadow:0 1px 0 #C5EAA1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=#C6FFFFFF,end Colorstr=#B355AA00)}
ul#css3menu li.subfirst>a{
border-radius:9px 9px 0 0;-moz-border-radius:9px 9px 0 0;-webkit-border-radius:9px 9px 0 0;}
ul#css3menu li.sublast>a{
border-radius:0 0 9px 9px;-moz-border-radius:0 0 9px 9px;-webkit-border-radius:0 0 9px 9px;}
And here is the html Code: <ul id="css3menu"> <li class="topitem"><a href="#" title="Item 0"><span>Item 0</span></a> <ul> <li class="subfirst"><a href="#" title="Item 0 0"><span>Item 0 0</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 0 0">Item 0 0 0</a></li> </ul> </li> <li><a href="#" title="Item 0 1"><span>Item 0 1</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 1 0">Item 0 1 0</a></li> </ul> </li> <li><a href="#" title="Item 0 2"><span>Item 0 2</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 2 0">Item 0 2 0</a></li> </ul> </li> <li><a href="#" title="Item 0 3"><span>Item 0 3</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 3 0">Item 0 3 0</a></li> </ul> </li> <li><a href="#" title="Item 0 4"><span>Item 0 4</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 4 0">Item 0 4 0</a></li> </ul> </li> <li><a href="#" title="Item 0 5"><span>Item 0 5</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 5 0">Item 0 5 0</a></li> </ul> </li> <li><a href="#" title="Item 0 6"><span>Item 0 6</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 6 0">Item 0 6 0</a></li> </ul> </li> <li><a href="#" title="Item 0 7"><span>Item 0 7</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 7 0">Item 0 7 0</a></li> </ul> </li> <li><a href="#" title="Item 0 8"><span>Item 0 8</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 8 0">Item 0 8 0</a></li> </ul> </li> <li><a href="#" title="Item 0 9"><span>Item 0 9</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 9 0">Item 0 9 0</a></li> </ul> </li> <li><a href="#" title="Item 0 10"><span>Item 0 10</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 10 0">Item 0 10 0</a></li> </ul> </li> <li><a href="#" title="Item 0 11"><span>Item 0 11</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 11 0">Item 0 11 0</a></li> </ul> </li> <li><a href="#" title="Item 0 12"><span>Item 0 12</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 12 0">Item 0 12 0</a></li> </ul> </li> <li class="sublast"><a href="#" title="Item 0 13"><span>Item 0 13</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 13 0">Item 0 13 0</a></li> </ul> </li> </ul> </li> </ul> This is probably a tall order any advice is appreciated , TYVM 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;
}
http:// idatedsatan . net / ewzine / index.html I've posted this before and the last time I was using a really bad workaround to get this drop down to work in IE. Now I'm using the suckerfish method, and it seems to work fine in firefox, opera, ie7, but in ie6 the drop down is offset and I think it's due to the container being offset. I'm not sure how I can make this work in ie6. Also there is supposed to be a background in the dropdown, but that's not showing up in ie6 either. Please help me if you can, much appreciated. Hey guys im having a really big problem with my site. It shows up fine in every browser except the old version of any IE. Can you guys help me out. the problem image is attached.URL Here's the HTML code: Code: <tr>
<td>
<div id="wrapper">
<div id="navMenu">
<ul>
<li><a href="home.html">Home</a>
<ul>
</ul> <!-- end inner UL -->
</li>
<!-- end main LI -->
</ul> <!-- end main UL -->
<ul>
<li><a href="aboutus.html">About</a>
<ul>
</ul> <!-- end inner UL -->
</li>
<!-- end main LI -->
</ul> <!-- end main UL -->
<ul>
<li><a href="aboutvictoria.html">Victoria</a>
<ul>
<li><a href="victoriastilwellarticle.html">Articles</a></li>
<li><a href="philosophy.html">Philosophy</a></li>
<li><a href="vspdt.html">VSPDT</a></li>
</ul> <!-- end inner UL -->
</li>
<!-- end main LI -->
</ul> <!-- end main UL -->
<ul>
<li><a href="photos.html">Photos</a>
<ul>
</ul> <!-- end inner UL -->
</li>
<!-- end main LI -->
</ul> <!-- end main UL -->
<ul>
<li><a href="links.html">Links</a>
<ul>
</ul> <!-- end inner UL -->
</li>
<!-- end main LI -->
</ul> <!-- end main UL -->
<ul>
<li><a href="trainingprograms.html">Training</a>
<ul>
<li><a href="trainingmethods.html">Methods</a></li>
<li><a href="whyreinforcement.html">Positive(+R)</a></li>
<li><a href="class.html">C.L.A.S.S</a></li>
</ul> <!-- end inner UL -->
</li>
<!-- end main LI -->
</ul> <!-- end main UL -->
<ul>
<li><a href="http://dynamitedogtraining.blogspot.com/">Blog</a>
<ul>
</ul> <!-- end inner UL -->
</li>
<!-- end main LI -->
</ul> <!-- end main UL -->
<ul>
<li><a href="contact.html">Contact</a>
<ul>
</ul> <!-- end inner UL -->
</li>
<!-- end main LI -->
</ul> <!-- end main UL -->
<br class="clearFloat" />
</div> <!-- end navMenu -->
</div>
<!--end wrapper -->
</td>
</tr>
And here's the CSS code: Code: #navMenu {
margin:0;
width:auto;
background-image: url(images/Home_top_06.jpg);
padding:0;
}
#navMenu ul {
margin:0;
padding:0;
line-height:30px;
background-color: #333;
}
#navMenu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
}
#navMenu ul li a {
text-align:center;
height:36px;
width:70px;
display:block;
font-family:"Comic Sans MS", cursive;
text-decoration:none;
color:#FFF;
text-shadow:0;
font-size: 15px;
font-variant: normal;
}
#navMenu ul ul {
visibility:hidden;
top:32px;
width: 120px;
font-style: italic;
position: absolute;
margin-left: -20px;
text-indent: 9px;
text-align: center;
}
#navMenu ul li:hover ul {
visibility:visible;
z-index:9999;
}
/**********************************************/
/*sets top level hover color*/
#navMenu li:hover {
font-weight: bold;
font-style: italic;
}
/*sets link items hover color and background*/
#navMenu ul li:hover ul li a:hover {
color:#000;
background-color: #E71923;
width: 120px;
}
/* Changes text color on hover for main menu hover*/
#navMenu a:hover {
color:#FFF;
}
/* Contains the Float */
.clearFloat {
clear:both;
margin:0;
padding:0;
}
#navMenu #holder ul li{
display:inline;
float:left;
clear:left;
}
Please if you guys can help it would be awesome thank you I've tried so many things and can't get it right so I erased what I originally had to show all. Code: <div id="main-nav"> <ul> <li><a href="#"><img src="images/btn-roster.jpg" alt="Roster" width="71" height="36" border="0"></a></li> <li><a href="#"><img src="images/btn-events.jpg" alt="Events" width="75" height="36" border="0"></a></li> <li><a href="#"><img src="images/btn-multimedia.jpg" alt="Multimedia" width="108" height="36" border="0"></a></li> <li><a href="#"><img src="images/btn-info.jpg" alt="Info" width="61" height="36" border="0"></a></li> </ul> </div> Code: @charset "windows-1252";
body {
background: #0a0d12;
text-align: center;
padding: 0px;
margin: 0px;
}
.main {
width:1027px; margin:0px auto; padding:0px;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-top: 0px;
border-bottom: 0px;
}
.header {
width: 1027px;
height: 146px;
background: #0a0d12 url(../images/header.jpg);
border: 0px;
margin: 0px;
padding: 50px 130px 0px 0px;
}
.leftside {
width: 110px;
height: 825px;
background:url(../images/left-side.jpg) right top no-repeat #0a0d12;
padding: 0;
margin: 0;
}
.rightside {
width: 110px;
height: 825px;
background:url(../images/right-side.jpg) left top no-repeat #0a0d12 ;
padding: 0;
margin: 0; border:0px;
}
.contentarea {
color: #eeeeee;
width: 803px;
height: 692px;
background: #0a0c0d;
text-align: left;
vertical-align: top;
border-left: 2px solid #000000;
border-right: 2px solid #000000;
border-top: 0px;
border-bottom: 0px;
margin: 0px;
padding: 0px;
float:left;
}
.footer {
width: 807px;
height: 133px;
color: #eeeeee;
text-align: center;
vertical-align: top;
background:url(../images/footer.jpg) center top repeat;
padding: 0;
margin: 0;
}
a img,:link img,:visited img { border:none }
a {outline:none;}
.footer a { margin:0px; padding:0px 10px; text-decoration:none; font:bold 12px/18px Arial, Helvetica, sans-serif; color:#fff;}
.top-banner { width:312px; height:69px; background:#313A47; float:right; margin:0px; padding:0px; border:1px solid #000;}
#main-nav { width:805px; height:59px; margin:0px; padding:0px; float:left; background:url(../images/top-nav-bg.jpg) left top no-repeat;}
#main-nav ul { width:350px; height:39px; margin:9px 10px 0 0; padding:0px; float:right;}
#main-nav ul li { margin:0px; padding:0 4px 0 0px; float:left; list-style:none;}
#main-nav ul li a { border:none;}
*html #main-nav ul li { margin:0 0px 0 5px; padding:0px; float:left; list-style:none;}
#left-box { width:168px; height:629px; float:left; margin:0px; padding:2px;/* background:#ccc;*/}
.quote { width:168px; height:97px; float:left; margin:11px 0 0 0; padding:0px; background:#2D3542;}
.quote img { float:left; margin:3px 0 0 5px; padding:0px;}
.quote h3 { width:168px; height:27px; float:left; margin:0px; padding:0px; background:url(../images/box-head-bg.jpg) left top no-repeat;}
.quote-content { width:164px; height:70px; float:left; margin:0px; padding:0px; border:2px solid #090B0B; border-top:none; }
*html .quote-content { width:168px; height:70px; float:left; margin:0px; padding:0px; border:2px solid #090B0B; border-top:none; }
.quote-content p { margin:0px; padding:5px; text-align:center; font:bold 12px/16px Arial, Helvetica, sans-serif; color:#fff;}
.quote-content p b { margin:0px; padding:0px; text-align:right; font:bold 12px/16px Arial, Helvetica, sans-serif; color:#c00;}
.spotlight { width:168px; height:202px; float:left; margin:20px 0 0 0; padding:0px; background:#2D3542;}
.spotlight h3 { width:168px; height:25px; float:left; margin:0px; padding:2px 0 0 5px; background:url(../images/box-head-bg.jpg) left top no-repeat;}
.spotlight-content { width:164px; height:175px; float:left; margin:0px; padding:0px; border:2px solid #090B0B; border-top:none; }
*html .spotlight-content { width:168px; height:175px; float:left; margin:0px; padding:0px; border:2px solid #090B0B; border-top:none; }
.spotlight-content h4 { margin:0px; padding:5px; text-align:center; font:bold 11px/12px Arial, Helvetica, sans-serif; color:#fff;}
.spotlight-content p { margin:0px; padding:2px 5px; text-align:left; font:normal 10px/11px Arial, Helvetica, sans-serif; color:#fff;}
.spotlight-content img { margin:0 0 0 20px; padding:2px 0px; text-align:center; float:left; font:normal 10px/12px Arial, Helvetica, sans-serif; color:#fff;}
.opinion { width:168px; height:270px; float:left; margin:15px 0 0 0; padding:0px; background:#2D3542;}
.opinion h3 { width:168px; height:23px; float:left; margin:0px; padding:4px 0 0 5px; background:url(../images/box-head-bg.jpg) left top no-repeat;}
.opinion-content { width:164px; height:243px; float:left; margin:0px; padding:0px; border:2px solid #090B0B; border-top:none; }
*html .opinion-content { width:168px; height:248px; float:left; margin:0px; padding:0px; border:2px solid #090B0B; border-top:none; }
.opinion-content p { float:left; margin:0px; padding:10px 5px; text-align:left; font:bold 11px/18px Arial, Helvetica, sans-serif; color:#fff; }
.opinion-content form { float:left; margin:0px; padding:10px 5px 0px 5px; text-align:left; font:bold 11px/18px Arial, Helvetica, sans-serif; color:#fff; }
.opinion-content form label { float:left; margin:5px 0 0 30px; padding:0px; width:50px;font:bold 12px/18px Arial, Helvetica, sans-serif; color:#fff; }
.opinion-content form input { float:left; margin:5px 0 0 0; padding:0px; }
.opinion-content img { margin:0 0 0 40px; padding:0px;}
.opinion-content img a { margin:0 0 0 40px; padding:0px; border:none;}
#content-box { width:450px; height:623px; float:left; margin:0px; padding:5px;}
.content-banner { width: 446px; height: 95px; float:left; margin:0px; padding:2px; }
.content-banner img { text-align:center; }
.site-news { width:452px; height:218px; float:left; margin:0px; padding:0px; }
.site-news h2 { width:452px; height:23px; float:left; margin:0px; padding:8px 0 0 10px; background:url(../images/content-box-head-bg.jpg) left top no-repeat; }
*html .site-news h2 { height:31px;}
.site-news-content { width:448px; height:182px; float:left; margin:0px; padding:0px; background:url(../images/box-content-bg.jpg) left top repeat-x #090A0A; border:2px solid #090B0B; border-top:none;}
*html .site-news-content { width:452px; height:182px; float:left; margin:0px; padding:0px; background:url(../images/box-content-bg.jpg) left top repeat-x #090A0A; border:2px solid #090B0B; border-top:none;}
.site-news-content h3 { margin:0px; padding:6px 10px 4px 25px; text-align:left; font:bold 11px/18px Arial, Helvetica, sans-serif; color:#fff; }
.site-news-content p { margin:0px; padding:6px 10px 5px 25px; text-align:left; font:normal 11px/13px Arial, Helvetica, sans-serif; color:#fff; }
.content-bottom-box { width:214px; height:28px; float:left; margin:0px; padding:2px 2px 0px 4px; }
.content-bottom-box h2 { width:204px; height:23px; float:left; margin:0px; padding:8px 0 0 10px; background:url(../images/content-box-head-bg.jpg) left top no-repeat; }
*html .content-bottom-box h2 { height:31px; width:214px;}
.content-bottom-box-content { width:212px; height:249px; float:left; margin:0px; padding:0px; background:url(../images/box-content-bg.jpg) left top repeat-x #090A0A; border:2px solid #090B0B; border-top:none;}
*html .content-bottom-box-content { width:216px; height:249px; float:left; margin:0px; padding:0px; background:url(../images/box-content-bg.jpg) left top repeat-x #090A0A; border:2px solid #090B0B; border-top:none;}
.content-bottom-box-content h3 { margin:0px; padding:6px 10px 4px 15px; text-align:left; font:bold 11px/18px Arial, Helvetica, sans-serif; color:#fff; }
.content-bottom-box-content p { margin:0px; padding:4px 10px 3px 15px; text-align:justify; font:normal 11px/12px Arial, Helvetica, sans-serif; color:#fff; }
.content-bottom-box-content img { margin:0 0 0 25px; padding:0px;}
#right-box { width:161px; height:629px; float:right; margin:0px; padding:2px;}
.events { width:156px; height:253px; float:left; margin:5px 0 0 0; padding:0px; background:#2D3542;}
.events h3 { width:156px; height:24px; float:left; margin:0px; padding:3px 0 0 5px; background:url(../images/box-sm-head-bg.jpg) left top no-repeat;}
.events-content { width:152px; height:221px; float:left; margin:0px; padding:5px 0 0 0; border:2px solid #090B0B; border-top:none; }
*html .events-content { width:156px; height:226px; float:left; margin:0px; padding:10px 0 0 0; border:2px solid #090B0B; border-top:none; }
.events-content p { margin:3px 0 0 0; height:45px; padding:0px; }
.events-content p span { width:146px; float:left; margin:0px; padding:0px 0 0 5px; text-align:left; font:normal 10px/13px Arial, Helvetica, sans-serif; color:#fff; }
.events-content p span b { width:50px; float:left; margin:0px; padding:0px; text-align:left; font:normal 10px/13px Arial, Helvetica, sans-serif; color:#fff; }
.events-content p span a { width:130px; float:left; margin:0px; padding:0px; text-align:right; font:normal 10px/13px Arial, Helvetica, sans-serif; color:#c00; text-decoration:none; }
.forum { width:156px; height:161px; float:left; margin:15px 0 0 0; padding:0px; background:#2D3542;}
.forum h3 { width:156px; height:20px; float:left; margin:0px; padding:7px 0 0 5px; background:url(../images/box-sm-head-bg.jpg) left top no-repeat;}
*html .forum h3 { width:156px; height:27px; float:left; margin:0px; padding:7px 0 0 5px; background:url(../images/box-sm-head-bg.jpg) left top no-repeat;}
.forum-content { width:152px; height:134px; float:left; margin:0px; padding:0px; border:2px solid #090B0B; border-top:none; }
*html .forum-content { width:156px; height:134px; float:left; margin:0px; padding:0px; border:2px solid #090B0B; border-top:none; }
.shop { width:155px; height:157px; float:left; margin:14px 0 0 0; padding:0px; background:#2D3542;}
.shop h3 { width:155px; height:27px; float:left; margin:0px; padding:0px; background:url(../images/head-shopzone.jpg) left top no-repeat;}
.shop-content { width:151px; height:130px; float:left; margin:0px; padding:0px; border:2px solid #090B0B; border-top:none; }
*html .shop-content { width:155px; height:130px; float:left; margin:0px; padding:0px; border:2px solid #090B0B; border-top:none; }
.shop-content img { text-align:center; margin:0 0 0 20px; padding:0px;}
.clear { margin:0px; padding:0px; clear:both; height:0px;}
http://kansasoutlawwrestling.com/KOW/index.html# Hi there, First I should mention, I have been doing a lot of research to learn CSS, and this is basically the first time implementing it for my company's website. I have A LOT to learn still! I'm using Dreamweaver MX and MX 2004 (2004 seems to keep crashing on me today, and i can't run it)...anyways... I am working on a dropdown menu using pure CSS....WHICH is a library item that I am dropping into a table cell below the top banner on the index page, and others. However, I'm having problems with some styling and the best way to work some things. First, if you click he Interface I hope someone can help me!! I'm so frustrated! You can see HOW I want the nav to look. I seem to have a problem with the aligning of the text, as well as roll over effects: basically, I would like my nav button to turn blue w/ white text. And I'd like to have my buttons closer together, having it look as close as possible to my interface img above. Also having issues w/ IE...which I assume would happen. Here is my CSS and HTML code (remember, no body or title tags because it's an lbi item: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style> #nav, #nav ul { padding: 0; margin: 0; list-style: none; } #nav a { display: block; width: 10em; color: rgb(0,50,94); font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-decoration: none; } #nav li { float: left; width: auto; } #nav li ul { position: absolute; background: #C5D1DC; width: 10em; left: -999em; margin: 3px; border: 1px solid rgb(0,50,94); padding:5px; } #nav li:hover ul, #nav li.sfhover ul { left: auto; } .button { background-color: #C5D1DC; padding: 3px; border-top: 1px solid #003A66; border-right: 0px solid #003A66; border-bottom: 1px solid #003A66; border-left: 0px solid #003A66; } </style> <script type="text/javascript"><!--//--><![CDATA[//><!-- sfHover = function() { var sfEls = document.getElementById("nav").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> <ul id="nav"> <li class="button"><a href="#">Products</a> <ul> <li cla><a href="#">Audio</a></li> <li><a href="#">Video</a></li> <li><a href="#">Home Automation</a></li> <li><a href="#">Lighting</a></li> <li><a href="#">PDF Downloads</a></li> <li><a href="#">Part Index</a></li> </ul> </li> <li class="button"><a href="#">News and Events </a> <ul> <li><a href="#">New Products</a></li> <li><a href="#">User Profile</a></li> <li><a href="#">Company</a></li> <li><a href="#">Tradeshows</a></li> <li><a href="#">Newsletter</a></li> </ul> </li> <li class="button"><a href="#">Order</a> <ul> <li><a href="#">Distributor List</a></li> </ul> </li> <li class="button"><a href="#">Corporate</a> <ul> <li><a href="#">Company Bio</a></li> </ul> </li> <li class="button"><a href="#">Technical Resources</a> <ul> <li><a href="#">Connector Cross Reference</a></li> <li><a href="#">Wire Gage</a></li> <li><a href="#">Glossary</a></li> </ul> </li> </ul> (IF you need me to, I can send you my site files over email) I really really appreciate all the help you guy's can give me! I'm on a tight deadline, and I really want to use CSS. If I can't get this to work, I have to take out the drop down menu all together and go w/ a boring static menu system that will add in numerous extra pages.... THANKS! Valerie Hi, I'm trying to get this drop down to work in IE, but I'm not exactly sure what the problem is, can anyone help me? idatedsatan . net / ewzine / index.html Thanks. Hey folks, having a bit of trouble with a css-based drop down menu in IE7. It works fine in IE8/FF/Chrome etc., but not 7. The problem is when the rollover pops out, if you try and navigate down through the dropdown, it disappears. The issue can be seen here. Here's the code: Code:
#mainMenu {
width:225px;
}
* + html #mainMenu {
margin-top:0;
}
#mainMenu li {
font-size:12px;
text-align:right;
margin-left:5px;
position:relative;
}
* html #mainMenu li { margin-left:10px; }
#mainMenu li a, #mainMenu li#clock {
background:none transparent;
display:block;
width:221px;
height:28px;
padding:8px 5px 0 0;
border-bottom:1px solid #e1dbcb;
color:#eee;
}
#mainMenu li#clock {
text-align:center;
padding-left:5px;
width:216px;
font:small-caps bold 12px Georgia, "Times New Roman", Times, serif;
color:#e1dbcb;
}
#mainMenu li a:hover {
background:#e1dbcb;
color:#21729d;
}
li ul {
position: absolute;
left: 225px;
top: -1px;
display: none;
border:solid #e1dbcb;
border-width:1px 5px 1px 0;
z-index:200;
}
* html li ul { left:220px; }
#mainMenu li li {
background:#21729d;
}
li ul li a {
display: block;
text-decoration: none;
}
li:hover ul, li.over ul {
display: block;
}
Thanks! I know it's possible, Anyone know how to do it or point me to a good learning tutorial? Hi there, I have a css drop down menu which displays items in a drop down menu, however, I want to add a second drop down to items that have sub categories, for example: Main Link --Drop Down --- Sub category This is my HTML: PHP Code: <ul id="nav"> <li style="border-right: 1px solid #ffffff;"> <a href="#">home</a> </li> <li style="border-right: 1px solid #ffffff;"> <a href="#">about us</a> <ul> <li><a href="#">Mission</a></li> <li><a href="#">Staning Committees</a></li> <li><a href="#">Directors</a></li> <li><a href="#">Past Presidents</a></li> </ul> </li> <li style="border-right: 1px solid #ffffff;"> <a href="#">membership</a> <ul> <li><a href="#">Membership Categories</a></li> <li><a href="#">Design & Print Media</a></li> <li><a href="#">Website & Visual Design</a></li> <li><a href="#">Website & Email Hosting</a></li> <li><a href="#">Distibution</a></li> </ul> </li> <li style="border-right: 1px solid #ffffff;"> <a href="#">products</a> <ul> <li><a href="#">Our Products</a></li> <li><a href="#">Product Distribution</a></li> </ul> </li> <li style="border-right: 1px solid #ffffff;"> <a href="#">properties</a> </li> <li style="border-right: 1px solid #ffffff;"> <a href="#">advertising</a> </li> <li style="border-right: 1px solid #000000;"> <a href="#">contact</a> </li> </ul> and this is my CSS: PHP Code: ul#nav{ margin: 0px; padding: 0px; text-align: left; list-style: none; width: 790px; margin: 0px auto; position: relative; } ul#nav li{ float: left; margin: 0px; padding: 0px 2px 0px 0px; line-height: 5px; position: relative; width: 109px; } ul#nav li img{ vertical-align: top; } ul#nav li.rightLink{ float: right; } ul#nav li.last{ background: none; } ul#nav li a, span.noLink { display: block; line-height: 5px; font-size: 9px; font-family: Verdana, Arial, Helvetica, sans-serif; text-transform:uppercase; font-weight:bold; text-decoration:none; text-align:center; padding: 15px 10px 15px 10px; color: #ffffff; } * html ul#nav li a, span.noLink { padding: 20px 10px 6px 8px; } ul#nav li a:hover{ color: #ffffff; } ul#nav li:hover a, ul#nav li.sfhover a{ } ul#nav li:hover li a, ul#nav li.sfhover li a{ background: none; } ul#nav li ul{ position: absolute; margin: 0px; padding: 0px; overflow: visible; left: 0px; display: none; margin-top: hover; text-align: left; background: #000000; width: 150px; } ul#nav li li{ background: #000000; padding: 0px; margin: 0px; float: none; display: block; text-align: left; width: 100%; } ul#nav li li a{ display: block; margin: 0px; padding: 3px 3px 3px 15px; background: #f0f3f8; font-weight: normal; text-transform:none; font-weight:bolder; font-size: 10px; line-height: 12px; font-family: Arial, Helvetica, sans-serif; color: #ffffff; text-decoration: none; text-align:left; margin-left: 6px; margin-right: 6px; letter-spacing: 1px; width: 130px; } ul#nav li li a:hover{ color: #ff0000; } ul#nav li:hover ul, ul#nav li.sfhover ul{ display: block; } Any ideas how I can add a drop down to appear to the right of the drop downs which have further categories? Any help would be great! Thanks! 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;
}
hi, how do I style a drop box so it is flat not sunk in? |
|||||||