7 Replies - 1998 Views - Last Post: 09 January 2012 - 07:36 AM

#1 lil_bugga  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 52
  • Joined: 29-October 10

CSS Drop Down Menu Clashes With Content

Posted 02 January 2012 - 10:45 AM

Hi guys and gals. I've built myself a css based navigation system and all works fine, without any content. I'm finding that with my page as it is currently, you can scroll so far down the sub menus before it seems to lose focus and the nav panel disappears.

At the moment I've thrown a few div's in place to buffer things whilst testing, trying to find a solution but I'm not getting anywhere. I've played with z-indexs thinking that that would fix the issue by forcing the nav ontop of the content but it seems not.

Anyone got any ideas, heres my code

Stylesheet
/* --------------------  CSS DROP MENU  ---------------------- */
ul { /* targets all lists and removes automatic indentation */
	padding:0px;
	margin:0px;
	z-index:100;
}

ul li { /* targets main list items, setting them for horizontal display */
	display:inline;
	float:left;
	height:30px;
	list-style-type:none;
	text-align:center;
	width:160px;
}

ul li a { /* targets main list items, setting the links behaviour */
	background-color:#99CCFF;
	display:block;
	line-height:30px;
	width:160px;
}

ul li a:hover { /* targets main list items, setting the links hover behaviour */
	background-color:#99FFFF;
	display:block;
	line-height:30px;
	text-decoration:line-through;
	width:160px;
}

ul li ul { /* targets the secondary list items, making them invisible */
	visibility:hidden;
}

ul li:hover ul { /* targets main list items hover, causing secondary list to display */
	visibility:visible;
}

ul li ul li a { /* targets secondary list items, setting the link behaviour */
	background-color:#CCCC00;
	display:block;
	line-height:30px;
	width:160px;
}

ul li ul li a:hover { /* targets secondary list items, setting the links hover behaviour */
	background-color:#CCFF00;
	display:block;
	line-height:30px;
	width:160px;
}
/* --------------------  CSS DROP MENU  ---------------------- */

content {
	z-index:10;
}

nav {
	z-index:100;
}

a {
	text-decoration:none;
}

.green {
	color:#00ff00;
}

.orange {
	color:#cc9900;
}

body {
	background-color:#000000;
	color:#FFFFFF;
}


Heres my page
<!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>Pure CSS Drop Down Menu</title>
<link href="style.css" rel="stylesheet" type="text/css" media="all" />

</head>
<body>
<div id="nav">
    <ul>
        <li>
            <a href="#"><span class="green">About</span><span class="orange">Me</span></a>
        </li>
        <li>
            <a href="#"><span class="green">Work</span><span class="orange">Experiance</span></a>
            <ul>
                <li><a href="#top">Horizon Hobby ltd</a></li>
                <li><a href="#top">AFM Website Design</a></li>
            </ul>
        </li>
        <li>
            <a href="#"><span class="green">Web</span><span class="orange">Projects</span></a>
            <ul>
                <li><a href="#top">Style Switcher</a></li>
                <li><a href="#top">Web Company</a></li>
                <li><a href="#top">Flash Site</a></li>
                <li><a href="#top">Little Shopper</a></li>
                <li><a href="#top">Bug Project</a></li>
            </ul>
        </li>
        <li>
            <a href="#"><span class="green">Graphics</span><span class="orange">Projects</span></a>
            <ul>
                <li><a href="#top">Website Headers</a></li>
                <li><a href="#top">Website Layouts</a></li>
                <li><a href="#top">Photoshop Experiments</a></li>
            </ul>
        </li>
        <li>
            <a href="#"><span class="green">Flash</span><span class="orange">Projects</span></a>
            <ul>
                <li><a href="#top">Flash Websites</a></li>
                <li><a href="#top">Navigation Systems</a></li>
                <li><a href="#top">Banner Ads</a></li>
            </ul>
        </li>
        <li>
            <a href="#"><span class="green">Contact</span><span class="orange">Me</span></a>
        </li>
    </ul>
</div>
<br /><br /><br /><br /><br />
<div id="content">
  <p><strong>About Me (h1)<br />
    </strong>My name is Benjaman Woolner and Iíve built this website for two reasons.  Reason 1 is to showcase my abilities and the projects that Iíve worked on.  Reason 2 is in the hope that this website will also help me start my career  within the web industry. <br />
    </p>
  <p><strong>My Interests (h2)<br />
      </strong>I have a varied collection of interests. I love my computers, naturally,  and spend a fair amount of time on them when thereís nothing else to do both socially  and productively. You could also call me a gamer as I have about fourteen  different consoles.</p>
</div>
</body>
</html>


Is This A Good Question/Topic? 0
  • +

Replies To: CSS Drop Down Menu Clashes With Content

#2 lil_bugga  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 52
  • Joined: 29-October 10

Re: CSS Drop Down Menu Clashes With Content

Posted 02 January 2012 - 03:41 PM

ok I've found half of my problem, i forgot the # before my class names in the css, but I still can't get this working right.

Hopefully someone on here will be able to help. I've set my nav height to 180px the same height as my navigation at its longest, and set the top of contents to sit just below the first level of navigation.

THis looks good but still messes up because the second the cursor gets to the level of the contents top (30px) it nav panel disappears :(

css code is here
body {
	background-color:#000000;
	color:#FFFFFF;
}

#content {
	float:left;
	margin-left:auto;
	margin-right:auto;
	width:960px;
	z-index:10;
	top:30px;
	position:absolute;
}

#nav {
	float:left;
	z-index:100;
	height:180px;
	margin-left:auto;
	margin-right:auto;
	width:960px;
}

a {
	text-decoration:none;
	color:#FFFFFF;
}

.green {
	color:#00ff00;
}

.orange {
	color:#cc9900;
}


/* --------------------  CSS DROP MENU  ---------------------- */
ul { /* targets all lists and removes automatic indentation */
	padding:0px;
	margin:0px;
	z-index:100;
}

ul li { /* targets main list items, setting them for horizontal display */
	display:inline;
	float:left;
	height:30px;
	list-style-type:none;
	text-align:center;
	width:160px;
}

ul li a { /* targets main list items, setting the links behaviour */
	background-color:#000000;
	display:block;
	line-height:30px;
	width:160px;
}

ul li a:hover { /* targets main list items, setting the links hover behaviour */
	background-color:#333333;
	display:block;
	font-weight:bolder;
	line-height:30px;
	text-decoration:line-through;
	width:160px;
}

ul li a:active ul { /* targets main list items, setting the links hover behaviour */
	background-color:#333333;
	display:block;
	font-weight:bolder;
	line-height:30px;
	text-decoration:line-through;
	width:160px;
}

ul li ul { /* targets the secondary list items, making them invisible */
	visibility:hidden;
}

ul li:hover ul { /* targets main list items hover, causing secondary list to display */
	visibility:visible;
}

ul li ul li a { /* targets secondary list items, setting the link behaviour */
	background-color:#333333;
	display:block;
	line-height:30px;
	width:160px;
}

ul li ul li a:hover { /* targets secondary list items, setting the links hover behaviour */
	background-color:#666666;
	display:block;
	line-height:30px;
	width:160px;
}
/* --------------------  CSS DROP MENU  ---------------------- */



html code is here

<!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" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Pure CSS Drop Down Menu</title>
<!-- TemplateEndEditable -->
<link href="/benwoolner_site_content/styles/style.css" media="all" />

<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
<link href="../benwoolner_site_content/styles/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="nav">	
    <ul>
        <li>
          <a href="../index.html"><span class="green">About</span><span class="orange">Me</span></a>        </li>
<li>
            <a href="#"><span class="green">Work</span><span class="orange">Experiance</span></a>
            <ul>
                <li><a href="../../work_experience_webpages/horizion_work_experience.html">Horizon Hobby ltd</a></li>
              <li><a href="../../work_experience_webpages/afm_work_experience.html">AFM Website Design</a></li>
      </ul>
        </li>
  <li>
            <a href="#"><span class="green">Web</span><span class="orange">Projects</span></a>
            <ul>
                <li><a href="../../web_projects_webpages/style_switcher.html">Style Switcher</a></li>
              <li><a href="../../web_projects_webpages/web_company.html">Web Company</a></li>
              <li><a href="../../web_projects_webpages/flash_site.html">Flash Site</a></li>
              <li><a href="../../web_projects_webpages/little_shopper.html">Little Shopper</a></li>
              <li><a href="../../web_projects_webpages/bug_project.html">Bug Project</a></li>
      </ul>
        </li>
  <li>
            <a href="#"><span class="green">Graphics</span><span class="orange">Projects</span></a>
            <ul>
                <li><a href="../../graphics_projects_webpages/website_headers.html">Website Headers</a></li>
              <li><a href="../../graphics_projects_webpages/website_layouts.html">Website Layouts</a></li>
              <li><a href="../../graphics_projects_webpages/photoshop_experiments.html">Photoshop Experiments</a></li>
      </ul>
        </li>
  <li>
            <a href="#"><span class="green">Flash</span><span class="orange">Projects</span></a>
            <ul>
                <li><a href="../../flash_projects_webpages/flash_animations.html">Flash Animations</a></li>
              <li><a href="../../flash_projects_webpages/flash_websites.html">Flash Websites</a></li>
              <li><a href="../../flash_projects_webpages/navigation_systems.html">Navigation Systems</a></li>
              <li><a href="../../flash_projects_webpages/banner_ads.html">Banner Ads</a></li>
      </ul>
    </li>
  <li>
            <a href="../contact_me.html"><span class="green">Contact</span><span class="orange">Me</span></a>        </li>
  </ul>
</div>
<p>
</p>
<p><br />
</p>
<div id="content"><!-- TemplateBeginEditable name="Content" -->
  <p><strong>About Me (h1)<br />
    </strong>My name is Benjaman Woolner and Iíve built this website for two reasons.  Reason 1 is to showcase my abilities and the projects that Iíve worked on.  Reason 2 is in the hope that this website will also help me start my career  within the web industry. <br />
  </p>
  <p><strong>My Interests (h2)<br />
  </strong>I have a varied collection of interests. I love my computers, naturally,  and spend a fair amount of time on them when thereís nothing else to do both socially  and productively. You could also call me a gamer as I have about fourteen  different consoles.</p>
  <p><br />
    Music is pretty important to me and my IPod will normally be  with me. I find that life without a soundtrack is just boring. Not only that,  but music also change your mood or tempo making it easier to get through the  day or meet a deadline.</p>
  <p><br />
    I know that youíre probably thinking nerd or geek right now,  but youíve not heard some of my other interests. Iím a bit of a clown, and I  mean this in a good way, I like to use my Diablo (a juggling prop), I have both  conventional and jumping silts and I have a unicycle to learn to ride.</p>
  <p><br />
    I have been brought  up with cars playing a major part of my life, with four members of my family  banger racing so Iíve always helped, or tried to help fix the cars. Now I havenít  decided to take the same route as my family and go banger racing myself, I  still enjoy going to watch race meetings but Itís not something that I want to  do myself. I prefer to spend my money on cars for the road and off road.</p>
  <p><br />
    I had for a period of time, a 4x4 that was used weekly to  play with off-road. It was good fun, getting covered and occasionally stuck in  mud, driving along rivers oh and my car falling on its side once and into a  couple of ditches.<br />
    My current project is a 1972 VW Beetle but thatís enough  about that here, check out my web projects if you want to find out more on  that.<br />
  </p>
  <p><strong>Why Web Design? (h2)<br />
    </strong>I love the fact that the industry is always changing because of the  technology being developed. When I first started making website I would never  have thought weíd be able to surf the internet or e-mail from our mobile  phones. <br />
    Itís not only the fact the  technology is always evolving and so quickly that I find exciting, itís the  variety too. I like the fact that you can achieve a certain effect or look by  using totally different processes, or that you can be working on a simple  template based website one week a and fully bespoke made website with database  integration the next. </p>
  <p>I feel that web design is also  beneficial to the <em>lifelong  learning</em> concept because as you liaise with clients and develop  websites for them, you can learn new things. For example you might learn about  a process used to create something that you might use every day. It gives you  the opportunity to broaden your horizons and learn about things that ordinarily  you wouldnít know about. </p>
  <p><strong>Feel free to download  my Curriculum Vitae.</strong></p>
<!-- TemplateEndEditable --></div>
</body>
</html>



If any of you can help me get this work I'll be very happy, because otherwise I've wasted a day on a system I can't use
Was This Post Helpful? 0
  • +
  • -

#3 cefram  Icon User is offline

  • New D.I.C Head

Reputation: 4
  • View blog
  • Posts: 19
  • Joined: 02-January 12

Re: CSS Drop Down Menu Clashes With Content

Posted 02 January 2012 - 11:39 PM

Try adding up a position on your ul to make that z-index work. (position:relative; will work fine unless you want some other behavior)

It will work right now :) hope you add rep for me lol
Was This Post Helpful? 1
  • +
  • -

#4 Shane Hudson  Icon User is offline

  • D.I.C Technophile
  • member icon

Reputation: 343
  • View blog
  • Posts: 1,286
  • Joined: 06-December 09

Re: CSS Drop Down Menu Clashes With Content

Posted 03 January 2012 - 05:23 AM

View Postcefram, on 03 January 2012 - 06:39 AM, said:

Try adding up a position on your ul to make that z-index work. (position:relative; will work fine unless you want some other behavior)

It will work right now :) hope you add rep for me lol


Pretty sure that is correct, though have not tested. Your new here, welcome to DIC and thank you for contributing. But please do not ask for rep!
Was This Post Helpful? 0
  • +
  • -

#5 cefram  Icon User is offline

  • New D.I.C Head

Reputation: 4
  • View blog
  • Posts: 19
  • Joined: 02-January 12

Re: CSS Drop Down Menu Clashes With Content

Posted 03 January 2012 - 05:28 AM

Tested it, using his codes and adding up the position thingy, and it pretty much works well.

ul {
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 100;
}



@offtopic
And yeah, sorry about that, will not be a beggar again. The odd part is I can't find the edit button :dead:
Was This Post Helpful? 0
  • +
  • -

#6 lil_bugga  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 52
  • Joined: 29-October 10

Re: CSS Drop Down Menu Clashes With Content

Posted 09 January 2012 - 03:40 AM

View Postcefram, on 03 January 2012 - 06:39 AM, said:

Try adding up a position on your ul to make that z-index work. (position:relative; will work fine unless you want some other behavior)

It will work right now :) hope you add rep for me lol


Cheers for the help there and sorry for the slow reply. Adding the position relative did solve the problem as said but could some explain why?

I would have thought that the z-index alone was enough to change the display levels of divs setting one to the top and other behind

This post has been edited by lil_bugga: 09 January 2012 - 03:41 AM

Was This Post Helpful? 0
  • +
  • -

#7 cefram  Icon User is offline

  • New D.I.C Head

Reputation: 4
  • View blog
  • Posts: 19
  • Joined: 02-January 12

Re: CSS Drop Down Menu Clashes With Content

Posted 09 January 2012 - 07:34 AM

By default, the browser renders elements the way it does with position relative. It's just that you can only use z-index when the element have a 'position' property. Other than that, I really can't give out the best explanation as to why it behaves that way. It's just that most browsers render it that way, even if by default position relative behaves exactly the same way as to how a normal element without positioning properties would look like.

Basically, it's just rules. I can't say it's the standard, cause I never really got the time to read the whole w3 consortium's standards.
Was This Post Helpful? 0
  • +
  • -

#8 lil_bugga  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 52
  • Joined: 29-October 10

Re: CSS Drop Down Menu Clashes With Content

Posted 09 January 2012 - 07:36 AM

how odd, cheers :)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1