CSS Untermenüs ohne Abrundung

PC FREAKY · 15. Oktober 2011

Hallo,

Ich habe eine horizontale Navigation welche sich ausklappt.
Diese Navigation soll an den oberen Beiden Ecken abgerundet sein, die unternavigation die darunter ausgeklappt wird, soll aber keine abrundungen haben.

Wie realisiere ich das?

hier mein html-code

PHP:

<style type="text/css">
  body {
    font: normal 100.01% Helvetica, Arial, sans-serif;
    color: black; background-color: #ffffe0;
  }

  div#Rahmen {
    width: 1000px;
    background-color:#001ab5;
  }
  * html div#Rahmen {  /* Korrektur fuer IE 5.x */
    width: 1000px;
    w\idth: 1000px;
  }
  div#Rahmen div {
    clear: left;
  }
  ul#Navigation {
    margin: 0; padding: 0;
    text-align: center;
  }

  ul#Navigation li {
    list-style: none;
    float: left;
    width: 8.6em;
    position: relative;
    padding: 0;
  }
  * html ul#Navigation li {  /* Korrektur fuer den IE 5 und 6 */
    margin-bottom: -0.4em;
  }
  *:first-child+html ul#Navigation li {  /* Korrektur fuer den IE 7 */
    margin-bottom: -0.1em;
  }

  ul#Navigation li ul {
    margin: 0; padding: 0;
    position: absolute;
    top: 1.7em;
  }
  * html ul#Navigation li ul {  /* Korrektur fuer IE 5.x */
    left: -1.5em;
    lef\t: -0.4em;
  }
  ul#Navigation li ul li {
    float: none;
    display: block;
    margin-bottom: 0.2em;
  }

  ul#Navigation a, ul#Navigation span {
    display: block;
    padding: 0.2em 1em;
    text-decoration: none; font-weight: bold;
    border-top: 1px solid black;
    border-left: 1px solid black;
    border-right: 1px solid black;
    color: maroon; background-color: #ccc;
    -webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
  }
  * html ul#Navigation a, * html ul#Navigation span {  /* nur fuer IE erforderlich */
    width: 100%;
    w\idth: 6.4em;
  }
  ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: white; background-color: gray;
  }
  li a#aktuell {  /* aktuelle Rubrik kennzeichnen */
    color: maroon; background-color: silver;
  }
  ul#Navigation li ul span {  /* aktuelle Unterseite kennzeichnen */
    background-color: maroon;
  }
  /* Erweiterung zur dynamischen Ein-/Ausblendung */
  ul#Navigation li>ul {
    display: none; top: 1.6em;
  }
  ul#Navigation li:hover>ul, ul#Navigation li>a#aktuell+ul {
    display: block;
  }

  /* Workaround fuer den IE 7 */
  *:first-child+html ul#Navigation ul {
    background-color:silver; padding-bottom:0.4em;
  }
</style>

PHP:

  <div id="Rahmen"><ul id="Navigation">
    <li><a href="#Beispiel">Seite 1</a></li>

    <li><a href="#Beispiel">Seite 2</a>
      <ul>
        <li><a href="#Beispiel">Seite 2a</a></li>
        <li><a href="#Beispiel">Seite 2b</a></li>
      </ul>
    </li>

    <li><a href="#Beispiel">Seite 3</a></li>

    <li><a id="#Beispiel" href="#Beispiel">Seite 4</a>
      <ul>
        <li><a href="#Beispiel">Seite 4a</a></li>
        <li><a href="#Beispiel">Seite 4b</a></li>
        <li><a href="#Beispiel">Seite 4c</a></li>
      </ul>
    </li>

    <li><a href="#Beispiel">Seite 5</a></li>
  </ul><div></div></div>

rumbalotte · 15. Oktober 2011

ne eigene klasse für die unterpunkte anlegen?

PC FREAKY · 15. Oktober 2011

auf die idee kam ich auch schon

aber dann war plötzlich mein komplettes design + meine Einblendungen weg...

ich habe es so geändert

PHP:

<style type="text/css">
  body {
    font: normal 100.01% Helvetica, Arial, sans-serif;
    color: black; background-color: #ffffe0;
  }

  div#Rahmen {
    width: 1000px;
    background-color:#001ab5;
  }
  * html div#Rahmen {  /* Korrektur fuer IE 5.x */
    width: 1000px;
    w\idth: 1000px;
  }
  div#Rahmen div {
    clear: left;
  }
  ul#Navigation {
    margin: 0; padding: 0;
    text-align: center;
  }

  ul#Navigation li {
    list-style: none;
    float: left;
    width: 8.6em;
    position: relative;
    padding: 0;
  }
  * html ul#Navigation li {  /* Korrektur fuer den IE 5 und 6 */
    margin-bottom: -0.4em;
  }
  *:first-child+html ul#Navigation li {  /* Korrektur fuer den IE 7 */
    margin-bottom: -0.1em;
  }

  ul#Navigation li ul {
    margin: 0; padding: 0;
    position: absolute;
    top: 1.7em;
  }
  * html ul#Navigation li ul {  /* Korrektur fuer IE 5.x */
    left: -1.5em;
    lef\t: -0.4em;
  }
  ul#Navigation li ul li {
    float: none;
    display: block;
    margin-bottom: 0.2em;
  }

  ul#Navigation a,  {
    display: block;
    padding: 0.2em 1em;
    text-decoration: none; font-weight: bold;
    border-top: 1px solid black;
    border-left: 1px solid black;
    border-right: 1px solid black;
    color: black; background-color: #ccc;
    -webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

ul#Navigation span{
    display: block;
    padding: 0.2em 1em;
    text-decoration: none; font-weight: bold;
    border-top: 1px solid black;
    border-left: 1px solid black;
    border-right: 1px solid black;
    color: black; background-color: #ccc;
  }
  * html ul#Navigation a, * html ul#Navigation span {  /* nur fuer IE erforderlich */
    width: 100%;
    w\idth: 6.4em;
  }
  ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
    border-left-color: black; border-top-color: black;
    color: black; background-color:#aeaeae;
  }
  li a#aktuell {  /* aktuelle Rubrik kennzeichnen */
    color: maroon; background-color: silver;
  }
  ul#Navigation li ul span {  /* aktuelle Unterseite kennzeichnen */
    background-color: maroon;
  }
  /* Erweiterung zur dynamischen Ein-/Ausblendung */
  ul#Navigation li>ul {
    display: none; top: 1.6em;

  }
  ul#Navigation li:hover>ul, ul#Navigation li>a#aktuell+ul {
    display: block;
  }

  /* Workaround fuer den IE 7 */
  *:first-child+html ul#Navigation ul {
    background-color:silver; padding-bottom:0.4em;
  }
</style>

NoSyMe · 15. Oktober 2011

ul#Navigation li ul li {
float: none;
display: block;
margin-bottom: 0.2em;
}

Hier die Border-Effekte wieder auf 0 setzen, falls du's noch nicht gelöst hast. Da du ja sehr auf Kompatibilität zu schauen scheinst, mit "0px none"

ul#Navigation li ul li {
float: none;
display: block;
margin-bottom: 0.2em;
-webkit-border-top-left-radius: 0px none;
-webkit-border-top-right-radius: 0px none;
-moz-border-radius-topleft: 0px none;
-moz-border-radius-topright: 0px none;
border-top-left-radius: 0px none;
border-top-right-radius: 0px none;
}

Mr. Snoot · 15. Oktober 2011

Wie realisierst du denn die Abrundung im Moment? Hab mir den Code jetzt mehrere male angeschaut, aber nichts gefunden. Oder bin ich tatsächlich blind?

rumbalotte · 15. Oktober 2011

Mr. Snoot schrieb:
Wie realisierst du denn die Abrundung im Moment? Hab mir den Code jetzt mehrere male angeschaut, aber nichts gefunden. Oder bin ich tatsächlich blind?

Anscheinend

kuck dir die ganzen radius einträge an

@PC Freaky
entweder die Verkettung von NoSyMe oder wie gesagt ne eigene Klasse:

Code:

<style type="text/css">
  body {
    font: normal 100.01% Helvetica, Arial, sans-serif;
    color: black; background-color: #ffffe0;
  }

  div#Rahmen {
    width: 1000px;
    background-color:#001ab5;
  }
  * html div#Rahmen {  /* Korrektur fuer IE 5.x */
    width: 1000px;
    w\idth: 1000px;
  }
  div#Rahmen div {
    clear: left;
  }
  ul#Navigation {
    margin: 0; padding: 0;
    text-align: center;
  }

  ul#Navigation li {
    list-style: none;
    float: left;
    width: 8.6em;
    position: relative;
    padding: 0;
  }
  * html ul#Navigation li {  /* Korrektur fuer den IE 5 und 6 */
    margin-bottom: -0.4em;
  }
  *:first-child+html ul#Navigation li {  /* Korrektur fuer den IE 7 */
    margin-bottom: -0.1em;
  }

  ul#Navigation li ul {
    margin: 0; padding: 0;
    position: absolute;
    top: 1.7em;
  }
  * html ul#Navigation li ul {  /* Korrektur fuer IE 5.x */
    left: -1.5em;
    lef\t: -0.4em;
  }
  ul#Navigation li ul li {
    float: none;
    display: block;
    margin-bottom: 0.2em;
  }

  ul#Navigation a, ul#Navigation span {
    display: block;
    padding: 0.2em 1em;
    text-decoration: none; font-weight: bold;
    border-top: 1px solid black;
    border-left: 1px solid black;
    border-right: 1px solid black;
    color: maroon; background-color: #ccc;
    -webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
  }
  
    ul#Subnavi a, ul#Subnavi span {
    display: block;
    padding: 0.2em 1em;
    text-decoration: none; font-weight: bold;
    border-top: 1px solid black;
    border-left: 1px solid black;
    border-right: 1px solid black;
    color: maroon; background-color: #ccc;
    -webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
  }
  * html ul#Navigation a, * html ul#Navigation span {  /* nur fuer IE erforderlich */
    width: 100%;
    w\idth: 6.4em;
  }
  ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: white; background-color: gray;
  }
  li a#aktuell {  /* aktuelle Rubrik kennzeichnen */
    color: maroon; background-color: silver;
  }
  ul#Navigation li ul span {  /* aktuelle Unterseite kennzeichnen */
    background-color: maroon;
  }
  /* Erweiterung zur dynamischen Ein-/Ausblendung */
  ul#Navigation li>ul {
    display: none; top: 1.6em;
  }
  ul#Navigation li:hover>ul, ul#Navigation li>a#aktuell+ul {
    display: block;
  }

  /* Workaround fuer den IE 7 */
  *:first-child+html ul#Navigation ul {
    background-color:silver; padding-bottom:0.4em;
  }
</style>

 <div id="Rahmen"><ul id="Navigation">
    <li><a href="#Beispiel">Seite 1</a></li>

    <li><a href="#Beispiel">Seite 2</a>
      <ul id="Subnavi">
        <li><a href="#Beispiel">Seite 2a</a></li>
        <li><a href="#Beispiel">Seite 2b</a></li>
      </ul>
    </li>

    <li><a href="#Beispiel">Seite 3</a></li>

    <li><a id="#Beispiel" href="#Beispiel">Seite 4</a>
      <ul  id="Subnavi">
        <li><a href="#Beispiel">Seite 4a</a></li>
        <li><a href="#Beispiel">Seite 4b</a></li>
        <li><a href="#Beispiel">Seite 4c</a></li>
      </ul>
    </li>

    <li><a href="#Beispiel">Seite 5</a></li>
  </ul><div></div></div>

Suche

CSS Untermenüs ohne Abrundung

PC FREAKY

Commander

rumbalotte

Lieutenant

PC FREAKY

Commander

NoSyMe

Lt. Commander

Mr. Snoot

Gast

rumbalotte

Lieutenant

Ähnliche Themen