user4fun Posted September 13, 2010 Share Posted September 13, 2010 Since might seem like another post of mine, but it is slightly different.The menu on this is not showing at all, The box that shows us is empty. PLEASE HELPHTML <ul class="menu_items"><li class="homemain"><a href="home.php" class="homelink">HOME</a> <ul class="homelist"> <li><a href="1.htm">about</a></li> <li><a href="2.htm">location</a></li> <li><a href="3.htm">join us</a></li> </ul></li><!-- more items --> CSS /*Show sub menu*/ul.menu_items li.homemain:hover ul.homelist {position:relative; left: 40px; overflow:visible; height:auto;} When i hover over li.homemain. A drop down menu does show but only the top part to cover. and the list is not even partially there. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 13, 2010 Share Posted September 13, 2010 you don't have to define class names it will work for all ul under the parent li, for all the parent top menu buttonsul#menu_items li{position:relative; float:left;}and its submenu uses position absolute, not relative.ul#menu_items li ul {position:absolute; top: 48px; background-color:#996633; padding:0;width:200px;border:1px solid brown;overflow:hidden; left:-999999em;}hover is assigned to parent li not its child, elements and definitely not the ul.ul#menu_items li:hover ul, ul#menu_items li.sfhover ul {left:0;}try defining the height and width of the sublevel li'sul#menu_items ul li Link to comment Share on other sites More sharing options...
dsonesuk Posted September 13, 2010 Share Posted September 13, 2010 actually my bad, because of the width of element extends 40px or so to the left, you will have to give the first ul a class and change left:0 to left:45px to allow for this.<li><a href="home.php" class="home">HOME</a><ul class="home">ul#menu_items li:hover ul, ul#menu_items li.sfhover ul {left:0;} /*for rest of menus*/ul#menu_items li:hover ul.home, ul#menu_items li.sfhover ul.home {left:45px;}/*for home menu only*/ Link to comment Share on other sites More sharing options...
user4fun Posted September 13, 2010 Author Share Posted September 13, 2010 Nothing, same problem. I am so sorry, but I swear to you I have been staring at this for over a week at 5 to 8 hours a day. I am so confused.THE ENTRIRE CSS body{background-image:url('images/vertical_gradient.png');background-repeat:repeat-x;} /* Placing the site banner in the middle of the page*/.BannerFloat{margin:0px auto;width: 988px;height: 209px; background:url("images/site_banner.png") no-repeat; }/* Adjusting color and position of basic links */.BannerFloat #links {position:relative; right: -780px; top: 35px;}.BannerFloat #links a{display:block; float:left; padding: 0 5px; height:22px; color: #B7B7B7; position: top:50px; font-family: Verdana; font-style: normal; font-size: 11px; text-decoration: none;}.BannerFloat #links a:hover{color:#FFFFFF;}.nav_bar {height:62px;margin:0 auto;overflow:hidden;width:988px;}ul{list-style-type: none;}ul.menu_items {background:transparent url(images/nav_bar.png) no-repeat scroll left 0;float:left;list-style-image:none;list-style-position:outside;list-style-type:none;margin:0 0 0 -5px;padding:0;width:964px;}ul.menu_items li a {background-image:url(images/nav_bar.png);background-repeat:no-repeat;display:block;float:left;height:60px;text-indent:-9999px; style-list-type: none;}ul.menu_items li a.homelink {background-position:-50px 0;margin-left:50px;width:105px;}ul.menu_items li a.opslink {background-position:-155px 0;width:152px;}ul.menu_items li a.detenlink {background-position:-307px 0;width:141px;}ul.menu_items li a.corlink {background-position:-448px 0;width:167px;}ul.menu_items li a.adminlink {background-position:-615px 0;width:183px;}ul.menu_items li a.extraslink {background-position:-798px 0;width:145px;}ul.menu_items li{position:relative; float:left;}ul.menu_items li ul {position:absolute; top: 48px; background-color:#996633; padding:0;width:200px;border:1px solid brown;overflow:hidden; left:-999999em;}ul.menu_items li:hover ul, ul.menu_items li.sfhover ul {left:45px;}ul.menu_items ul li {width: 150px;height: 150px;}ul.menu_items li:hover ul, ul.menu_items li.sfhover ul {left:0;} /*for rest of menus*/ul.menu_items li:hover ul.homelist, ul.menu_items li.sfhover ul.homelist {left:45px;}/*for home menu only*/ The ENTIRE HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title> LIST </title><link rel="stylesheet" type="text/css" href="vcso_style.css" /></head><body><div class="BannerFloat"><div id="links"><a href="contact.php">Contact</a><a href="help.php">Help</a><a href="faqs.php">Faq's</a><a href="login.php">Login</a></div></div><div class="nav_bar"><ul class="menu_items"><li class="homemain"><a href="home.php" class="homelink">HOME</a> <ul class="homelist"> <li><a href="1.htm">FIRST</a></li> <li><a href="2.htm">about</a></li> <li><a href="3.htm">The office and the content</a></li> </ul></li><li class="opsmain"><a href="ops.php" class="opslink">OPS</a> <ul class="opslist"> <li><a href="1.htm">1</a></li> <li><a href="2.htm">2</a></li> <li><a href="3.htm">3</a></li> </ul></li><!-- More list imtes--></ul></div></body></html> Link to comment Share on other sites More sharing options...
dsonesuk Posted September 13, 2010 Share Posted September 13, 2010 nav_bar with overflow:hidden, guess what's going to happen if you have a menu within it, and its menu extends beyond the boundaries of nav_bar....tick, tick...tick another clue OVERFLOW......HIDDEN.remove highlighted in red.BannerFloat #links a{display:block; float:left; padding: 0 5px; height:22px; color: #B7B7B7; position: top:50px; font-family: Verdana; font-style: normal; font-size: 11px; text-decoration: none;}not satisfied with styling for list, that you decided to invent your own?ul.menu_items li a {background-image:url(images/nav_bar.png);background-repeat:no-repeat;display:block;float:left;height:60px;text-indent:-9999px; style-list-type: none;}should beul.menu_items li a {background-image:url(images/nav_bar.png);background-repeat:no-repeat;display:block;float:left;height:60px;text-indent:-9999px; list-style-type: none;}EDIT: ACTUALLY it should not be there at all! not for an anchor Link to comment Share on other sites More sharing options...
user4fun Posted September 14, 2010 Author Share Posted September 14, 2010 WOOOO HOOO, Now I have the box showing, no list, but I have a box :-)You are the KING Link to comment Share on other sites More sharing options...
dsonesuk Posted September 14, 2010 Share Posted September 14, 2010 ummm you have define the submenu ulul.menu_items li ul {position:absolute; top: 48px; background-color:#996633; padding:0;width:200px;border:1px solid brown;overflow:hidden; left:-999999em;}and you have defined the submenu li ul.menu_items ul li {width: 150px;/*height: 150px; bit overkill */ height: 25px;}submenu UL, submenu li, what else could you possibly define to get the link to show, i mean, i know i used text-indent to hide the parent menu links, if only there was a way to to zero the text -indent and make the link appear, oh damn! giving away a clue. Link to comment Share on other sites More sharing options...
user4fun Posted September 14, 2010 Author Share Posted September 14, 2010 ul.menu_items ul li a {text-indent:5px;}WALASo really, I do appreciate your help more than you can imagine.I had a big seperation between each li item so I did thisI took the height 60px from ul.menu_items li a and i put it inside ul.menu_items Now the drop down menu has the right distance between each li but the main a itself example .homelink is not big enough room to let me move the mouse down to the menu. The mouse moved a little distance and then theh menu disappears??????Any guidance?YEEEEEEEEEEEEEAHI fixed it all by myslef.I changed thisul.menu_items li a.opslink {background-position:-155px 0;width:152px;}to thisul.menu_items li a.opslink {background-position:-155px 0;width:152px; height: 60px;} Link to comment Share on other sites More sharing options...
dsonesuk Posted September 14, 2010 Share Posted September 14, 2010 you have made it worse, removing height:60px; from ul.menu_items li a, causes all the main parent menus to be not high enough, to select drop down menu.ul.menu_items li a.opslink {background-position:-155px 0;width:152px; height: 60px;} will only make menu for a.opslink the correct height. replace the height: 60px; to ul.menu_items li a {background-image:url(images/nav_bar.png);background-repeat:no-repeat;display:block;float:left;height:60px;text-indent:-9999px; }correct this in all parent main menus.what happen is ul.menu_items li a will target anchors, including submenus, the same goes for ul#menu_items {background:transparent url(images/nav_bar.png) no-repeat scroll left 0;float:left;list-style-image:none;list-style-position:outside;list-style-type:none;margin:0 0 0 -5px;padding:0;width:964px;height:62px;}will target all ul including submenuwhat you do is use ul#menu_items ul li aandul#menu_items li ulto target these elements, after the main menu ul and a, and redefine there height, width etc, they will all be this set width and height after the main menu. Link to comment Share on other sites More sharing options...
user4fun Posted September 14, 2010 Author Share Posted September 14, 2010 Well now that you put it that way lolYou are the best, I feel like I should buy you dinner.Check this little issue, the drop down bos is cut of as it overlaps the next main navigation. Here is a pic Link to comment Share on other sites More sharing options...
dsonesuk Posted September 14, 2010 Share Posted September 14, 2010 tryul.menu_items li:hover, ul.menu_items li.sfhover, ul.menu_items li ul{z-index:99;} Link to comment Share on other sites More sharing options...
user4fun Posted September 15, 2010 Author Share Posted September 15, 2010 You are amazing, if I had your address I would send you a gift card or something.SIDE NOTE: I don't think this site would have been what it is if it was not for you.Thank you again.By the way, just for general knoweldge, in a drop down menu, what makes the empty space arround the li a to act as a link as well. Right now my hover effect only works if I am hovered exact over the link, except taht I ahve seen sites where any where in that line of the dropped down list, the link would be activated! Link to comment Share on other sites More sharing options...
dsonesuk Posted September 15, 2010 Share Posted September 15, 2010 use display:block; then define its area the same width and height as the li it is in. Link to comment Share on other sites More sharing options...
user4fun Posted September 15, 2010 Author Share Posted September 15, 2010 Just not getting there yet!Thanks for the direction Link to comment Share on other sites More sharing options...
user4fun Posted September 17, 2010 Author Share Posted September 17, 2010 I got it, thank you. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.