Darstellung CSS Navigation

hasi63

Hallo zusammen
nun will ich mich auch mal etwas ins CSS reinleben. Leider stosse ich gleich zu anfang an schon an ein problem.

Ich habe untenstehenden Code. Das ganze ist eigentlich fast nach meinem geschmack gelungen. Eine "Kleinigkeit" macht mir aber zu schaffen.
Wenn Ich das Submenu öffnen lasse verschiebt es mir das ganze Hauptmenu nach rechts. Gedacht war das das Hauptmenu Fix (also ohne verschiebung, wenn das Submenu geöffnet wird) stehen bleibt.

Hat mir da vielleicht jemand einen Tipp

Gruss und danke im vorherein scchon mal

Harry

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Navigation zu allen wichtigen Bereichen</title>
        <link href="css/style.css" type="text/css" rel="stylesheet">
    </head>
    <body>
        <header>
            <menu>
                <ul>
                    <li class="topmenu">
                        <a href="index.html">Menu 1</a>
                        <ul>
                            <li class="submenu"><a href="#">Submenu<br> Produktiv</a></li>
                            <li class="submenu"><a href="#">Submenue 2</a></li>                        
                        </ul>
                    </li>
                    <li class="topmenu">
                        <a href="#">Produkte</a>                        
                        <ul>
                            <li class="submenu"><a href="#">submenue1</a></li>
                            <li class="submenu"><a href="#">submenue2</a></li>
                        </ul>
                    </li>                                

                </ul>      

            </menu>

        </header>
    </body>
</html>

Alles anzeigen

Code

/* Menue Leiste */


/* Zuerst das kommplete Menue*/
menu
{
    font-size: 16px;
    position: absolute; 
    font-family: Arial;    
    margin-left: 20em;
    margin-top: 10em;


}


/* Menu Reset*/
menu ul
{
    list-style-type: none;
    list-style-image: none;
    margin: 0;
    padding: 0;
}


menu li.topmenu
{
    float: left;
}


.topmenu a
{
    float: left;
    height: 50px;
    width: 80px;
    text-align: center;
    background-color: #009de0;
    border-radius: 4px;    
    border: 2px solid #ffffff;    
}


.topmenu ul
{
    display: none;
}


.topmenu a, .submenu a
{
    padding: 12px 18px;
    color: #ffffff;
    font-weight: bold;
    text-decoration: none;
    margin: 0;
}


.submenu a
{
    font-style: 12px;
    width: 9.3em;
    position: relative;
    clear: both;
    height: 20px;
    background-color: #e0f6ff;    
    color: #004394;
    border-radius: 0px;    
    text-align: left;
    border: 9px solid #e0f6ff;
    border-top-style: #ffffff;
    border-top: #999999 2px solid;

}


menu a:hover,  .topmenu.on a
{
    color: #ffffff;
    background-color: #e20019;
}


.topmenu:hover ul
{
    display: block;
    z-index: 500; 
}

Alles anzeigen

djheke

Probier mal. Die Farben musst du dir wieder anpassen.

HTML

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">


<style type="text/css">
* {
 margin:0;
 padding:0;
 list-style:none;
 text-decoration:none;
 box-sizing:border-box;
}


nav {
    float: left;
    width: 100%;
    background: #424242;
    font-size: 16px;
}




nav ul {
    margin: 0;
    padding: 0;
}




nav a {
    display: block;
    color: #fff;
    text-decoration: none;
}




nav ul li{
    position: relative;
    float: left;
    list-style: none;
}




nav ul li:hover {
    background: #DF0101;
}




nav ul li a {
    padding: 20px;
}




nav ul ul {
    position: absolute;
    top: -9999px;
    left: -9999px;
    background: #333;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.6);
}




nav ul ul li {
    float: none;
    width: 200px;
    border-bottom: 1px solid #555;
}




nav ul ul li a {
    padding: 10px 20px;
}




nav ul li:hover > ul {
top:auto;
left:0;
}




</style>
<title></title>




</head>
<body>
<nav>
<ul>
 <li class="topmenu"><a href="index.html">Menu 1</a>
    <ul>
       <li class="submenu"><a href="#">Submenu Produktiv</a></li>
       <li class="submenu"><a href="#">Submenue 2</a></li>                        
    </ul>
 </li>
 <li class="topmenu"><a href="#">Produkte</a>                        
    <ul>
       <li class="submenu"><a href="#">submenue1</a></li>
       <li class="submenu"><a href="#">submenue2</a></li>
    </ul>
 </li>                                
</ul>      
</nav>
</body>
</html>

Alles anzeigen

hasi63

Hallo djheke
Hmmm.... auf die ganz schnelle: Danke, dein Code Flutscht. Ich schaue mal ob ich heute Abend das ganze wieder hinbekomme mit den Farben usw.

Infos folgen noch

Gruss

Harry

modem-kind

Moin
also ich habe in Deiner CSS nur in dem Selrctor
.submenu a
{
font-style: 12px;
/* width: 9.3em; */
position: relative;
clear: both;
height: 20px;
background-color: #e0f6ff; color: #004394;
border-radius: 0px;
text-align: left;
/* border: 9px solid #e0f6ff; */
border-top-style: #ffffff;
border-top: #999999 2px solid;
}

die zwei Zeilen auskommentiert.

Gruß modem-kind

hasi63

Hallo modem-kind
danke dir für die Antwort.
Leider war das nicht die lösung da die Untermenus breiter und auch weniger hoch sein müssen, als das Hauptmenu.

Am Wochenende sollte ich ev. wirklich etwas Zeit haben um den Code nochmals zu Prüfen

Gruss

Harry

Tags