css horizontale Dropdown-Menü helfen, bitte

Oktober 20th, 2009, 8:45 pm

Ive been kämpfen mit diesem für eine kleine Weile. Ich habe ein horizontales Dropdown-Menü mit einem Rollover-Effekt erzeugt. It just works fine in firefox but i can't get it in IE funktionieren. Ich kann nur auf die erste Option im Untermenü. Kennt jemand eine Lösung für dieses?

finden Sie untenstehenden Code ein:

Code: [ Download ] [ Select ]

html

<ul id="navlist">
                <li id="active"><a href="index.html" id="current">home</a></li>
                <li><a href="pages/projects.html">projects</a>
                    <ul id="subnavlist">
                    <li><a href="pages/projects/residential.html">residential</a></li>
                    <li><a href="pages/projects/commercial.html">commercial</a></li>
                    <li><a href="pages/projects/interiors.html">interiors</a></li>
                    <li><a href="pages/projects/clubs.html">clubs</a></li>
                
                    </ul>
                </li>
                
                <li><a href="pages/people.html">people</a></li>
                <li><a href="pages/montages.html">montages</a></li>
                <li><a href="pages/contact.html">contact</a></li>
            </ul>

1. html
3. <ul id="navlist">
4.                 <li id="active"><a href="index.html" id="current">home</a></li>
5.                 <li><a href="pages/projects.html">projects</a>
6.                     <ul id="subnavlist">
7.                     <li><a href="pages/projects/residential.html">residential</a></li>
8.                     <li><a href="pages/projects/commercial.html">commercial</a></li>
9.                     <li><a href="pages/projects/interiors.html">interiors</a></li>
10.                     <li><a href="pages/projects/clubs.html">clubs</a></li>
11.                 
12.                     </ul>
13.                 </li>
14.                 
15.                 <li><a href="pages/people.html">people</a></li>
16.                 <li><a href="pages/montages.html">montages</a></li>
17.                 <li><a href="pages/contact.html">contact</a></li>
18.             </ul>

css

Code: [ Download ] [ Select ]

#navlist, #navlist ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

#navlist a {
    display: block;
    width: 120px;
}

#navlist li {
    float: left;
    width: 120px;
}
#navlist ul li
{
    position: relative;
}
#navlist li ul {
    position: absolute;
    width: 120px;
    left: -999em;
}

#navlist li:hover ul {
    left: auto;
}
#navlist li:hover ul, #navlist li.sfhover ul {
    left: auto;
}

/* add */

#menubar
{
height: 4.7em;
}
#navlist
{
    position: relative;
    width: 100%;
    height: 1.5em;
    margin: 0;
    white-space: nowrap;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #333333;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 6;
    padding-left: 0;

}

#navlist ul li
{
    position: relative;
}
#navlist li ul
{
    position: absolute;
    display:none
}

#navlist li:hover ul, #navlist li.over ul {
display: block;
}

#navlist li
{
    float: left;
    list-style-type: none;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0px;
}

#navlist li a
{
position: relative;
width: 6em;
display: block;
margin: 0;
color: #808080;
font-size: 12px;
text-align: left;
text-decoration: none;
}

#navlist li a:hover
{
color: #000000;
}

#navlist li#active a
{
    color: #808080;
    font-size: 12px;
}

#navlist li#active a:hover { color: #000000; }

#navlist ul#subnavlist
{
    position: absolute;
    height: 20px;
    width: 600px;
    padding-top: 5px;
    }

1. #navlist, #navlist ul {
2.     padding: 0;
3.     margin: 0;
4.     list-style: none;
5. }
7. #navlist a {
8.     display: block;
9.     width: 120px;
10. }
12. #navlist li {
13.     float: left;
14.     width: 120px;
15. }
16. #navlist ul li
17. {
18.     position: relative;
19. }
20. #navlist li ul {
21.     position: absolute;
22.     width: 120px;
23.     left: -999em;
24. }
26. #navlist li:hover ul {
27.     left: auto;
28. }
29. #navlist li:hover ul, #navlist li.sfhover ul {
30.     left: auto;
31. }
33. /* add */
35. #menubar
36. {
37. height: 4.7em;
38. }
39. #navlist
40. {
41.     position: relative;
42.     width: 100%;
43.     height: 1.5em;
44.     margin: 0;
45.     white-space: nowrap;
46.     border-bottom-width: 1px;
47.     border-bottom-style: solid;
48.     border-bottom-color: #333333;
49.     padding-top: 0;
50.     padding-right: 0;
51.     padding-bottom: 6;
52.     padding-left: 0;
54. }
56. #navlist ul li
57. {
58.     position: relative;
59. }
60. #navlist li ul
61. {
62.     position: absolute;
63.     display:none
64. }
66. #navlist li:hover ul, #navlist li.over ul {
67. display: block;
68. }
70. #navlist li
71. {
72.     float: left;
73.     list-style-type: none;
74.     margin-top: 0;
75.     margin-right: 0;
76.     margin-bottom: 0;
77.     margin-left: 0px;
78. }
80. #navlist li a
81. {
82. position: relative;
83. width: 6em;
84. display: block;
85. margin: 0;
86. color: #808080;
87. font-size: 12px;
88. text-align: left;
89. text-decoration: none;
90. }
92. #navlist li a:hover
93. {
94. color: #000000;
95. }
97. #navlist li#active a
98. {
99.     color: #808080;
100.     font-size: 12px;
101. }
103. #navlist li#active a:hover { color: #000000; }
105. #navlist ul#subnavlist
106. {
107.     position: absolute;
108.     height: 20px;
109.     width: 600px;
110.     padding-top: 5px;
111.     }

Oktober 25th, 2009, 5:12 am

Ich habe nicht eine Lösung für dieses. aber vielleicht kann u purecssmenu DOT com versuchen, erzeugen ein, dass die gleichen wie Sie und vielleicht u ist in der Lage, Ihnen zum Laufen zu bringen

[graphixboy]

Oktober 26th, 2009, 6:33 pm

welche Version des Internet Explorers verwenden Sie? IE6 nicht erkannt: hover auf irgend etwas anderes als ein Anker-Tag. Sie müssen Javascript stattdessen

November 8th, 2009, 4:06 pm

Verwenden Sie Java Script / css und ein bisschen googeln

November 8th, 2009, 9:38 pm

Danke,

Ich habe am Ende mit Hilfe von JavaScript.

November 9th, 2009, 9:16 am

Großartig