webForumDet fria alternativet

Design på CSS submeny

3 svar · 564 visningar · startad av Danielkun

DanielkunMedlem sedan maj 2003361 inlägg
#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>
DanielkunMedlem sedan maj 2003361 inlägg
#2

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

zcorpanMedlem sedan dec. 20042 245 inlägg
#3

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;
DanielkunMedlem sedan maj 2003361 inlägg
#4

Tack! :)

134 ms totalt · 3 externa anrop · v20260731065814-full.30151723
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
132 ms — hämta tråd, inlägg och bilagor (db)