--- title: "Design på CSS submeny" type: "forum-thread" url: "https://www.webforum.nu/amne/html-css/134458-design-på-css-submeny" topic: "HTML & CSS" topic_url: "https://www.webforum.nu/amne/html-css" author: "Danielkun" published: "2005-09-18T03:41:47.000Z" updated: "2005-09-18T10:15:10.000Z" replies: 3 views: 568 page: 1 pages: 1 language: "sv-SE" site: "webForum — webforum.nu" rights: "Upphovsrätten till varje inlägg tillhör dess författare." attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/134458-design-på-css-submeny" --- # Design på CSS submeny ## #1 — Danielkun, 2005-09-18T03:41Z Hej! Jag hoppas att någon kan hjälpa mig med detta. Jag har lärt mig mycket nu under det 4½ timmar jag har bråkat med detta men jag lyckas inte få en svart "ram" runt sub menyen. Här är menyn nu: Tack! ``` A#pluttat {BORDER-BOTTOM: #333366 1px dotted;BORDER-TOP: #333366 1px dotted} A#pluttat2 {BORDER-BOTTOM: #333366 1px dotted;} ul { margin: 0; padding: 0; list-style: none;} ul li { position: relative; float: left;} #menu1_storlek_och_placering { text-align: center; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; width:65px;} #menu2_storlek_och_placering { text-align: center; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; border-left: 1px solid #ccc; width:90px;} #menu3_storlek_och_placering { text-align: center; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; width:80px;} #submenu2_storlek_och_placering { width:100px; position: relative; right: 5px; top: 3px;} #submenu3_storlek_och_placering { width:160px; position: relative; right: 40px; top: 3px;} li ul { position: absolute; left: 0; /* Set 1px less than menu width */ top: auto; display: none;} #nav li li a:hover { background: #e02618; color: #fff;} /* Styles for Menu Items */ ul li a { display: block; text-decoration: none; color: #FFF; background: #e02618; /* IE6 Bug */ padding: 5px;} /* this sets all hovered lists to yellow */ li:hover a, li.over a, li:hover li a:hover, li.over li a:hover { color: #dc3023; background-color: #fff2c5;} /* Styles for Submenu */ li:hover li a, li.over li a { color: #463c2f;} /* Sub Menu Styles */ li ul li a { padding: 4px 5px; background: url('gul_bild.gif') top left;} li:hover ul, li.over ul { display: block; } /* The magic */

``` Permalänk: https://www.webforum.nu/p/134458 ## #2 — Danielkun, 2005-09-18T09:00Z Löste det nu. kanske inte som jag hade velat löst det men det här funkar med.. La till: border-right: 1px solid #7d6340; border-left: 1px solid #7d6340; border-top: 1px solid #7d6340; på varje LI och en egen ID på sista länken i varje sub box som la till sista strecket. Svårt det här med CSS :q Permalänk: https://www.webforum.nu/p/1673035 ## #3 — zcorpan, 2005-09-18T09:54Z Ett tips när du leker med CSS: sätt inte webbläsare i quirks mode. :) Använd en doctype. ``` ``` > **Danielkun skrev:** > > border-right: 1px solid #7d6340; > border-left: 1px solid #7d6340; > border-top: 1px solid #7d6340; ...ger samma resultat som: ``` border: 1px solid #7d6340; border-bottom: none; ``` Permalänk: https://www.webforum.nu/p/1673054 ## #4 — Danielkun, 2005-09-18T10:15Z Tack! :) Permalänk: https://www.webforum.nu/p/1673060 --- Tråden på webben: https://www.webforum.nu/amne/html-css/134458-design-på-css-submeny