CSS css Dropdownmenü

[Ketasilie]

Hallo ,

ich habe eine Dropdownliste mithilfe von HTML und css erstellt

So sieht sie aus:


Mein Problem dabei ist jedes zweite oder dritte mal wenn ich die LiveVorschau starte, bekommen die werte aus dem Menü (nicht das Menü selbst) einen blauen border(auch wenn das Menü nicht "ausgeklappt" ist), ungeachtet dessen ob ich Änderungen vornehme oder nicht wenn ich die seite aktualisiere verschwinden diese....
Da mir auch sonst grade niemand weiterhelfen kann probiere ich es mal hier
PS: So sieht es mit dem blauen Border aus

Liebe Grüße

Ketasilie

 

[blablub1212]

Wenn du sagst LiveVorschau, was nimmst du denn für ein Programm? Diese blauen Rahmen kenne ich z.B. von den Chrome Developertools, die treten auf wenn man eine Stelle im Code gerade fokusiert hat. Daneben wäre es auch praktisch wenn du hier einfach noch kurz deinen Code anhängst, dass machst du hier im Forum mittels des CODE Tags. (Einfach auf Zitieren klicken und QUOTE mit CODE ersetzen)

/edit: Das zweite Bild ändert meine Aussage definitiv ... häng deinen Code an! Da wird irgendwas falsch sein.

 

[michi174]

Hallo,

schau mal in den DEV-Tools des Browsers woher der Rahmen kommt. Dadurch solltest du es relativ einfach beheben können.
Evtl. ist es auch die "Outline" Eigenschaft der Elemente.

 

[Ketasilie]

[SIZE=3]	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block; }
body {
	line-height: 1; 
	font:12px/20px Arial;
	background:#494949;
	}
ol, ul {
	list-style: none; }

/* Main Styles */	
	
#wrapper{
	width:620px;
	margin:0 auto;
	margin-top:100px;
}

#nav {
	position:align left;
	width:620px;
	margin:0 auto;
}

ul#navigation {
	margin:0px auto;
	position:align left;
	float:left;

}

ul#navigation li {
	display:inline;
	font-size:12px;
	font-weight:bold;
	margin:0;
	padding:0;
	float:left;
	position:relative;

}

ul#navigation li a {
	padding:10px 25px;
	color:#616161;
	text-shadow:1px 1px 0px #fff;
	text-decoration:none;
	display:inline-block;
	border-right:1px solid #FFFFFF;
	border-left:1px solid #FFFFFF;
	border-top:1px solid #FFFFFF;
	background: #FFFFFF;
	
	-webkit-transition:color 0.2s linear, background 0.2s linear;	
	-moz-transition:color 0.2s linear, background 0.2s linear;	
	-o-transition:color 0.2s linear, background 0.2s linear;	
	transition:color 0.2s linear, background 0.2s linear;	
}

ul#navigation li a:hover {
	background:#FFFFFF;
	color:#black;
}

ul#navigation li:hover > a {
	background:#FFFFFF;
}

/* Drop-Down Navigation */
ul#navigation li:hover > ul
{
	visibility:visible;
	opacity:1;
}

ul#navigation ul, ul#navigation ul li ul {
	list-style: none;
    margin: 0;
    padding: 0;    
	visibility:hidden;
    position: absolute;
    z-index: 99999;
	width:180px;
	background:#FFFFFF;
	box-shadow:1px 1px 3px #ccc;
	opacity:0;
	-webkit-transition:opacity 0.2s linear, visibility 0.2s linear; 
	-moz-transition:opacity 0.2s linear, visibility 0.2s linear; 
	-o-transition:opacity 0.2s linear, visibility 0.2s linear; 
	transition:opacity 0.2s linear, visibility 0.2s linear; 	
}

ul#navigation ul {
    top: 43px;
    left: 1px;
}

ul#navigation ul li ul {
    top: 0;
    left: 181px;
}

ul#navigation ul li {
	clear:both;
	width:100%;
	border:0 none;
	border-bottom:1px solid #FFFFFF;
}

ul#navigation ul li a {
	background:none;
	padding:7px 15px;
	color:#white;
	text-shadow:1px 1px 0px #fff;
	text-decoration:none;
	display:inline-block;
	border:0 none;
	float:left;
	clear:both;
	width:150px;
}

ul#navigation li a.first {
	border-left: 0 none;
}

ul#navigation li a.last {
	border-right: 0 none;
}[/SIZE]

PS: Ich benutze Brackets

 

[nik_]

http://www.w3schools.com/css/css_navbar.asp

http://www.w3schools.com/css/css_dropdowns.asp

das schon mal angeschaut. nutze gerade die w3school sehr oft für den bau ner kleine website

 

[SomeDifferent]

Das ist die Markierung von Brackets. Du kannst so in der Live-Vorschau nachvollziehen, welches Element du gerade bearbeitest. Klickst du im Quellcode beispielsweise in den Header, solltest du die Markierung nicht mehr sehen

 

[Ketasilie]

Ich dachte auch zuerst, dass dies nur die Markierung von Brackets ist allerdings habe ich das zuerst nachgeprüft und es war nicht der Fall, mittlerweile habe ich das Projekt mithilfe von Bootstrap fertiggestellt es würde mich aber trotzdem weiterhin interessieren