Avatar billede htx98i17 Professor
17. februar 2011 - 10:28 Der er 8 kommentarer og
1 løsning

Hover menu inline

Jeg har følgende eksempel fra nettet som jeg har strippet ned.

Jeg vil gerne have lavet menuen om til at være inline (vandret) og uden prikker i punktopstillingen.

Kan nogen hjælpe med det?

<!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>
    <title>Pure CSS Hover Menu</title>
    <style type="text/css">
     
        .trigger ul.menu
        {
            display: none;
            position: absolute;
            margin: 0;
            padding: .4em;
            list-style-type: none;
            border: solid 1px #ccc;
        }
     
        .trigger ul.menu li a
        {
            display: inline;
        }
        .trigger:hover
        {
            background: transparent url(hover-menu-sample-glass-panel-body-selected.png) no-repeat center;
        }
        .trigger:hover ul.menu
        {
            display: inline;
        }
       
    </style>
</head>
<body>

<ul id="hovedmenu">
    <li class="trigger">
        <ul class="menu">
            <li><a href="java script:;">View</a> </li>
            <li><a href="java script:;">Edit</a> </li>
            <li><a href="java script:;">Delete</a> </li>
        </ul>
        <span>Flat Black</span>
    </li>
    <li class="trigger">
        <ul class="menu">
            <li><a href="java script:;">View</a> </li>
            <li><a href="java script:;">Edit</a> </li>
            <li><a href="java script:;">Delete</a> </li>
        </ul>
        <span>Flat White</span>
    </li>
</ul>
 
</body>
</html>
Avatar billede stenger Nybegynder
17. februar 2011 - 10:38 #1
For at fjerne punkterne skal du smide

list-style-type:none;

på din .trigger ul.menu


For at få de enkelte punkter vandrette kan du smide følgende i din CSS:

.trigger ul.menu li {
  float:left;
}

/Stenger
Avatar billede htx98i17 Professor
17. februar 2011 - 10:43 #2
Det mente jeg også, men af en eller anden grund, har det ingen indvirkning.
Avatar billede stenger Nybegynder
17. februar 2011 - 10:50 #3
Prøv også at smide float:left; på din UL (og evt. en width for at styre den).

/Stenger
Avatar billede htx98i17 Professor
17. februar 2011 - 10:53 #4
Det har desværre heller ingen indvirkning. Prøv at lave en fil med koden og prøv at se om det fungerer i din browser. Jeg bruger IE9.
Avatar billede stenger Nybegynder
17. februar 2011 - 11:05 #5
Prøv det her:

<style type="text/css">
        ul#hovedmenu  {
            list-style-type:none;
            }
           
        .trigger ul.menu
        {
            float:left;
            width:200px;
            display: none;
            position: absolute;
            margin: 0;
            padding: .4em;
            list-style-type: none;
            border: solid 1px #ccc;
        }
     
        .trigger ul.menu li a
        {
            display: inline;
        }
        .trigger:hover
        {
            background: transparent url(hover-menu-sample-glass-panel-body-selected.png) no-repeat center;
        }
        .trigger:hover ul.menu
        {
            display: inline;
        }
        .trigger ul.menu li {
            float:left;
            }
       
    </style>


Det virker ihvertfald ved mig i IE8. Skal ikke kunne svare for IE9, men det er der alligevel ikke nogen af dine brugere, der benytter, så... :)

/Stenger
Avatar billede htx98i17 Professor
17. februar 2011 - 11:11 #6
Din kode får underpunkterne som dukker op, til at være vandret.

Men det skal være omvendt. Således at hovedpunnkterne er vandret og underpunkterne er opstillet lodret.
Avatar billede stenger Nybegynder
17. februar 2011 - 11:22 #7
Prøv det her:

    <style type="text/css">
        ul#hovedmenu  {
            list-style-type:none;
            }
        ul#hovedmenu li {
            float:left;
            }   
        .trigger ul.menu
        {
            display: none;
            position: absolute;
            margin: 0;
            padding: .4em;
            list-style-type: none;
            border: solid 1px #ccc;
        }
        .trigger ul.menu li {
            clear:both;
            }
        .trigger ul.menu li a
        {
            display: inline;
        }
        .trigger:hover
        {
            background: transparent url(hover-menu-sample-glass-panel-body-selected.png) no-repeat center;
        }
        .trigger:hover ul.menu
        {
            display: inline;
        }
       
    </style>
Avatar billede htx98i17 Professor
17. februar 2011 - 11:27 #8
Yes, der var den! Nu skal jeg bare have overskuet hvorfor hehe, men det skal jeg nok finde ud af.

Tak for hjælpen. Lig et svar.
Avatar billede stenger Nybegynder
17. februar 2011 - 11:28 #9
Velbekomme :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester