Frågan#1 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:
http://www.iremo.com/lyckas.htm
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 */
</style>
<ul id="nav">
<li id="menu1_storlek_och_placering"><a href="#">Home</a></li>
<li id="menu2_storlek_och_placering"><a href="#">About</a>
<ul>
<li id="submenu2_storlek_och_placering"><a href="#">History</a></li>
<li id="submenu2_storlek_och_placering"><a href="#" id="pluttat">Team</a></li>
<li id="submenu2_storlek_och_placering"><a href="#">Offices</a></li>
</ul>
</li>
<li id="menu3_storlek_och_placering"><a href="#">Services</a>
<ul>
<li id="submenu3_storlek_och_placering"><a href="#">Web Design</a></li>
<li id="submenu3_storlek_och_placering"><a href="#" id="pluttat">Internet Marketing</a></li>
<li id="submenu3_storlek_och_placering"><a href="#">Hosting</a></li>
<li id="submenu3_storlek_och_placering"><a href="#" id="pluttat">Domain Names</a></li>
<li id="submenu3_storlek_och_placering"><a href="#">Broadband</a></li>
</ul>
</li>
</ul>
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
ZzcorpanMedlem sedan dec. 20042 245 inlägg Ett tips när du leker med CSS: sätt inte webbläsare i quirks mode. :) Använd en doctype.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
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;