kostenloser Webspace werbefrei: lima-city

Hilfe bei Dropdown

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   freakystyle

   freakystyle hat kostenlosen Webspace.

   11:41, 4.8.2009

   Hallo
   Ich will auf meiner Wordpress page ein Dropdown menü einbinden und habe dabei ein Problem.
   
   Momentan benutze ich das WP CSS DropdownMenu-Plugin ( http://wordpress.org/extend/plugins/wordpress-css-drop-down-menu/ )
   Damit werden die Unterpunkte in einer Liste untereinander dargestellt. Ich bräuchte die Punkte aber Nebeneinander.
   Also oben eine horizontale Hauptleiste und wenn man über einen Punkt hovert direkt drunter eine horizontale Leiste mit den Unterpunkten.
   Ich brauche nur einen Unterpunkt also kein Multilevel.
   
   Kann mir vill jemand helfen um entweder das Plugin so umzuscripten, damit es wie gewünscht funktioniert oder ein neues Script zu schreiben?
   
   lg Freaky
   
   Beitrag zuletzt geändert: 4.8.2009 11:42:31 von freakystyle

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. e********l

   13:53, 4.8.2009

   Ich hab mir das jetzt nicht angeschaut, aber ich wette da muss man lediglich für das ein oder andere Element die CSS Definition "float: left" einfügen.
4. Autor dieses Themas

   freakystyle

   freakystyle hat kostenlosen Webspace.

   16:17, 4.8.2009

   Ich kriegs irgendwie nicht in...
   Vill kannst du mir genau sagen wo ich es einfügen müsste
   Hier der Code:
   

   .menu {width:545px; height:32px; position:relative; z-index:100; font-size: 24px; font-family:Forte; text-decoration:sharp;}
   /* hack to correct IE5.5 faulty box model */
   * html .menu {width:746px; w\idth:745px;}
   /* remove all the bullets, borders and padding from the default list styling */
   .menu ul {padding:0;margin:0;list-style-type:none;float: left;}
   .menu ul ul {width:149px;}
   /* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
   .menu li {float: left; width:149px;position:relative;}
   /* style the links for the top level */
   .menu a, .menu a:visited {display:block;font-size: 24px;text-decoration:none; color:#FFFFFF; width:138px; height:30px; background:#000000; padding-left:10px; line-height:29px;}
   /* a hack so that IE5.5 faulty box model is corrected */
   * html .menu a, * html .menu a:visited {width:149px; w\idth:138px;}
   
   /* style the second level background */
   .menu ul ul a.drop, .menu ul ul a.drop:visited {background:#000000 url(http://www.cssplay.co.uk/menus/breadcrumbs/grey-arrow.gif) no-repeat 130px center; }
   /* style the second level hover */
   .menu ul ul a.drop:hover{ background:#000000 url(http://www.cssplay.co.uk/menus/breadcrumbs/blue-arrow.gif) no-repeat 130px center;}
   .menu ul ul :hover > a.drop {background:#000000 url(http://www.cssplay.co.uk/menus/breadcrumbs/blue-arrow.gif) no-repeat 130px center;}
   /* style the third level background */
   .menu ul ul ul a, .menu ul ul ul a:visited {background:#000000;}
   /* style the third level hover */
   .menu ul ul ul a:hover {background:#000000;}
   
   
   /* hide the sub levels and give them a positon absolute so that they take up no room */
   .menu ul ul {float: left; visibility:hidden;position:absolute;height:0;top:31px;left:0; width:149px;border-top:1px solid #000; text-align:left;}
   /* another hack for IE5.5 */
   * html .menu ul ul {top:30px;t\op:31px;}
   
   /* position the third level flyout menu */
   .menu ul ul ul{left:149px; top:-1px; width:149px;}
   
   /* position the third level flyout menu for a left flyout */
   .menu ul ul ul.left {left:-149px;}
   
   /* style the table so that it takes no ppart in the layout - required for IE to work */
   .menu table {position:absolute; top:0; left:0; border-collapse:collapse;;}
   
   /* style the second level links */
   .menu ul ul a, .menu ul ul a:visited {background:#000000; color:#FFF; height:auto; line-height:1em; padding:5px 10px; width:128px;border-width:0 1px 1px 1px;}
   /* yet another hack for IE5.5 */
   * html .menu ul ul a, * html .menu ul ul a:visited {width:150px;w\idth:128px;}
   
   /* style the top level hover */
   .menu a:hover, .menu ul ul a:hover{color:#FFFFFF; background:#000000; text-decoration:underline;}
   .menu :hover > a, .menu ul ul :hover > a {color:#FFFFFF; background:#000000;}
   
   /* make the second level visible when hover on first level list OR link */
   .menu ul li:hover ul,
   .menu ul a:hover ul{visibility:visible; }
   /* keep the third level hidden when you hover on first level list OR link */
   .menu ul :hover ul ul{visibility:hidden;}
   /* make the third level visible when you hover over second level list OR link */
   .menu ul :hover ul :hover ul{ visibility:visible;}

5. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?