Meny med rullgardin

[Jompan]

Jag jobbar i en PHP-miljö, och försöker skapa en meny, där hover över knappen Styrelse ska visa upp 3 underliggande alternativ, och döljas när jag väljer vidare. Som det är nu lägger sig Alt1-3 i fast horisontell linje efter 'Styrelse'.

(Och nu har jag rört till det hela, så det är svårt att komma vidare.)

 

Min HTML:

<div id="navigation">
<ul id="navlist">
<li><a href="index.php">Hem</a></li>
<li><a href="styrelse.php">Styrelse</a>
<ul id="subnavlist">
     <li><a href="sida1.php">Alt 1</a></li>
     <li><a href="sida2.php">Alt 2</a></li>
     <li><a href="sida3.php">Alt 3</a></li>
</ul>
</li>

<li><a href="lankar.php">Länkar</a></li>
<li><a href="kontakt.php">Kontakt</a></li>
</ul>
</div>

 

CSS:

#navigation { 
   font-family: tahoma, verdana, geneva, sans-serif; 
    letter-spacing: 1px;
    font-size: 15px; 
    padding: 5px;
    display: inline;
    background-color: blue;
}   

 

ul#navlist {
    margin-left: 20px;
    padding-left: 0;
}

ul#navlist li {
    display: none;
    padding: 5px;
    list-style-type: none;
}

 

#navlist a { 
    padding: 5px 10px; 
}

 

#navlist a:link {                      
    color: #0033ff; 
    font-weight: bold;
    background-color: white; 
    border:1px solid #0069d1;
    text-decoration: none;
}

 

#navlist a:visited {
    color: #0033ff; 
    font-weight: bold;
    background-color: white; 
    text-decoration: none;
    border:1px solid #0069d1;
}

#navlist a:hover{
    color: black; 

    text-decoration: none;
}

 

#navlist a:active{
    color: #669900; /* Grön */
    background-color: #ccdae5; /* Gråblå */
    text-decoration: none;
}

ul#subnavlist { display: none; }
ul#subnavlist li { float: none;  }

ul#subnavlist li a {
    margin: 1px 3px;
}

 

ul#navlist li:hover ul#subnavlist {
    display: block;
    position: absolute;
    margin: 0 9px;
    padding-top: 5px;
    padding-bottom: 2px;
    background-color: #DDCDFE;
}    

 

ul#navlist li:hover ul#subnavlist li a {
    display: block;
    border: none;
    padding: 5px;
}
 

Tacksam för hjälp.

// Agneta

 

 

[Cluster]

Orkade inte städa i din kod men hade en gammal egen liggandes som jag tror gör det du är ute efter:

 

CSS:

#navigation {
  font-size:0.75em;
  width:150px;
  }

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

#navigation li {
  list-style: none;
  }

ul.top-level {
  background:#666;
  }

ul.top-level li {
  border-bottom: #fff solid;
  border-top: #fff solid;
  border-width: 1px;
  }

#navigation a {
  color: #fff;
  cursor: pointer;
  display:block;
  height:25px;
  line-height: 25px;
  text-indent: 10px;
  text-decoration:none;
  width:100%;
  }

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

#navigation li:hover {
  background: #f90;
  position: relative;
  }

ul.sub-level {
  display: none;
  }

li:hover .sub-level {
  background: #999;
  border: #fff solid;
  border-width: 1px;
  display: block;
  }

HTML:

<div id="navigation">
  <ul class="top-level">
    <li><a href="index.php">Hem</a></li>
    <li>
      <a href="styrelse.php">Styrelse</a>
      <ul class="sub-level">
         <li><a href="sida1.php">Alt 1</a></li>
         <li><a href="sida2.php">Alt 2</a></li>
         <li><a href="sida3.php">Alt 3</a></li>
      </ul>
    </li>
    <li><a href="lankar.php">Länkar</a></li>
    <li><a href="kontakt.php">Kontakt</a></li>
  </ul>
</div>

 

Du får styla om med färger o.dyl så det passar din layout.

[Jompan]

Tack, ungefär så har jag tänkt mig. Men menyn ska vara horisontell för den ligger över content.

 

// Agneta

 

[Cluster]

Ah, ok det såg jag inte.

Då kan du kolla om t.ex någon av dessa passar dig: 

http://vizua.net/simple-pure-css-drop-down-menu

https://matthewjamestaylor.com/centred-dropdown-menus 

https://w3bits.com/labs/css-dropdown-menu/

https://csswizardry.com/demos/css-dropdown/

 

 

[Jompan]

Tack så hjärtligt för hjälpen. Nu klarar jag mig bra, tror jag.

// Agneta