5 Replies - 1647 Views - Last Post: 08 October 2012 - 06:39 AM

#1 drodriguez  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 93
  • Joined: 03-October 12

Horizontal Menu Not Working

Posted 08 October 2012 - 02:32 AM

I am trying to create a pure CSS drop down menu and I am currently going through a tutorial found here.

http://www.devinrols...orizontal-menu/

It is excellent at explaining everything about it. However, I am having an issue trying to get it to work. I am stuck at the part where it actually creates the drop down effect. I put in the code exactly as the tutorial explained but nothing drops down when I mouse over the link. Code is as follows:

html
<html>
<head>
<title>
My First CSS Menu
</title>
<link rel="stylesheet" type="text/css" href="menu.css" />

</head>
<body>


<div id="navigation">

<ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Menu Item 2</a>
                <ul>
                    <li>Sub 1</li>
                </ul>
            </li>
            <li><a href="#">Menu Item 3</a></li>
            <li><a href="#">Menu Item 4</a></li>
        </ul>

</div>


</body>
</html>




css
#navigation{
width:100%;
height:30px;
background-color:#999;
}

#navigation ul{
margin:0px; 
padding:0px;
}

#navigation ul li{
display:inline; 
height:30px; 
float:left; 
list-style:none;
margin-left:15px;
}

#navigation li a{
color:#fff; 
text-decoration:none;
}

#navigation li a:hover{
text-decoration:underline;
}

#navigation li ul
{
margin:0px;
padding:0px;
display:none;
}

#navigation li:hover ul
{
display:block;
width:160px;
}

#navigation li li
{
list-style:none;
display:list-item;
width:100%;
}




I am using IE. Thank you in advance for any help as to what I am doing wrong.

Is This A Good Question/Topic? 0
  • +

Replies To: Horizontal Menu Not Working

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3515
  • View blog
  • Posts: 10,140
  • Joined: 08-June 10

Re: Horizontal Menu Not Working

Posted 08 October 2012 - 02:38 AM

View Postdrodriguez, on 08 October 2012 - 11:32 AM, said:

I am using IE.

which version of IE? the :hover pseudo-class (on elements besides <a>) is not supported in all versions (since 8 or 9)
Was This Post Helpful? 0
  • +
  • -

#3 drodriguez  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 93
  • Joined: 03-October 12

Re: Horizontal Menu Not Working

Posted 08 October 2012 - 03:00 AM

im using ie 8
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3515
  • View blog
  • Posts: 10,140
  • Joined: 08-June 10

Re: Horizontal Menu Not Working

Posted 08 October 2012 - 04:00 AM

standard or quirks mode?
Was This Post Helpful? 0
  • +
  • -

#5 drodriguez  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 93
  • Joined: 03-October 12

Re: Horizontal Menu Not Working

Posted 08 October 2012 - 06:17 AM

i dont know what quirks mode is so i would assume normal. but i figured out the problem. i added !doctype to the html tag and it worked out just fine.
Was This Post Helpful? 0
  • +
  • -

#6 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3515
  • View blog
  • Posts: 10,140
  • Joined: 08-June 10

Re: Horizontal Menu Not Working

Posted 08 October 2012 - 06:39 AM

yepp, as I thought. :hover does not properly work in quirks mode.

what quirks and standards mode is.

standards mode: triggered by the presence of a DTD, IE tries to work as close as possible to the HTML/CSS standards defined by the W3C.

quirks mode: everything else. meant as a compatibility mode to be able to render older websites that were coded along the IE rules for HTML (e.g. IE used a different Box Model). today this should be avoided as the differences between W3C standards and old IE rules are legion. (as you have seen)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1