|
CSS - Need Help With Nested List As A Drop Down Menu
I have read more tutorials on list than I care to recall and still I am having difficulties getting this to work right.
Here is the web page The top navigation bar has a link "Other regions". I want to have a drop down list of the other regions under it. I nested a list under the "Other regions" li. It is working - sort of but not correctly. The nested list is showing up under "home" and the are all on top of each other. Here is the html: Code: <div id="topbar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about_us/about_us.html">About Us</a></li>
<li class="dropmenu"><a href="other_regions.html">Other Regions</a>
<ul>
<li><a href="#">Ireland</a></li>
<li><a href="#">Germany</a></li>
<li><a href="#">USA (North America)</a></li>
<li><a href="#">Latin America</a></li>
<li><a href="#">Other</a></li>
</ul>
</li>
</ul>
</div>
Here is the css: Code: #topbar {
height: 20px;
background-color: #3399FF;
border: 1px solid #000099;
padding-left: 10px;
margin-bottom: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#topbar a:link, #topbar a:visited {
color: #FFFFFF;
background-color: transparent;
border: 1px solid #3399FF;
width: 100px;
padding: 1px 2px 1px 2px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}
#topbar a:hover, #topbar a:active {
color: #000099;
background-color: #DDEEFF;
border: 1px solid #000099;
width: 100px;
padding: 1px 2px 1px 2px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}
#topbar ul {
list-style: none;
margin: 1px 0px 1px 0px;
padding: 2px 0px 0px 0px;
}
#topbar li {
display: inline;
margin-right: 150px;
}
.dropmenu ul {
position: relative;
}
.dropmenu li {
position: absolute;
}
.dropmenu a:link, .dropmenu a:visited {
color: #000000;
background-color: transparent;
border: 1px solid #FF00FF;
width: 100px;
padding: 1px 2px 1px 2px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}
.dropmenu a:hover, .dropmenu a:active {
color: #000099;
background-color: #DDEEFF;
border: 1px solid #000099;
width: 100px;
padding: 1px 2px 1px 2px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}
.dropmenu li:hover ul { display: block; }
/*Main Section two columns under top section*/
#wrapper{
width: 100%;
min-height: 519px;
background: url(../images/bgcol.gif) repeat-y;
padding: 0px;
margin: 0px;
}
Help please Similar TutorialsHi I have a vertical menu containing main and subcategories. subcats are hidden, when a main cat is clicked then subcats are displayed, all is done with css no javascript. here is the structure, Code:
<ul id="nav">
<li class="level item-1 nav-clothes active parent">
<a href="/clothes.html"><span>Clothes</span></a>
<ol class="level item-1">
<li class="level1 nav-clothes-shirts">
<a href="/clothes/shirts.html"><span>Shirts</span></a>
</li>
<li class="level1 nav-clothes-tanks">
<a href="/clothes/tanks.html"><span>Tanks</span></a>
</li>
<li class="level1 nav-clothes-raincoats">
<a href="/clothes/raincoats.html"><span>Raincoats</span></a>
</li>
<li class="level1 nav-clothes-dresses">
<a href="/clothes/dresses.html"><span>Dresses</span></a>
</li>
<li class="level1 nav-clothes-swimsuits">
<a href="/clothes/swimsuits.html"><span>Swimsuits</span></a>
</li>
<li class="level1 nav-clothes-outerwear last">
<a href="/outerwear.html"><span>Outerwear</span></a>
</li>
</ol></li>
<li class="level item-2 nav-beds parent">
<a href="/beds.html"><span>Beds</span></a>
here is my all related css, external css file, Code:
#nav { font-size:13.5px; color:#000; padding:0 0 0 0; margin:-20px 0 0 0; width:100%;}
/* All Levels */
#nav li { text-align:left; }
#nav li.over { z-index:999; }
#nav a,
#nav a:hover { display:block; line-height:1.3em; text-decoration:none; }
#nav span { display:block; cursor:pointer; white-space:nowrap; }
#nav li ul span {white-space:normal; }
#nav li li.parent {}
/* 0 Level */
#nav li { clear:both; position:relative; display:block; }
#nav li.active a { color:#000; text-decoration:underline; }
#nav a { float:left; padding:2px 14px 11px 0px; color:#000; font-weight:bold; }
#nav li.over a,
#nav a:hover { color:#000; text-decoration:underline; }
#nav .item-1 ul a { background:url(../images/arr_sub_menu.gif) 0 9px no-repeat; padding:0 0 0 0; color:#1A1616;}
#nav .item-2 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-3 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-4 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-5 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-6 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-7 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-8 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-9 ul a {padding:0 0 0 0; color:#1A1616;}
#nav ul li a { padding:0 0 0 0;}
#nav ul li a:hover { padding:0 0 0 0; text-decoration:none;}
/* 1st Level */
#nav ul li,
#nav ul li.active { float:none; margin:0; padding:6px 0 0 29px; background:#FFFFFF; border-left:1px solid #E8E7E7; border-right:1px solid #E8E7E7; }
#nav ul li.over {}
#nav ul li.last { background:#FFFFFF; padding-bottom:15px; }
#nav ul a,
#nav ul a:hover { float:none; padding:0;}
#nav ul li a { font-weight:normal !important; }
/* 2nd level */
#nav ul { position:absolute; width:199px; top:23px; left:-10000px; background:url(../images/bg_sub_menu.gif) 0 0 no-repeat; padding:23px 0 0 0; border-bottom:1px solid #E8E7E7; margin-left:100px; }
/* 3rd+ Level */
#nav ul ul { top:5px; background:none; padding-top:0; border-top:1px solid #E8E7E7; }
/* Show Menu */
#nav li.over > ul { left:0; }
#nav li.over > ul li.over > ul { left:100px; }
#nav li.over ul ul { left:-10000px; }
#nav ul li a { background:url(../images/arr_sub_menu.gif) 0 9px no-repeat; padding:0 0 0 0; color:#1A1616; }
#nav ul li a:hover { color:#1A1616 !important; }
#nav ul span,
#nav ul li.last li span { padding:3px 15px 4px 15px; }
#nav li ul { display:none; }
#nav li:hover ul{display: block; }
#nav ol { margin-left:5px; margin-bottom:10px; }
#nav ol li { padding-left:15px; background-image:url(../images/ol_bg_lines.gif); font-size:12px; font-weight:normal; }
#nav ol li.last { background-image:url(../images/ol_bg_lines_last.gif); }
inline css code to overwrite the default behavior for target page Code:
ul#nav {margin : 0 10px; margin-bottom:0px;}
ul#nav li {height : 14px; margin-top : 5px;}
ul#nav li a, ul#nav li a:hover {}
ul#nav ul {margin-top : -8px; background : url(/images/drop-ul-bgr.gif) no-repeat; }
ul#nav ul li {height : auto; margin-top : auto;}
ul#nav ol li a { padding:0px; }
ul#nav ol li { margin:0px; padding:5px 0 5px 15px; }
ul#nav ol { border:#ccc 1px solid; padding-bottom:30px; }
I am attaching a screenshot to explain the problem, i have given border to the OL to explain the problem. In the screenshot the pink arrow is pointing the place, BEFORE BEDS, where i want to give more space but the child list keeps overlapping rather than pushing the parent list downwards. any help is much appreciated I am really stuck with this. 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;
}
I am not getting the right behaviour from my css in a nested list i made for a menu. here is the css for the menu Code:
#main_menu{
position: absolute; top: 252px; left:30px;
margin:0;
padding:0;
}
#menu_item_1{
list-style-type: none;
}
#menu_item_1 a{
color:#11352B;
text-decoration:none;
font-weight:300;
vertical-align:text-top;
}
#menu_item_1 a:hover{
color:#007888;
text-decoration:underline;
font-weight:300;
vertical-align:text-top;
}
#menu_item_2{
list-style-type: none;
}
#menu_item_2 a{
color:#007888;
text-decoration:none;
font-weight:300;
vertical-align:text-top;
}
and here is the xhtml section showing the menu Code: <ul id='main_menu'> <li id='menu_item_1'><a href='index.php'>Home</a></li> <li id='menu_item_1'><a href='about_us.php'>About Us</a></li> <li id='menu_item_1'><a href='customers.php'>Customers</a></li> <li id='menu_item_2'><a href='products.php'>Products</a></li> <ul> <li id='menu_item_1'><a href='atlas2000.php'>Atlas 2000</a></li> <li id='menu_item_1'><a href='atlas2000.php'>Web Request</a></li> <li id='menu_item_1'><a href='atlas2000.php'>Atlas Mailer</a></li> </ul> <li id='menu_item_1'><a href='service.php'>Service</a></li> <li id='menu_item_1'><a href='download.php'>Download</a></li> <li id='menu_item_1'><a href='support.php'>Support</a></li> <li id='menu_item_1'><a href='contact_us.php'>Contact Us</a></li> </ul> the main list works great but the sublist the color is wrong, it should behave like the main one does....I think I have not structured my css correctly, but can not figure it out. hmmmm i want a nested list for a navigation menu, vertical on the left side all buttons aligned with 1px margin in between ok it almost works but i cant get rid of the extra list item that contains the nested list how does it not show itself if you go he http://www.tvshow-caps.co.uk/showPics.php?showid=24&season=6&episode=1 you will see that the nested list do not expand but OVERLAP in IE. firefox displays is ok. EDIT1: i have fixed the nested list problem (i was using height property which IE doesnt like) second problem: now IE doesnt apply the border-bottom property properly (use the above link) http://img55. imageshack .us/img55/6775/cssexamplesy8.png ^ please remove the space before and image shack to view the image I've taken a screenshot of a problem I need help with, which is how IE and Firefox handle nested lists. Using code like this: Code:
<ul>
<li>item 1</li>
<li>item 2</li>
<li>
<ul>
<li>sub item 1</li>
<li>sub item 2</li>
</ul>
</li>
<li>item 3</li>
</ul>
Firefox displays the new list without being pushed down yet IE seems to create the space for where the list item would be and I can't figure out how to remove the space / how to get it to act like firefox. Removing the list item that holds the nested ul solves all problems but it isn't valid so I'm looking for another solution. Cheers Weird issue with FF ive noticed can anyone explain why this happens? I have two divs, header and nav. Nav is inside header. Now when I placed a list inside nav it pushed my header div down abit maybe 15px. However when I added the following rule... Code: #nav ul{
margin-top:0px;
}
The error goes away. Strange isnt it? Heres my html and css 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="vwd_scripts/curvy/vwd_curvycorners.js"></script>
<script type="text/javascript">
<!--
gCurvyCorners[0]="nav,5,5,false,false,0,0";
//-->
</script>
</head>
<body>
<div id="header">
<div id="nav">
<ul>
<li>Home</li>
<li>Browse</li>
</ul>
</div>
</div>
<div id="content">
<h1 id="mainheader">Latest Templates</h1>
<h1 class="sideheader">List One Title</h1>
<h1 id="latesttemplates">Heres the latest templates</h1>
<ul class="sidebarlist">
<li>list one</li>
<li>list two</li>
<li>list three</li>
<li>list four</li>
<li>list five</li>
</ul>
<h1 class="sideheader" style="top:150px">List One Title</h1>
<ul class="sidebarlist" style="top:175px;">
<li>list one</li>
<li>list two</li>
<li>list three</li>
<li>list four</li>
<li>list five</li>
</ul>
<div id="templateholder" class="toprow" style="left:20px;"></div>
<div id="templatedescript" class="descriptoprow" style="left:20px;">
<table>
<tr>
<td class="descrip">Name</td>
<td class="answer">template1name</td>
</tr>
<tr>
<td class="descrip">Added</td>
<td class="answer">template1date</td>
</tr>
<tr>
<td class="descrip">Type</td>
<td class="answer">template1type</td>
</tr>
<tr>
<td class="descrip">Images</td>
<td class="answer">template1images</td>
</tr>
</table>
<table>
<tr>
<td><span class="P">Preview</span><span class="D">Download</span></td>
</tr>
</table>
</div>
<div id="templateholder" class="toprow" style="left:185px;"></div>
<div id="templatedescript" class="descriptoprow" style="left:185px;">
<table>
<tr>
<td class="descrip">Name</td>
<td class="answer">template2name</td>
<tr>
<td class="descrip">Added</td>
<td class="answer">template2date</td>
</tr>
<tr>
<td class="descrip">Type</td>
<td class="answer">template2type</td>
</tr>
<tr>
<td class="descrip">Images</td>
<td class="answer">template2images</td>
</tr>
</table>
<table>
<tr>
<td><span class="P">Preview</span><span class="D">Download</span></td>
</tr>
</table>
</div>
<div id="templateholder" class="toprow" style="left:350px;"></div>
<div id="templatedescript" class="descriptoprow" style="left:350px;">
<table>
<tr>
<td class="descrip">Name</td>
<td class="answer">template3name</td>
<tr>
<td class="descrip">Added</td>
<td class="answer">template3date</td>
</tr>
<tr>
<td class="descrip">Type</td>
<td class="answer">template3type</td>
</tr>
<tr>
<td class="descrip">Images</td>
<td class="answer">template3images</td>
</tr>
</table>
<table>
<tr>
<td><span class="P">Preview</span><span class="D">Download</span></td>
</tr>
</table>
</div>
<div id="templateholder" class="toprow" style="left:515px;"></div>
<div id="templatedescript" class="descriptoprow" style="left:515px;">
<table>
<tr>
<td class="descrip">Name</td>
<td class="answer">template4name</td>
<tr>
<td class="descrip">Added</td>
<td class="answer">template4date</td>
</tr>
<tr>
<td class="descrip">Type</td>
<td class="answer">template4type</td>
</tr>
<tr>
<td class="descrip">Images</td>
<td class="answer">template4images</td>
</tr>
</table>
<table>
<tr>
<td><span class="P">Preview</span><span class="D">Download</span></td>
</tr>
</table>
</div>
<div id="templateholder" class="bottomrow" style="left:20px;"></div>
<div id="templatedescript" class="descripbtmrow" style="left:20px;">
<table>
<tr>
<td class="descrip">Name</td>
<td class="answer">template5name</td>
<tr>
<td class="descrip">Added</td>
<td class="answer">template5date</td>
</tr>
<tr>
<td class="descrip">Type</td>
<td class="answer">template5type</td>
</tr>
<tr>
<td class="descrip">Images</td>
<td class="answer">template5images</td>
</tr>
</table>
<table>
<tr>
<td><span class="P">Preview</span><span class="D">Download</span></td>
</tr>
</table>
</div>
<div id="templateholder" class="bottomrow" style="left:185px;"></div>
<div id="templatedescript" class="descripbtmrow" style="left:185px;">
<table>
<tr>
<td class="descrip">Name</td>
<td class="answer">template6name</td>
<tr>
<td class="descrip">Added</td>
<td class="answer">template6date</td>
</tr>
<tr>
<td class="descrip">Type</td>
<td class="answer">template6type</td>
</tr>
<tr>
<td class="descrip">Images</td>
<td class="answer">template6images</td>
</tr>
</table>
<table>
<tr>
<td><span class="P">Preview</span><span class="D">Download</span></td>
</tr>
</table>
</div>
<div id="templateholder" class="bottomrow" style="left:350px;"></div>
<div id="templatedescript" class="descripbtmrow" style="left:350px;">
<table>
<tr>
<td class="descrip">Name</td>
<td class="answer">template7name</td>
<tr>
<td class="descrip">Added</td>
<td class="answer">template7date</td>
</tr>
<tr>
<td class="descrip">Type</td>
<td class="answer">template7type</td>
</tr>
<tr>
<td class="descrip">Images</td>
<td class="answer">template7images</td>
</tr>
</table>
<table>
<tr>
<td><span class="P">Preview</span><span class="D">Download</span></td>
</tr>
</table>
</div>
<div id="templateholder" class="bottomrow" style="left:515px;"></div>
<div id="templatedescript" class="descripbtmrow" style="left:515px;">
<table>
<tr>
<td class="descrip">Name</td>
<td class="answer">template8name</td>
<tr>
<td class="descrip">Added</td>
<td class="answer">template8date</td>
</tr>
<tr>
<td class="descrip">Type</td>
<td class="answer">template8type</td>
</tr>
<tr>
<td class="descrip">Images</td>
<td class="answer">template8images</td>
</tr>
</table>
<table>
<tr>
<td><span class="P">Preview</span><span class="D">Download</span></td>
</tr>
</table>
</div>
</div>
</body>
</html>
Code: @charset "utf-8";
/* CSS Document */
body{
margin:0px;
}
#nav{
position:relative;
height:35px;
background-color:#3d3d66;
width:405px;
left:55%;
top:65px;
}
#nav li{
display:inline;
color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
margin-right:10px;
}
#nav ul{
margin-top:0px;
padding-top:8px;
}
#header{
height:100px;
background-color:#333333;
background-image: url(../images/jpegs/header.jpg);
background-repeat:repeat-x;
}
#content{
position:relative;
margin-top:50px;
margin-left:auto;
margin-right:auto;
height:500px;
width:974px
}
h1#mainheader{
margin-top:0px;
padding-bottom:2px;
border-bottom:dotted;
border-bottom-width:1px;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
width:70%;
}
.sideheader{
position:absolute;
margin-top:9px;
top:0px;
left:75%;
padding-bottom:2px;
border-bottom:dotted;
border-bottom-width:1px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
width:25%;
}
h1#latesttemplates{
position:absolute;
margin-top:0px;
padding-top:50px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
border-right:dotted;
border-right-width:1px;
width:72.7%;
height:105%;
top:0;
}
.sidebarlist{
position:absolute;
margin-top:9px;
top:25px;
left:695px;
}
.sidebarlist li{
list-style-image:none;
list-style-type:none;
}
#templateholder{
position:absolute;
height:105px;
width:140px;
border:solid 1px;
}
.toprow{
top:100px;
}
.bottomrow{
top:330px;
}
.descriptoprow{
top:215px;
}
.descripbtmrow{
top:445px;
}
#templatedescript{
position:absolute;
width:140px;
height:105px;
}
#templatedescript table{
width:140px;
}
.descrip{
text-align:left;
font-weight:bold;
font-size:12px;
}
.answer{
text-align:right;
font-size:12px;
}
.P{
color:#FF0000;
text-decoration:underline;
font:Arial, Helvetica, sans-serif;
font-size:12px;
border-right:1px solid;
border-right-color:#FF0000;
margin-left:12%;
padding-right:5px;
}
.D{
color:#FF0000;
text-decoration:underline;
font:Arial, Helvetica, sans-serif;
font-size:12px;
margin-left:5%
}
ok i would like to have on my nested list 1.1 and 1.2 instead of 1? ie Code: 1. hhh 1.1 jjj 1.2 kkk 2. kkk 2.1 kkkk etc but currently if i have the list-style-type as decimal the inner list comes out as just 1,2,3 etc... is it even possible to do this? I have the following list that I want displayed horizontally. I chose to do it with display:inline instead of float:left as that seemed to be the only way to get it to center on the page: http://www.jimandkris.com/listtest.html However, now I can't figure out how to get those submenus to align under their respective parent. Hopefully this is an easy one, any suggestions? I've found a horizontal navigation menu set-up that I'd like to emulate in a simplified form but I'm having a tough time wrapping my head around what it would take. First, here's the site with the menu system : http://rhizome.org/ In particular, I really like how there is a horizontal 'main menu' - 'Art', 'Community', and 'About' and below that a permanent horizontal bar that displays a submenu for each of the main menu items. I also really like that the submenu doesn't disappear immediately when you move the cursor away. I've examined the code but I'm having a hard time adapting and streamlining it. They don't seem to be using lists, and I would like to use lists. I've adapted menus from 'Listmatic' in the past and found them to be successful. What I'm going for is a very simple appearance with two horizontal colored bars, one above the other. The upper bar will permanently display the main menu and the lower bar will display a different submenu for each main menu item that the cursor hovers over, and the submenus won't disappear until a different main menu item is hovered over. I hope that all makes sense. Basically I'm not looking for someone to write all the code for me, but just perhaps something to get me in the right direction. Thanks in advance! 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. Three issues with this menu - I've been trying to get a horizontal hover/nested list to work where the submenus are displayed inline underneath the main menu. 1. I've got the arrangement fairly close in FF, but in IE the top level items are jumping around all over the place on hover. 2. The javascript came from alsacreations, and seems to work pretty easily, but the submenus fail to disappear on rollOut unless you are going to another of the menu items. Any ideas? 3. Do you think there is anyway of leaving the top level links in their "active/hover" state when the mouse has moved to the submenus? So the coloured background that appears on hover stays there whilst hovering over the submenus? I've isolated the xhtml, styles and script into a page (it's a rework of a current page and is pretty incomprehensible in-situ!) at http://www.prioritypie.f2s.com/KSAV6/menuTest.html. Cheers for any advice. And I forgot to ask what the issue is with IE and transparent borders - they seem to appear black and of variable width! 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 found this example on the web for a drop down list, I was wondering if anyone knows how I would go about fixing it to work for IE as well, it's perfect in firefox. Even if doesn't show the sub items in IE it won't be a problem, just as long as the main items are shown. I like this example because it doesn't use javascript, I've found ones that works in IE but they use JS I'd prefer to use just CSS. Thanks for reading. [html]<ul class="nav"> <li><strong><a href="">main</a></strong> <ul> <li><a href="">sub</a></li> <li><a href="">sub</a></li> <li><a href="">sub</a></li> <li><a href="">sub</a></li> </ul> </li></ul>[/html] Code:
/*Nav bar styles*/
ul.nav,
.nav ul{
margin: 0;
padding: 0;
cursor: default;
list-style-type: none;
display: inline;
}
ul.nav{
display: table;
width: 100%;
table-layout: fixed;
}
ul.block{
width: 100%;
table-layout: fixed;
}
ul.nav>li{
display: table-cell;
position: relative;
padding: 2px 6px;
}
/*
ul.nav>li:hover{
padding-right: 1px;
}*/
ul.nav li>ul{
display: none;
position: absolute;
max-width: 40ex;
margin-left: -6px;
margin-top: 2px;
}
ul.nav li:hover>ul{
display : block;
}
.nav ul li a{
display: block;
padding: 2px 10px;
}
/*Menu styles*/
ul.nav,
.nav ul,
.nav ul li a{
background-color: #fff;
color: #369;
}
ul.nav li:hover,
.nav ul li a:hover{
background-color: #369;
color: #fff;
}
ul.nav li:active,
.nav ul li a:active{
background-color: #036;
color: #fff;
}
ul.nav,
.nav ul{
border: 1px solid #369;
}
.nav a{
text-decoration: none;
}
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. I have an iframe that contains a CSS drop down list and I'm having problems getting the drop down list to display beyond the bottom of the iframe. The drop down list cuts off at the bottom of the iframe. Is it possible for a css drop down list to display beyond the borders of an iframe? I've experimented with z-index and have not had any luck yet. Any ideas? Hello, I am trying to create a drop down list with a label, and have them align. I simply want the label to display left of the drop list. I can't seem to get them to do it. It sits inside a topoptsbox div tag (css below). Code: <form name="bpmform"> <label for="bpmfrom" class="bpmddl">BPM From</label> <select class="bpmddl" id="bpmfrom" name="bpmfrom"> <option id="0from" value="0">0</option> <option id="50from" value="50">50</option> <option id="100from" value="100">100</option> <option id="150from" value="150">150</option> </select> </form> Code:
#topoptsbox {
border-style: inset;
border-width: 1px;
width: 1000px;
height: 80px;
float: left;
display: block;
}
on my site i have a few drop down boxes, ive used css to change the textboxes and submit buttons, but is there a way to change the arrows/buttons on a drop down list? |
|||||||