dropdownnavi mit variabler breite der buttons

A

aiquita

Mitglied
hallo
ich habe mich bei meiner seite an nem dropdownmenü versucht
ich hatte schonmal in der vergangenheit ne lösung gehabt die fuktioniert aber nur dann wenn alle buttons gleich breit sind
bei mir passt sich die breite aber an den textinhalt an

das menü ist beim button minecraft

hier ist meine seite http://www.marvinbrieger.de/neu/

und hier der quellcode
HTML: 
<?php
$site = "home";

if (array_key_exists("site", $_GET)) {
	$site = $_GET['site'];
}
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
    <title>Titel</title>

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" />

    <link href="style.css" type="text/css" rel="stylesheet" />
    <link href="favicon.ico" type="image/x-icon" rel="shortcut icon" />

    <script language="JavaScript" type="text/javascript">
    	function LoadImage(){
    		var x = Math.floor(1+(2)*(Math.random()));
    		document.getElementById("header").style.background = "url(images/style/header/"+x+".jpg)";

    		setTimeout('LoadImage()', 3000);
    	}

        function mopen ()
        {
            document.getElementById("menu").style.display = 'block';
        }
        function mclose ()
        {
            document.getElementById("menu").style.display = 'none';
        }
    </script>
</head>

<body onload="LoadImage()">
    <div id="border">

    </div>
    <div id="content">
        <div id="top">

        </div>
        <div id="head">
            <div id="header">

            </div>
            <div id="nav">
                <ul>
                    <li><a href="?site=home" class="active" style="border-left:none;">Home</a></li>
                    <li><a href="?site=ueber_mich">&Uuml;ber mich</a></li>
                    <li><a href="?site=minecraft" onmouseover="mopen()" onmouseout="mclose()">Minecraft</a></li>
                        <ul id="menu" onmouseover="mopen()" onmouseout="mclose()">
                            <li><a href="">Minecraft</a></li>
                            <li><a href="">Downloads</a></li>
                            <li><a href="">Server</a></li>
                        </ul>
                    <li><a href="?site=galerie">Galerie</a></li>
                    <li><a href="?site=fuer_freunde">F&uuml;r Freunde</a></li>
                    <li><a href="?site=links">Links</a></li>
                    <li><a href="?site=kontakt">Kontakt</a></li>
                    <li><a href="?site=impressum"   style="border-right:none;">Impressum</a></li>
                </ul>
            </div>
        </div>
        <div id="main">
            <div class="postl">

            </div>
            <div class="postr">

            </div>
            <div class="postl">

            </div>
            <div class="postr">

            </div>
            <div class="clear">

            </div>
        </div>
    </div>
</body>
</html>
Code: 
* {
    margin:0px;
    padding:0px;
    font-family:Verdana;
}

html, body {
    margin:0 auto;
    width:1000px;
    height:100%;
    background:url(images/style/bg6.png) #333333;
}

#border {
    float:left;
    width:10px;
    height:100%;
    position:fixed;
    background:white;
}

#content {
    float:right;
    width:990px;
}

#top {
    width:990px;
    height:10px;
    background:white;
}

#head {
    margin:20px 0px 20px 20px;
    padding:10px;
    width:950px;
    height:253px;
    background:white;
}

#header {
    width:950px;
    height:200px;
}

#nav {
    width:950px;
    height:53px;
    background: url(images/style/navbg1.jpg);
}

#nav ul {
    list-style:none;
}

#nav li a {
    float:left;
    padding:13px;
    height:27px;
    background:url(images/style/navbg1.jpg);
    font-size:17px; color:white; text-decoration:none;
    border-left: 1px solid #707F90;
    border-right: 1px solid #3C444D;
}

#nav li a:hover {
    background:url(images/style/navbg2.jpg);
}

#nav li a.active {
    background:url(images/style/navbg3.jpg);
}

#menu {
    display:none;
}

#main  {
    margin:0px;
    padding:10px 10px 0px 30px;
    width:950px;
    background:white;
}

.postl {
    margin-right:10px;
    margin-bottom:10px;
    float:left;
    padding:10px;
    width:450px;
    height:100px;
    border-top :30px solid #FF5500;
    background:#E1E1E1;
}

.postr {
    margin-bottom:10px;
    float:left;
    padding:10px;
    width:450px;
    height:100px;
    border-top :30px solid #FF5500;
    background:#E1E1E1;
}

.clear {
    clear:both;
}
 
Dies ist hinzugekommen. #menu wird nicht gebraucht.
Code: 
#nav li {
 float:left;
 position:relative;
}

#nav li ul {
    display:none;
}
#nav li:hover ul {
    display:block;
    position:absolute;
    top:53px;
    width:auto;
    background:#09c; 
}

#nav ul ul li  {
 width:100%;
 background:#aaa;
}

#nav ul ul li a {
 display:block;
 width:100%;
 background:#a33;
 color:#fff;
}

Und hier die richtige verschachtelung
Code: 
  <li><a href="#">Minecraft</a>
                        <ul>
                            <li><a href="#">Minecraft</a></li>
                            <li><a href="#">Downloads</a></li>
                            <li><a href="#">Server</a></li>
                        </ul>
                       </li>

Wenn du den IE kleiner 7 doch noch unterstützen möchtest, dann nimm eine htc Datei oder Suckerfish Menu.
Ansonsten brauchst du kein JS.
 
Ich weiß getz ehrlich gesagt nicht, wo das Problem ist. Oder ist es ein Lösungsvorschlag für solche Menüs?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück