drop line css menu

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

RvW Of toch niet

RvW Of toch niet

27/10/2009 22:32:00
Quote Anchor link
Ik wil zown drop line css menuklik.
Ik ben geen ster in css's menus en kan geen simpel voorbeeld vinden zo als ik wil. een ook zijn alleen met een hoop overige zooi waar ik niet op zit te wachten en het liefst heb ik ook deze structuur.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
<ul>
    <li><a href="#">link1</a>
        <li><a href="#">Sub link1.1</a></li>
        <li><a href="#">Sub link1.2</a></li>
        <li><a href="#">Sub link1.3</a></li>
    </li>
    <li><a href="#">link2</a>
        <li><a href="#">Sub link2.1</a></li>
        <li><a href="#">Sub link2.2</a></li>
        <li><a href="#">Sub link2.3</a></li>
    </li>
</ul>


BVD iedereen :D
 
PHP hulp

PHP hulp

07/12/2024 12:37:36
 
Pieter van Linschoten

Pieter van Linschoten

28/10/2009 00:44:00
Quote Anchor link
Niet echt een denderende structuur om het zo aan te pakken.

Dit maak ik er in 10 minuten van...
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<style>
/* Resetten van ul (standaard waarden verschillen per browser)*/
body, html{
    padding: 0;
    margin: 0;
}
.menu ul,
.menu ul li{
    list-style: none;
    margin: 0;
    padding: 0;
}
.menu{
    background:#351B00;
    padding: 10px;
    margin: 10px;
    width: 780px;
    height: 40px;
}
.menu a{
    font-family: Arial, Helvetica, sans-serif;
    color: #00CC99;
    text-decoration: none;
    font-size: 14px;
}
.menu .submenu a{
    font-size: 12px;
}
.menu ul li.active,
.menu ul li.inactive{
    float: left;
    text-align: left;
    margin: 0 15px 0 0;
}
.submenu{
    display: none;
    position: absolute;
    left: 0;
    padding: 0px 20px 15px; 20px;;
}
.submenu ul li{
    float: left;
    margin: 0 15px 0 0;
}
li:hover .submenu{
    display: block;
}


</style>
<body>
<div class="menu">
    <ul>
        <li class="active"><a href="#">link1</a>
                <div class="submenu">
                <ul>
                    <li><a href="#">Sub link1.1</a></li>
                    <li><a href="#">Sub link1.2aef</a></li>
                    <li><a href="#">Sub link1.3eafe</a></li>
                </ul>
                </div>
        </li>
        <li class="inactive"><a href="#">link2</a>
                <div class="submenu">
                <ul>
                    <li><a href="#">Sub link1.1eafeafe</a></li>
                    <li><a href="#">Sub link1.2</a></li>
                    <li><a href="#">Sub link1.3</a></li>
                </ul>
                </div>
        </li>
    </ul>
    <div style="clear:both;"></div>
</div>
</body>
Gewijzigd op 01/01/1970 01:00:00 door Pieter van Linschoten
 
RvW Of toch niet

RvW Of toch niet

28/10/2009 18:13:00
Quote Anchor link
Bedankt lapidi,

Dit werkt alleen niet zo goed :)

Mijn oplossing: http://users.tpg.com.au/j_birch/plugins/superfish/#sample4

Gr

RvW
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.