|
CSS - Css Drop Menu Not Working. Please Help!
dawuster.com/test/index2.htm
I can't figure out why my "Manufacturers" css drop menu on the left side doesn't work. It works it its own .htm document when i was developing it but once I stick it in to a pre-existing page, it won't function. Thanks in advance! Similar TutorialsHello, and thanks so much in advance for any assistance you could offer. Let me start by stating that I have limited computer knowledge. I'm having problems with a drop-down menu, but if you really don't think the drop-down menu is good (I got it from somewhere else and then tweaked it through guess-and-check work), then I'll listen if you can recommend me a better one. But I'm afraid to spend the high amount of hours it would take me to switch to a different type of drop-down menu, only for someone else to tell me the new one isn't good, so please don't suggest an alternative unless you're positive it's much better. The problem with my drop-down menu is that it doesn't work well in IE9. Note that it's designed to work when you hover over an image, as opposed to over text, and I'd like to keep it this way. The problem is that only the first item on the first drop-down level appears in IE9. Or, if you're in compatibility view, everything works except the margin or padding seems to throw off the background-color highlight when you hover over with your cursor, instead of highlighting the whole item it just gives a bar of highlight at the top of the item. I'm not overly concerned about the highlighting issue, but I realize many people won't have compatibility mode on in their browsers, so it won't work for them at all. Here is the CSS code for the drop-down menu, followed by an example of it in use: Code: ul#css3menu,ul#css3menu ul{
list-style:none;border-width:0px;}
ul#css3menu ul{
display:none;position:absolute;98%;right:1px;-moz-box-shadow:0.7px 1px 1px #777777;-webkit-box-shadow:0.7px 1px 1px #777777;box-shadow:0.7px 1px 1px #777777;background-color:#FDFCDC;padding:0px 0px 0px 0px;border:1px solid #0D0D0D;}
ul#css3menu li:hover>*{
display:block;}
ul#css3menu li:hover{
position:relative;background-color:transparent;}
ul#css3menu ul ul{
position:absolute;top:-2px;right:100%;}
ul#css3menu{
display:block;font-size:0;float:left;}
ul#css3menu li{
display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu>li,ul#css3menu li{
margin:0;}
ul#css3menu ul>li{
margin:0;}
ul#css3menu a:active, ul#css3menu a:focus{
outline-style:none;}
ul#css3menu a{
display:block;text-align:right;font:bold 15px "arial narrow";color:#FF0000;background-color:#0D0D0D;border-width:0px;border-style:none;}
ul#css3menu ul li{
float:none;margin:0;}
ul#css3menu ul a{
text-align:right;padding:3px 0px 3px 0px;background-color:#0D0D0D;border-width:0px;border-style:none;font:bold 15px "arial narrow";color:#FF0000;padding-right:6px;padding-left:6px;}
ul#css3menu li:hover>a{
background-color:#FFFF99;border-style:none;font:bold 15px "arial narrow";color:#FF0000;}
ul#css3menu span{
display:block;overflow:visible;}
ul#css3menu ul li:hover>a{
background-color:#FFFF99;border-style:none;font:bold 15px "arial narrow";color:#FF0000;}
ul#css3menu._>li>a{
padding:0;}
So here is an example of the drop-down menu. This is only part of it, as the whole thing is very long. I think you can understand how it works like a tree, but let me know if you want more details. Code: <div style="position:absolute; top:53px; right:130px; z-index:6;">
<span class="menu"><ul id="css3menu">
<li class="toplast"><span><a class="noyellow" href="http://www.themetaldiscourser.com/aggregator/index.php"><img src="http://www.themetaldiscourser.com/images/menulink-aggregator-2.png" style="filter:alpha(opacity=90); opacity:0.90; width:123px; height:18px;"></a></span>
<ul>
<li><a href="#"><span><a href="http://www.themetaldiscourser.com/aggregator/business-career-and-technology-index.php">Business, career & technology</a></span></a>
<ul>
<li><a href="#"><span><a href="/aggregator/accolades.php">Accolades</a></span></a></li>
<li><a href="#"><span><a href="/aggregator/charity.php">Charity</a></span></a></li>
<li><a href="#"><span><a href="/aggregator/instructional.php">Instructional</a></span></a></li>
<li><a href="#"><span><a href="/aggregator/legal-controversy.php">Legal controversy</a></span></a></li>
<li><a href="#"><span><a href="/aggregator/miscellaneous-business-and-career.php">Miscellaneous business and career</a></span></a></li>
<li><a href="#"><span><a href="/aggregator/live-performance.php">Live performance</a></span></a>
<ul>
<li><a href="#"><span><a href="/aggregator/incidents.php">Incidents</a></span></a></li>
</ul>
</li>
<li><a href="#"><span><a href="/aggregator/marketing.php">Marketing</a></span></a></li>
<li><a href="#"><span><a href="/aggregator/popularity.php">Popularity</a></span></a></li>
<li><a href="#"><span><a href="/aggregator/technology.php">Technology</a></span></a>
<ul>
<li><a href="#"><span><a href="/aggregator/instrumentation.php">Instrumentation</a></span></a></li>
<li><a href="#"><span><a href="/aggregator/internet.php">Internet</a></span></a></li>
<li><a href="#"><span><a href="/aggregator/production.php">Production</a></span></a></li>
<li><a href="#"><span><a href="/aggregator/radio.php">Radio</a></span></a>
<ul>
<li><a href="#"><span><a href="/aggregator/internet-radio-stations.php">Internet radio stations</a></span></a></li>
</ul>
<li><a href="#"><span><a href="/aggregator/video.php">Video</a></span></a></li>
<li><a href="#"><span><a href="/aggregator/video-games.php">Video games</a></span></a></li>
</ul>
</li>
<li><a href="#"><span><a href="/aggregator/stores.php">Stores</a></span></a>
<ul>
<li><a href="#"><span><a href="/aggregator/store-reviews.php">Store reviews</a></span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><span><a href="http://www.themetaldiscourser.com/aggregator/genre-qualification-and-discourse-index.php">Genre qualification & discourse</a></span></a>
<ul>
<li><a href="#"><span><a href="/aggregator/academia.php">Academia</a></span></a>
I then bring in this drop-down menu on every page with: Code: <?php include("header.html"); ?>
I'm really so grateful for any suggestions. I recall the drop-down menu had problems in earlier versions of IE, which I managed to fix thanks to the help of others, so I though the problems were settled. I definitely don't have enough knowledge to fix this on my own, but if you truly believe I should switch to a new type of drop-down menu then I'm very willing to take your advice about that and put in the work. Ideally I already have a good drop-down menu that just needs to be tweaked, but hey, who knows. PS - I do have this at the top of my page, which in similar situations I see is often cited as being the problem if it's missing: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Hi, I'm totally new to css so all help appreciated First, here's my site: www. hornet .edu .hk /dev As you can probably see, I'm trying to edit a template for joomla. The drop down menu for 'Test 1' is split up, so once I hover beyond 'Sub Test 1' the menu disappears. I want my submenu items to stick together so that it'll work, but I don't know where to start. can anyone help? thanks! templace.css: /*****************************/ /*** Core html setup stuff ***/ /*****************************/ html { height: 100%; margin-bottom: 1px; } form { display:inline; } body { margin: 0px 0px 0px 0px; width: 100%; display: table; background:url(../images/bg_page.png) #DDDDDD top repeat-y; } body, td{ font-family: "Trebuchet MS"; font-size: 13px; color: #000; line-height: 1.3em; } a:link, a:visited { text-decoration: none; font-weight: normal; } a:hover { text-decoration: underline; font-weight: normal; } input.button { cursor: pointer; } input.inputbox{ background:#FFF; font-size: 11px; color: #000; border: 1px solid #DBDBDB; height: 17px; padding:2px; -webkit-border-radius: 4px; -moz-border-radius: 4px; } p { margin-top: 0; margin-bottom: 5px; } img { border: 0 none; margin:0px; } /*****************************************/ /*** Template specific layout elements ***/ /*****************************************/ #page_bg { padding: 0px; margin: 0px; } div#top_menu{ height:54px; margin:0px auto; width: 980px; } #topnav{ height: 54px; width:980px; margin: 0px; padding:0px; margin-top:8px; font-weight: bold; text-transform:uppercase; } #topnav ul { margin: 0px; padding: 0px 20px; width: auto; float: left; list-style-type:none; } #topnav ul li{ margin: 0px; padding: 0px; height: 42px; float: left; position: relative; margin-top:7px; margin-left:7px; } #topnav ul li a{ color: #000; font-weight: bold; text-decoration: none; padding: 0px 12px 0px 12px; height:42px; line-height:35px; display: block; float: left; -webkit-border-radius-topright: 8px; -webkit-border-radius-topleft: 8px; -moz-border-radius-topright: 8px; -moz-border-radius-topleft: 8px; } #topnav ul li a:hover{ background-color: #444444; text-decoration: none; font-weight: bold; color: #fff; } #topnav ul li ul ul { margin: -50px 0 0 297px; z-index: 100; } #topnav ul li li { width:auto; height: 30px; margin-left:0px; -webkit-border-radius: 8px; -moz-border-radius: 8px;} #topnav ul li li a { color: #FFFFFF; text-transform: none; display: block; background: none; width: 277px; border-left: 0px; padding: 0px 10px 0px 10px; height:30px; line-height:30px; -webkit-border-radius: 8px; -moz-border-radius: 8px; } #topnav ul li li a:hover{ background: none; background-color: #FFFFFF; left: 0; width: 277px; padding: 0px 10px 0px 10px; height:30px; } #topnav ul li ul { left: -999em; top: 26px; left: 0; display: block; height: 36px; width: 277px; position: absolute; z-index: 99; left: -999em; clear: left; margin-top: 0px; margin-left: 0px; padding-left:0px; } #topnav ul li:hover ul ul, #topnav ul li:hover ul ul ul { left: -999em; } #topnav ul li:hover ul, #topnav ul li li:hover ul, #topnav ul li li li:hover ul { left: auto; } #topnav ul.menu li{ background-image:none; } div#main_bg{ margin:0px auto; width: 980px; text-align:left; } div#h_area{ margin:0px auto; width: 980px; height:559px; text-align:left; padding-top:10px; } div#h_area img{ margin-left:14px; } .logo{ display: block; float:left; padding-top:5px; margin-bottom:10px; margin-left:10px; width:520px; } a.logo,a.logo:link,a.logo:hover, a.logo:visited{ font-size:37px; line-height: 58px; color:#000; text-decoration:none; font-weight:normal; font-family: "Trebuchet MS"; } div#position0{ float:right; text-align:left; margin-right: 20px; margin-top: 10px; } div#position0 div.search{ width: 222px; height:46px; text-align:left; background: url(../images/search_bg.gif) top left no-repeat; } div#position0 div.search .inputbox { background:#FFF; width: 156px; height: 17px; font-size: 11px; color: #000; margin:10px 0px 0px 50px; border: 1px solid #DBDBDB; padding:5px 2px 2px 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; } div#position0 label{ display:none; /* joomla 1.6 update */ } #leftcolumn{ margin-left:9px; padding:0px; width:205px; float:left; } #rightcolumn{ margin-right:9px; padding:0px; width:205px; float:right; } #maincolumn{ width:520px; float:left; margin:0px 10px 0px 10px; padding:0px; overflow:hidden; } #maincolumn_middle{ width: 730px; float:left; margin:0px 10px 0px 10px; padding:0px; overflow:hidden; } #maincolumn_big{ width: 957px; float:left; margin:0px 10px 0px 10px; padding:0px; overflow:hidden; } div.path{ margin:10px 0 0 0px; padding: 5px; padding-left:30px; background:url(../images/breadcrumbs_bg.png) top left no-repeat; } div.nopad { float:left; padding:0 0px 15px 0px; } div.nopad ul { clear: both; } /*joomla 1.6 update start */ .item-separator { height:10px; line-height:10px; } .items-more { border:1px solid #0F0; } table.category{ border:1px solid #CCC; width:100%; text-align:center; } table.category th,table.category td{ padding:2px 6px; } table.category thead{ background:#EEE; } .jcat-children ul,.jcat-children li{ margin:0; list-style:none; } .jcat-children li a{ background:url(../images/bullet_green_arrow.png) no-repeat 0 12px; display:block; padding:5px 5px 5px 15px; font-size:0.9em; } .image-left { float:left; margin:0 15px 5px 0; } /*joomla 1.6 update end */ #leftcolumn div.moduletable_menu, #leftcolumn div.moduletable_menu, #leftcolumn div.moduletable, /* joomla 1.6 update */ #leftcolumn div.module_menu, #leftcolumn div.module{ margin: 10px 0px 0px 0px; padding:0px; width: 205px; } .article_column { padding-right:10px; } #rightcolumn div.moduletable_menu, #rightcolumn div.moduletable, #rightcolumn div.moduletable_text{ margin: 10px 0px 0px 0px; padding: 0px 0px 3px 0px; width: 205px; } div.bannergroup_text { margin:0px 13px 15px 13px; } .bannerheader { font-weight:bold; margin-bottom:10px; } .banneritem_text { margin-bottom:10px; } .bannerfooter_text { margin-bottom:10px; } #leftcolumn div.module_menu, #rightcolumn div.module_menu, /* joomla 1.6 update */ #leftcolumn div.moduletable, #rightcolumn div.moduletable, /* joomla 1.6 update */ #leftcolumn div.moduletable_menu, #rightcolumn div.moduletable_menu, /* joomla 1.6 update */ #leftcolumn div.module_menu div div div, #leftcolumn div.module div div div, #rightcolumn div.moduletable_menu, #rightcolumn div.moduletable, #rightcolumn div.moduletable_text{ background: url(../images/rub_bottom.png) center bottom no-repeat; } #leftcolumn div.module_menu div div div, #leftcolumn div.module div div{ margin: 0px; padding: 0px; padding-bottom:5px; width: 205px; height:auto; } #leftcolumn div.module_menu div div div div, #leftcolumn div.module div div div div{ background: none; padding:4px 8px; } #leftcolumn h3, #rightcolumn h3{ text-align: left; padding-left:15px; height: 42px; width: 190px; line-height: 40px; color:#FFFFFF; font-size:19px; margin:0px; font-weight:normal; text-shadow: #1F1616 1px 1px 1px; } table.poll thead td { text-align: left; padding-left:10px; } table.poll td { text-align: left; } #leftcolumn ul.menu li ul{ list-style: none; } .pollstableborder { margin: 5px 0px 10px 0px; } .poll td div{ display:inline; } /* forms #leftcolumn .moduletable ul, #rightcolumn .moduletable ul { margin: 6px 0; list-style: none; } #leftcolumn .moduletable ul li, #rightcolumn .moduletable ul li { margin: 0; padding: 0 2px; } .moduletable ul { padding:5px 10px 5px 12px; margin:0px; } .moduletable ul li { padding:0px 10px 5px 15px; margin:0px; line-height:18px; }*/ #leftcolumn ul.menu li#current ul li, #rightcolumn ul.menu li#current ul li { margin: 0px; padding: 0px; } ul.menu { padding:5px 10px 5px 12px; margin:0px; } ul.menu li{ padding:0px 10px 5px 15px; margin:0px; } ul.menu li ul { padding:0px 0px 5px 0px; margin:0px; } ul.menu li ul li{ padding:0px 0px 0px 15px; border:none; } ul.menu li#current ul li a{ margin-left:15px; text-decoration:none; } ul.mostread { padding:5px 10px 5px 12px; margin:0px; } ul.mostread li{ padding:0px 10px 5px 15px; margin:0px; line-height:18px; } ul.latestnews, ul.weblinks { padding:5px 10px 5px 12px; margin:0px; } ul.latestnews li, ul.weblinks li{ padding:0px 10px 5px 15px; margin:0px; line-height:18px; } div.componentheading{ font-size:16px; font-size:19px; margin:7px auto; } td.contentheading{ font-weight:normal; vertical-align:top; font-size:19px; height:30px; color:#363636; background: url(../images/contentheading_ico.png) left top no-repeat; } table.contentpaneopen td.contentheading{ padding-left:34px; } table.contentpaneopen{ border-collapse: collapse; margin-left:5px; } td.buttonheading{ padding:0px 2px 0px 2px; } table.contentpaneopen td{ padding:0px; } .contentpaneopen p{ line-height:22px; } span.small, td.createdate, td.modifydate{ font-size:11px; color:#999999; } span.pagination span, span.pagination a{ padding:5px; } form#login-form { /* joomla 1.6 update */ padding: 0px; margin: 0px; } fieldset.userdata { /* joomla 1.6 update */ border: none; margin: 0px; padding:10px 10px 10px 20px; } form#login-form ul { /* joomla 1.6 update */ margin:0px 0px 20px 0px; width:120px; } form#login-form ul li{ /* joomla 1.6 update */ padding: 0px; margin: 0px; list-style: disc; background-image:none; } form#login-form ul li a { /* joomla 1.6 update */ text-align: left; font-size: 10px; color: #858585; } #login-form #modlgn-username, #login-form #modlgn-passwd{ width:150px; } div#bottom { width:100%; margin:0px auto; background:#000000; float:left; } div#f_area{ background:#757575; margin:0px auto; width: 960px; text-align:left; margin-bottom:3px; } #f_area div.newsflash { color:#FFF; padding:5px 10px; } #f_area div.moduletable, #f_area div.moduletable_menu{ float: left; margin:10px 5px 10px 5px; width: 309px; } #f_area h3{ text-align: left; vertical-align:bottom; height: 35px; width: 294px; color:#FFFFFF; font-size:21px; font-family:"Trebuchet MS", Tahoma, Verdana; font-weight:normal; margin:0px; padding-left: 10px; padding-top:15px; } /* joomla 1.6 update start */ /* pagenav */ #main ul.pagenav { list-style-type:none; padding:0; overflow:hidden } ul.pagenav li { display:inline-block; padding:0px; margin:0; } #main ul.pagenav li { line-height:2em } ul.pagenav li a { border: 1px solid #ccc; display:inline; background:#eee; padding:2px; text-decoration:none } ul.pagenav li.pagenav-prev { float:left } ul.pagenav li.pagenav-next { float:right } .article-info { margin:10px 0 10px 0px; font-size:0.9em; } .article-info-term { display:none } /* ++++++++++++++ icons ++++++++++++++ */ ul.actions { text-align:right; padding:0 ; width:100%; margin:0 } ul.actions li { display:inline } ul.actions a { text-decoration:none } /* ++++++++++++++ items more ++++++++++++++ */ .items-more { padding-top:10px; } .items-more h3 { font-weight:normal; margin:0; padding:5px 5px 5px 5px; font-size:1.4em } .items-more ol { line-height:1.3em; list-style-type:none; margin:0; padding:10px 0 10px 2px; } .items-more ol li { padding:2px; } .items-more ol li a { display:inline; margin:0; font-weight:normal; padding:5px 5px 5px 20px; } .items-more ol li a:hover, .items-more ol li a:active, .items-more ol li a:focus { font-weight:normal; padding:5px 5px 5px 20px; text-decoration:none } /* ++++++++++++++ pagination ++++++++++++++ */ #main .pagination { margin:10px 0 ; padding:10px 0 10px 0px; } #main .pagination ul { list-style-type:none; margin:0; padding:0; text-align:left; } #main .pagination li { display:inline; padding:2px 5px; text-align:left; border:solid 0px #eee; margin:0 2px } .pagenav {padding:2px} #main .pagination li.pagination-start, #main .pagination li.pagination-next, #main .pagination li.pagination-end, #main .pagination li.pagination-prev {border:0} #main .pagination li.pagination-start , #main .pagination li.pagination-start span { padding:0 } p.counter { font-weight:bold; } /* ++++++++++++++ blog ++++++++++++++ */ .cols-1 { display: block; float: none !important; margin: 0 !important; } .cols-2 .column-1 { width:46%; float:left; } .cols-2 .column-2 { width:46%; float:right; margin:0 } .cols-3 .column-1 { float:left; width:46%; padding:0px 5px; margin-right:4% } .cols-3 .column-2 { float:right; width:46%; margin-left:0; padding:0px 5px } .cols-3 .column-3 { float:left; width:100%; padding:0px 5px } .items-row { overflow:hidden; margin-bottom:10px !important; } .column-1, .column-2, .column-3 { padding:10px 5px } .column-2 { width:55%; margin-left:40%; } .column-3 { width:30% } .blog-more { padding:10px 5px } /* ++++++++++++++ readmore ++++++++++++++ */ .readmore a:link,.readmore a:visited,a.readmo link,a.readmo visited { color: #ccc; background: #222; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border: none; padding:4px 8px; margin-top:10px; } .readmore a:hover,.readmore a:active,.readmore a:focus,a.readmore a:hover,a.readmore a:active,a.readmore a:focus { background: #333; color: #fff; } a.readmo hover,a.readmo active,a.readmo focus { background: #333; color: #fff; } /* joomla 1.6 update end */ /* System Standard Messages */ #system-message { margin-bottom: 20px; } #system-message dd.message ul { background: #C3D2E5 url(../../system/images/notice-info.png) 4px center no-repeat;} /* System Error Messages */ #system-message dd.error ul { color: #c00; background: #E6C0C0 url(../../system/images/notice-alert.png) 4px center no-repeat; border-top: 3px solid #DE7A7B; border-bottom: 3px solid #DE7A7B; margin:0px; padding-left: 40px; text-indent:0px;} /* System Notice Messages */ #system-message dd.notice ul { color: #c00; background: #EFE7B8 url(../../system/images/notice-note.png) 4px center no-repeat; border-top: 3px solid #F0DC7E; border-bottom: 3px solid #F0DC7E;} #syndicate{ float:left; padding-left: 25px; } /* --- slider --- */ #slider{ width: 960px; height:415px; margin-top:5px; margin-left:10px; background:url(../images/loading.gif) no-repeat 50% 50%; } #slider img { position:absolute; top:0px; left:0px; display:none; } #slider a { border:0; display:block; } .nivo-controlNav { position:absolute; left:860px; bottom:10px; } .nivo-controlNav a { display:block; width:22px; height:22px; background:url(../images/bullets.png) no-repeat; text-indent:-9999px; border:0; margin-right:3px; float:left; } .nivo-controlNav a.active { background-position:0 -22px; } .nivo-directionNav a { display:block; width:30px; height:30px; background:url(../images/arrows.png) no-repeat; text-indent:-9999px; border:0; } a.nivo-nextNav { background-position:-30px 0; right:15px; } a.nivo-prevNav { left:15px; } .nivo-caption { text-shadow:none; font-family: Helvetica, Arial, sans-serif; } .nivo-caption a { color:#efe9d1; text-decoration:underline; } /* --- end slider --- */ I dont understand what I am missing, the menu is suppose to be a drop down menu (and suppose to be horizontal, but i havent got that far yet) but its not dropping, its displaying everything? I would appreciate any help on making it work correctly, thanks much! -Sean nav_style.css file: Code: body {
font-family: Arial, Helvetica, sans-serif;
}
#nav {
width: 200px;
font-family: Arial, Helvetica, Sans-serif;
}
#nav ul {
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
border-bottom: 1px solid #ed9f9f;
}
#nav li a:link, #nav li a:visited {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 12px solid #711515;
border-right: 1px solid #711515;
background-color: #b51031;
color: #ffffff;
text-decoration: none;
}
#nav li a:hover {
background-color: #711515;
color: #ffffff;
}
#nav ul ul {
margin-left; 12px;
}
#nav ul ul li {
border-bottom: 1px solid #711515;
color: #ffffff;
}
#nav ul ul a:link, #nav ul ul a:visited {
background-color: #ed9f9f;
color: #711515;
}
#nav ul ul a:hover {
background-color: #711515;
color: #ffffff;
}
and here is the head_nav.php file: Code: <?php echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?".">"; ?> <!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"> <head> <title>?</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="css_inc/nav_style.css" /> </head> <body> <div id="nav"> <ul> <li><a href="#">Services</a> <ul> <li><a href="#">Cinematography</a></li> <li><a href="#">Photography</a></li> </ul> </li> <li><a href="#">Video</a> <ul> <li><a href="#">Demo Reel</a></li> <li><a href="#">Music Video</a></li> <li><a href="#">Commercial</a></li> </ul> </li> <li><a href="#">Photo Gallery</a></li> <li><a href="#">About Valliant</a> <ul> <li><a href="#">Biography</a></li> <li><a href="#">Resume</a></li> <li><a href="#">Contact</a></li> </ul> </li> <li><a href="#">Links</a></li> <li><a href="#">Home</a></li> </ul> </div> </body> </html> I am really stuck on this, can someone guide me to a tutorial or a working double row menu bar that works for both IE and Firefox. I have made several attempts on Spry and CSS but to no avail and no-one has been able to rectify it. Theres always something not going right on both browsers with the double row drop down menu bars I have attempted. The double row drop down menu bar looks like this: [menu1][menu2][menu3] [menu4][menu5][menu6] ............................[menu6a] ............................[menu6b] 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;
}
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. 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 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! 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. 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 The code is here on an old Proboards test site: http://kayaoti.proboards.com/index.cgi The menu in the black bar is just one I used from a free code. It works fine except when you hover over the items, the drop-down tabs are out of alignment. I'm not code-savvy enough to know how to make them drop straight down or how to move them so they look nicer, but I'm guessing someone here could help me out in that regard. How can I edit the code (shown below) or whatever else to make the drop-down tabs look better aligned with the menu items? Code: <style type="text/css" media="screen"> /**************** menu coding *****************/ #menu { width: 748px; background: #000; float: left; } #menu ul { list-style: none; margin: 0; padding: 0; width: 12em; float: left; } #menu h2 { color: #000; background: #000; text-transform: uppercase; } #menu a, #menu h2 { font: bold 11px/16px arial, helvetica, sans-serif; display: block; border-width: 1px; border-style: solid; border-color: #000 #000 #000 #000; margin: 0; padding: 2px 3px; } #menu a { color: #fff; background: #000000; text-decoration: none; } #menu a:hover { color: #fff; background: #000; } #menu li {position: relative;} #menu ul ul { position: absolute; z-index: 500; } #menu ul ul ul { position: absolute; top: 0; left: 100%; } div#menu ul ul, div#menu ul li:hover ul ul, div#menu ul ul li:hover ul ul {display: none;} div#menu ul li:hover ul, div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul {display: block;} </style> <!--[if IE]> <style type="text/css" media="screen"> #menu ul li {float: left; width: 100%;} </style> <![endif]--> <!--[if lt IE 7]> <style type="text/css" media="screen"> body { behavior: url(csshover.htc); font-size: 100%; } #menu ul li a {height: 1%;} #menu a, #menu h2 { font: bold 0.7em/1.4em arial, helvetica, sans-serif; } </style> <![endif]--> <div id="menu" style="position:relative; left:301px; top:483px;"> <ul><li><a href="http://dominionwolves.proboards.com/"><IMG SRC="http://i44.tinypic.com/24zb1vq.png" border="0"></a></li></ul> <ul><li><IMG SRC="http://i43.tinypic.com/311lyra.png" style="position:relative; left:-40px; top:2px;"> <ul> <li><a href="http://www.seoconsultants.com/tips/css/#cssmenus">CSS Hover Navigation</a> <ul> <li><a href="../css-dropdown-menus.html" title="tanfa Introduction">Intro for CSS Enthusiasts</a></li> <li><a href="index.html" title="Plain HTML Code">Demonstration HTML</a></li> <li><a href="http://www.xs4all.nl/~peterned/csshover.html" title="whatever:hover file">csshover.htc file</a></li> </ul> </li> </ul> </li> </ul> <ul> <li><IMG SRC="http://i39.tinypic.com/2cne1d5.png" style="position:relative; left:0px; top:2px;"> <ul> <li><a href="http://www.seoconsultants.com/tips/css/#cssmenus" title="SEO Consultants Directory">CSS Hover Navigation</a> <ul> <li><a href="../css-dropdown-menus.html" title="tanfa Introduction">Intro for CSS Enthusiasts</a></li> <li><a href="index.html" title="Plain HTML Code">Demonstration HTML</a></li> <li><a href="http://www.xs4all.nl/~peterned/csshover.html" title="whatever:hover file">csshover.htc file</a></li> </ul> </li> </ul> </li> </ul> <ul> <li><IMG SRC="http://i40.tinypic.com/24ffxu1.png" style="position:relative; left:55px; top:2px;"> <ul> <li><a href="http://www.seoconsultants.com/css/menus/vertical/" title="SEO Consultants Vertical Example">SEO Consultants Sample</a></li> <li><a href="vs7.html" title="Complete Example">tanfa Demo example</a> <ul> <li><a href="tutorial-v.html" title="Vertical Menu Tutorial">tanfa Tutorial</a> <ul> <li><a href="vs1.html" title="Vertical Menu - Page 1">Stage 1</a></li> <li><a href="vs2.html" title="Vertical Menu - Page 2">Stage 2</a></li> <li><a href="vs3.html" title="Vertical Menu - Page 3">Stage 3</a></li> <li><a href="vs4.html" title="Vertical Menu - Page 4">Stage 4</a></li> <li><a href="vs5.html" title="Vertical Menu - Page 5">Stage 5</a></li> <li><a href="vs6.html" title="Vertical Menu - Page 6">Stage 6</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> <ul> <li><IMG SRC="http://i42.tinypic.com/15cerno.png" style="position:relative; left:65px; top:2px;"> <ul> <li><a href="http://www.seoconsultants.com/css/menus/horizontal/" title="SEO Consultants Directory Example">SEO Consultants Sample</a></li> <li><a href="hs7.html">tanfa Demo example</a><!-- fully working sample --> <ul> <li><a href="tutorial-h.html" title="Horizontal Menu Tutorial">tanfa Tutorial</a> <ul> <li><a href="hs1.html" title="Horizontal Menu - Page 1">Stage 1</a></li> <li><a href="hs2.html" title="Horizontal Menu - Page 2">Stage 2</a></li> <li><a href="hs3.html" title="Horizontal Menu - Page 3">Stage 3</a></li> <li><a href="hs4.html" title="Horizontal Menu - Page 4">Stage 4</a></li> <li><a href="hs5.html" title="Horizontal Menu - Page 5">Stage 5</a></li> <li><a href="hs6.html" title="Horizontal Menu - Page 6">Stage 6</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </div>
Hi I have the following script is from http://tiernok.com/tt/dropdown/styles/caffeine.css and http://www.htmldog.com/articles/suckerfish/ that I am trying to modify. It runs fine both in IE and Netscape but look and feel is what I am trying to make it work. Here is the issue I am facing and have tried but couldn't figure it out 1. In IE when hovering over Services And Implementation there's too much gap between Services And Implementation and History1Histy1 as in FireFox it comes out fine but everything is overlapped. Want to have less gap between menu and sub-menu. 2. How can I increase the width for the menus and sub menus, as I want to fit everything in table width of 586. Code:
<html>
<head>
<title> Caffeinated Dropdowns </title>
<STYLE>
/**************************** Editable Pretty Stuff *****************/
/* Modification of the .ddMenu li item will require modification */
/* of the .ddVert width as well
/********************************************************************/
/* Menu List Items */
.ddMenu li{
width: 117px;
height: 20px;
background: #9C2B01;
color: #616F81;
font-weight: bold;
}
.ddMenu .top_lvl .mnu_foot{
background-color: #9C2B01;
height: 2px;
border-bottom: 1px solid #616F81;
width: 117px;
}
.ddMenu .top_lvl .mnu_head{
/* used to space from the top menu without losinghover focus */
border: 0px;
height: 1px;
background-color: #9C2B01;
width: 117px;
}
.ddMenu .top_lvl li{
background: #9C2B01;
border-right: 0px solid #dddddd
}
.ddHoriz .mnu_head, .ddHoriz .mnu_foot{
width: 1px;
}
.ddHoriz .mnu_foot{
display: none;
}
.ddVert li{
background-color: yellow;
}
.ddVert .top_lvl{
padding: 15px 0 15px 0;
border-bottom: 1px solid #616F81;
}
ul.ddVert li.mnu_foot, ul.ddVert li.mnu_head{
background-color: #9C2B01;
}
/* Menu List Items Hover */
.ddMenu li.sfhover, .ddMenu li:hover{
background-color: green;
color: #816A61;
z-index: 5;
cursor: default;
}
.ddMenu a:link { text-decoration: none; color: white }
.ddMenu a:visited { text-decoration: none; color: white }
.ddMenu a:hover { text-decoration: none; color: white }
/**************************** Required CSS **************************/
.ddMenu, .ddMenu ul { /**** all lists ****/
list-style: none; /* list style for menus */
margin: 0px; /* get rid of built-in margin */
padding: 0px; /* get rid of built-in padding */
display: block; /* display as block elements */
}
.ddMenu li{ /**** all list items ****/
float: left; /* float list items */
position: relative; /* position relative to siblings */
}
.ddMenu li a{ /**** all anchors in list items ****/
display: block; /* make anchor tags block tags */
width: 100%; /* 98% width to compensate for any borders
/* that get added without obviously stealing
/* hover space from user */
}
.ddMenu li ul{ /**** positioning for sub-menus ****/
position: absolute; /* position */
display: none; /* hide submenus */
}
.ddMenu li.sfhover ul.ulhover{ /**** show immediate submenu for IE ****/
display: block;
}
.ddMenu li:hover>ul{ /**** Show immediate submenu for compliant browsers ****/
display: block;
}
/**************************** Horizantal ***************************/
/* Sub-Menus need to drop down, Sub-Sub-Menus need to fly out to */
/* the right in a horizantal view */
ul.ddHoriz ul ul{
left: 100%;
top: 0;
}
.ddHoriz li ul{
top: 1.2em;
left: 0px;
}
/**************************** Vertical *****************************/
/* Menu needs a fixed width in vertical view to cause wrapping and */
/* sub-menus fly to the right by default */
.ddVert, .ddVert ul{
width: 10em;
}
.ddVert li ul{
top: 0px;
left: 100%;
}
</STYLE>
<script language="JavaScript" type="text/javascript"><!--//--><![CDATA[//><!--
//--- This script is heavily based upon the one published as part of the SuckerFish dropdown method.
//--- For more information, please visit: http://www.htmldog.com/articles/suckerfish/
ddHover = function() {
var ddMs = document.getElementsByTagName("UL");
for ( var t=0; t<ddMs.length;t++){
if(ddMs[t].className.indexOf("ddMenu") > -1){
var ddSMs = ddMs[t].getElementsByTagName("LI");
for (var i=0; i<ddSMs.length; i++) {
ddSMs[i].onmouseover = function(){
var ddsm = this.getElementsByTagName("UL")[0];
this.className+=" sfhover";
if(ddsm != null){ ddsm.className+= " ulhover"; }}
ddSMs[i].onmouseout = function(){
var ddsm = this.getElementsByTagName("UL")[0];
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
if(ddsm != null){ ddsm.className = ddsm.className.replace(new RegExp(" ulhover\\b"), ""); }
}
}
}
}
}
if (window.attachEvent) window.attachEvent("onload", ddHover)
//--><!]]></script>
</head>
<body>
<TABLE width="586" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#9C2B01">
<TR><TD height="28" valign="center" bgcolor="#9C2B01" align="center">
<ul class="ddMenu ddHoriz">
<li class="mnu_head"></li>
<li class="top_lvl"><a href="" title="History of Chocolate">Customer Inform</a></li>
<li class="top_lvl"><font color="white">Services And Implementation</font>
<ul>
<li class="mnu_head"></li>
<li><a href="" title="The History of Tea">History1Histy1</a></li>
<li><a href="" title="The History of Tea">Services And Implementation History</a></li>
<li><a href="" title="The History of Tea">History3</a></li>
<li><a href="" title="The History of Tea">History4</a></li>
<li><a href="" title="The History of Tea">History5</a></li>
<li><a href="" title="The History of Tea">History6</a></li>
<li><a href="" title="The History of Tea">History7</a></li>
<li><a href="" title="The History of Tea">History8</a></li>
<li><a href="" title="The History of Tea">History9</a></li>
<li class="mnu_foot"></li>
</ul>
</li>
<li class="top_lvl"><a href="" title="History of Chocolate">About Us</a></li>
<li class="top_lvl"><a href="" title="History of Chocolate">Foreign Affiliation</a></li>
<li class="top_lvl"><a href="" title="History of Chocolate">Contact Us</a></li>
<li class="mnu_foot"></li>
</ul>
</TD></TR></TABLE>
</body>
</html>
Any help is appreciated. Thanks 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>
First let me start of with this for doing all this work for my drop down menu and then finding out that IE6 (apparently 50% of people browsing) doesn't support :hover except on anchor tags. Here is my situation. I finally got my drop down menu working. However, there are three issues. when I hover over the 'companies' menu item 1) the menu expands and pushes the 'blog' and 'contact' menu items further down the menu. I will say that I did not define a width on the li tags because this is actually for a wordpress theme and I wanted to allow for more pages that might be added later. I thought that by defining a width I would be more likely to fill up my menu container. 2) the child/nested li tags aren't under the parent li tag. Basically the sub-menu items show up to the bottom and right of the 'companies' menu item. I want them to show up directly underneath the parent menu item. 3) the longer sub-menu items (nested li tags) are not showing up on the same line. It's like there is a width that is causing them to overlap or go down to the next row. Not sure if that makes sense. I am wanting it to appear on one line no matter how long the menu item is. I am sure that not defining a width on the li tags have something to do with some of these problems but I wanted others to take a look at it. Code(validated) and styles below. Tried to keep it simple. there are two img files that I use as well but couldn't figure out how to upload those. Any and all help from the CSS gurus will be greatly appreciated. Code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Drop Menu Test</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="access">
<div id="menu-container">
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Compare</a></li>
<li><a href="#">Companies</a>
<ul>
<li><a href="#">Company number one</a></li>
<li><a href="#">Company 2</a></li>
<li><a href="#">Company #3</a></li>
<li><a href="#">Company number 4</a></li>
</ul>
</li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!--menu-->
</div><!--menu-container-->
</div><!--access-->
</body>
</html>
Code: body{
background-color: #999;
margin: 0;
}
ul,li {
margin: 0;
}
div#access {
margin: 0px;
background-repeat: repeat-x;
background-image: url(images/navbar-bckgrd.gif);
}
div#menu {
height:1.5em;
width:100%;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}
div#menu a {
color: #FFF;
text-decoration: none;
}
div#menu-container {
width: 974px;
margin-right: auto;
margin-left: auto;
height: 27px;
margin-top: 0px;
margin-bottom: 0px;
}
div#menu li {
list-style-type: none;
color: #FFF;
position: relative;
float: left;
height: 27px;
/*width: 6em;*/
font-size: 1.2em;
line-height: 1em;
}
div#menu ul a {
display:block;
margin-right:1em;
padding:0.2em 0.5em;
}
div#menu li a:hover {
background-image: url(images/hover%20menu.jpg);
background-repeat: repeat-x;
}
/*second teir*/
div#menu li ul {
display: none;
background-repeat: repeat;
background-color: #CCC;
margin: 0px;
}
div#menu li:hover ul {
display: inline;
float: left;
width: 10em;
height: auto;
}
div#menu li ul li {
font-size: 0.9em;
width: 7em;
margin-left: 0px;
}
div#menu li ul li a {
color: #000;
margin-left: 0px;
}
div#menu li ul li a:hover {
color: #FFF;
}
How easy is it to create one of these where when you hover over a link a menu appears underneath? I'm playing around with CSS for the first time and have created a drop down menu that I would like to use for a site I have so any help would be greatly appreciated!!! I've placed the menu on its own page at h t t p : / / aztechnogeek . somee . com / cssmenu . html for accurate coding (just view source). - sorry as a new user I guess I can't post hyperlinks. What I would like to know how to do is when the cursor is moved down a menu list why the top hover attribute does not stay active??? Confusing I know but when you see the working menu you'll understand - I hope. Any help would be great, thank you!!! an oxymoron i know it is... but i need my css menu to not drop down, but rather drop up, setting the tag to a negative top: value isnt working either, as not all the pop-up menu's used are the same height. Any suggestions, or tutorials that you know of? 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;
}
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? |
|||||||