|
CSS - Is It Possible To Create A Drop Down Menu In Css?
Hi all,
Okay, I need to create a drop-down menu on a site that I'm trying to make table-less. So is it possible to create a drop down menu, (such as the dev shed search at the top of this page) within CSS or something other than tables? Cheers. Similar TutorialsHello 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! Hi, I'm developing a site that is growing daily and I need to create a menubar that I can update just once, and it works across multiple pages. What is the best way to do this? Any links to instructions or tutorials would be much appreciated as I'm a fairly basic designer. thanks, Jean 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'm trying to create a css only drop-down menu like the ones in html. Here is my code for trying to do so. /* setting dealing with selecting particular guest book entries */ Code: #menuSelectGuestEntries
{
position: relative;
margin-top: 10px;
padding-left: 466px;
}
#menuSelectGuestEntries form
{
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 2.12em;
}
#menuSelectGuestEntries .guestBookPages{
visibility:hidden;
}
#menuSelectGuestEntries .guestBookPages:hover{
visibility:visible;
}
#selectGuestBookEntries {
border: solid 1px grey;
background-color: white;
padding-right; 5px;
width: 70px;
font-size: 13px;
height: 16px;
overflow: auto;
}
#menuSelectGuestEntries ul.guestBookPages {
position: absolute;
color: black;
background-color: white;
font-size: 20px;
top: 1px;
left: 517px;
list-style-type: none;
padding-left:0;
padding-right: 0;
margin-left: 0;
width: 66px;
border: solid 1px grey;
border-top: none;
}
ul.guestBookPages a {
display: block;
text-decoration: none;
width: 70px;
zoom: 1;
}
ul.guestBookPages a:hover {
background-color: #104E8B;
font-weight: bold;
width: 66px;
}
html code
<div id="menuSelectGuestEntries">
<form action="">
Page: <a href=""><</a>
<span name="selectGuestBookEntries" id="selectGuestBookEntries">
1 of 212 <img src="images/dropDownBox.jpg" width="12" height="13"/></span>
<a href="">></a>
<ul class="guestBookPages">
<li><a href="">1 of 212</a></li>
<li><a href="">2 of 212</a></li>
<li><a href="">3 of 212</a></li>
<li><a href="">4 of 212</a></li>
<li><a href="">5 of 212</a></li>
</ul>
</form>
</div>
What I've tried to do is make the form with id Code: #menuSelectGuestEntries relative positioned is it looks like the first option of a drop-down menu. Then what I was hoping for was to have the drop-down list named Code: #menuSelectGuestEntries absolutely positioned so when someone hovered over the span with id Code: selectGuestBookEntries which contains the first entry all the entries in list Code: guestBookPages would become visible. I'm trying to avoid the Javascript methods of doing this if possible, not a big fan. Any ideas of code I could use in the above scenario to make the listing in the id Code: guestBookPages visible using the hover tag somewhere? Any help greatly appreciated. The visibility option is not working at moment, probably incorrect. I followed the online examples pretty closely but for some reason the effect isn't working how it is supposed to. You'll see what i mean he http://www.mr-danny.com/example.html could anybody tell me what i'm doing wrong? Code:
<html>
<head>
<style type="text/css">
ul#menu{
position:relative;
top:163px;
left:405px;
display: inline;
list-style: none;
list-style-type: none;
margin: 0;
padding: 0;
}
ul#menu li{
display:inline;
list-style-type:none;
}
ul#menu li ul.submenu{
display:none;
}
ul#menu li ul.submenu li{
display:block;
}
ul#menu li:hover > ul.submenu{
display:block;
}
</style>
</head>
<body>
<ul id="menu">
<li class="home"><a href="" title="">Heading 1</a></li>
<li class="services"><a href="" title="">Heading 2</a>
<ul class="submenu">
<li><a href="" title="">sub 2-1</a></li>
<li><a href="" title="">sub 2-2</a></li>
</ul>
</li>
<li><a href="" title="">Heading 3</a></li>
<li><a href="" title="">Heading 4</a>
<ul class="submenu">
<li><a href="" title="">sub 4-1</a></li>
<li><a href="" title="">sub 4-2</a></li>
</ul>
</li>
<li><a href="" title="">Heading 5</a>
<ul class="submenu">
<li><a href="" title="">sub 5-1</a></li>
<li><a href="" title="">sub 5-2</a></li>
</ul>
</li>
</ul>
</body>
</html>
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;
}
Alright, I've started to design the other pages on my site. I had to change some things in the code in order for my design to work properly. I didn't have it set up correctly before. So everything works the way I want it to now...except for the drop down menu. I am only a beginner with CSS and do not know much about it. I can't figure out what it is I did that made the navigation stop working. If maybe somebody that is more experienced than myself can take a look at it to see what I did, I would really appreciate it. Oh yea, here is the link to the beggining stages of my "about" page: About Keep in mind, nothing is really for sure yet. I just want to get the coding done, so if you think the page could use some sprucing up, you're not alone. As of now the site works best in Firefox and the drop down menu should appear when "Portfolio" is hovered over. Here is the link to the CSS: CSS Thanks I have a horizontal menu that drops vertically when you hover over a menu item. In IE7, the menu hides behind images making it invisible if it drops in a spot where an image is at. I haven't been able to find the answer to my problem, so I'm hoping someone here is familiar with this issue. I should mention it works in Firefox, but I haven't tested any other browsers. I am looking for help with creating a CSS drop down menu. I found an example online, but I am unable to make it work for my site. I am trying make a horizontal drop down menu, but the menu is being displayed vertically, can someone please help. Thanks Below are my codes: Code: CSS /********************** Header ***************************/
#header {
margin: 0px 0px 0px 0px;
background-image:url(images/header.jpg);
width:717px;
height:288px;
position:relative;
}
#header-container
{
position: absolute;
top: 1em;
left: 1em;
}
#header ul{
background-color:#000000;
width:711px;
border: 3px solid #FFFFFF;
display:block;
top:255px;
position:absolute;
margin: 0px 0px 0px 0px;
height:22px;
padding:5px 0px 0px 0px;
text-align:center;
}
#header a
{
text-align: center;
display:block;
border: 1px solid #555;
white-space:nowrap;
margin:0;
padding: 0.3em;
}
#header a:link, #header a:visited, #header a:active /* menu at rest */
{
color: white;
background-color: #000000;
text-decoration:none;
}
#header a:hover /* menu on mouse-over */
{
color: #000000;
background-color: #CCCCCC;
text-decoration:none;
}
#header a.top_parent, #header a.top_parent:hover /* attaches down-arrow to all top-parents */
{
background-image: url(navdown_white.gif);
background-position: right center;
background-repeat: no-repeat;
}
#header a.parent, #header a.parent:hover /* attaches side-arrow to all parents */
{
background-image: url(nav_white.gif);
background-position: right center;
background-repeat: no-repeat;
}
#header ul
{
list-style:none;
margin:0;
padding:0;
float:left;
width:9em; /* width of all menu boxes */
/* NOTE: For adjustable menu boxes you can comment out the above width rule.
However, you will have to add padding in the "#menh a" rule so that the menu boxes
will have space on either side of the text -- try it */
}
#header li
{
position:relative;
min-height: 1px; /* Sophie Dennis contribution for IE7 */
vertical-align: bottom; /* Sophie Dennis contribution for IE7 */
}
#header ul ul
{
position:absolute;
z-index:500;
top:auto;
display:none;
padding: 1em;
margin:-1em 0 0 -1em;
}
#header ul ul ul
{
top:0;
left:100%;
}
div#header li:hover
{
cursor:pointer;
z-index:100;
}
div#header li:hover ul ul,
div#header li li:hover ul ul,
div#header li li li:hover ul ul,
div#header li li li li:hover ul ul
{display:none;}
div#header li:hover ul,
div#header li li:hover ul,
div#header li li li:hover ul,
div#header li li li li:hover ul
{display:block;}
Code: HTML <div id="container"> <div id="header"> <ul> <li><a href="index.html">Home</a></li> <li><a href="fbstats.html">Football</a></li> <li><a href="bbstats.html">Baseball</a></li> <li><a href="bio.html">Biography</a></li> <li><a href="televison.html">Television</a></li> <li><a href="cdbuy.html">CD/Book</a></li> <li><a href="video.html">Videos</a></li> </ul> </div> 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? I had made a site with a pure CSS drop down menu (using hover). The problem is that it works fine in the various browsers... IE6, FF1.x, NS, Opera... But it doesn't work in IE7. Anyone know a work around for using the hover as a drop down with IE7? I can paste the code later (when I get back to where my site is) if needed. Thanks for any input. 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 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 I have made a menu which I love because it is the layout that I want. However, I am having problems with the menu when I try to add a "Drop Down" feature to it. The menu I currently have and use is: http://www.gc40.com/menu2.html I would like to turn some of the tabs like services into a drop down menu. I found a script that was a drop down menu and I tried to customize it to match my original menu but failed. The script that I found is: http://www.gc40.com/menu1.html Is there anyone that can customize http://www.gc40.com/menu2.html for me using http://www.gc40.com/menu1.html so that I can have drop down capabilities? I would really appreciate the help. Thanks guys. I have created a style sheet drop down menu and it works fine in mozilla and most times in works in ie however sometimes the menu will not drop down in ie but when you hit refresh the menu drops down. any ideas. Below is my stylesheet for creating a css drop down menu - I am using csshover.htc for internet explorer and this in the html <!--[if IE]> <style type="text/css" media="screen"> body { behavior: url(<%lcURLTheme2%><%lcThemeName%>css/csshover.htc);} #menu ul li {float: left; width: 100%;} #menu ul li a {height: 1%;} </style> <![endif]--> #menu { z-index: 2000; background: url(../images/hoz_menu_BG.gif) repeat-x #8898BC; background-color: #8898BC; color: black; position: absolute; width: 100%; text-align: center; left: 0; cursor: pointer; font-size: .9em; font-weight: bold; font-family: Arial, Helvetica, sans-serif; border-bottom: 5px solid #CCD6EB; } /*top level for student*/ #menu #st ul { list-style: none; margin: 0; padding: 0; width: 19.7%; float: left; } /*2nd level for student*/ #menu #st ul ul { width: 80%; position: absolute; left: 0; z-index: 500; } /*3rd level for student*/ #menu #st ul ul ul { width: 90%; position: absolute; left: 100%; top: 1px; } #menu a { color: #FFFFFF; background-color: transparent; text-decoration: none; text-align: center; display: block; padding: 4px 2px 4px 5px; } #menu a:link { color: #FFFFFF; background-color: #4D678C; } #menu a:visited { color: #FFFFFF; background-color: #4D678C; } #menu a:hover { color: #000000; background-color: #ABBAD7; } #menu ul { border-right: 1px dotted #FFFFFF; } #menu li { position: relative; } #menu ul ul li {border-bottom: 1px solid #FFFFFF; } #menu ul ul { border-right: 1px solid #FFFFFF; } #menu ul ul { border-top: 1px solid #FFFFFF; } /*#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; } /*2nd menu colours - uses #menu styles and then overwrites them for top menu links*/ div#menu ul li li a { color: white; background-color: #4D678C; text-transform: capitalize; text-align: left; border-left: 1px solid #FFFFFF; } How easy is it to create one of these where when you hover over a link a menu appears underneath? |
|||||||