Anpassen von Hover-Effekten in der Navileiste

[yuro]

Servus,

und zwar hab ich folgendes Problem. Ich müsste gern ein Hover Effekt in meiner Navileiste einbauen und die Schrift zentriert mittig haben.

Mit padding könnt ich das ja lösen nur ist mein Hover Effekt dann auch weiter unten was nicht der Fall sein soll.

Hier erstmal der code:

CSS:

//Das ist die schwarze Leiste
.header_menu {
		background:url(../images/menu_black_bar.png) no-repeat;
		float:left;
		margin-left: 85px;
		margin-top: 313px;
		text-decoration:none;
		width: 760px;
		height: 32px;	
}

//hier sind die einzelnen menüs definiert.
#menu1, #menu2, #menu3 {
		width:253px;
		height:32px;
		float: left;
		text-align: center;
		/*padding-top: 8px;*/
		font-size: 12px;
		font-family: Arial, Helvetica, sans-serif;
}

//Hover-Effekt		
#menu1 a:hover{
		background:url(../images/menu_hover_left.png) no-repeat;
		width:252px;
		height:32px;
		float:left;
		text-decoration:none;
}

HTML:

    <div class="header_menu">
    	<ul>	
        <li id="menu1"><a href="#"><strong>Elektro</strong></a></li>
        <li id="menu2"><a href="#"><strong>Leistungen</strong></a></li>
        <li id="menu3"><a href="#"><strong>Kontakt</strong></a></li>
    	</ul>
    </div>

und die punkte von der liste will ich weghaben. kann mir da jmd helfen?

 

[Jan-Frederik Stieler]

Hi,
die Punkte bekommst du mit

ul li
{
list-style: none;
}

weg.
Den Text bekommst du normalerweise mit

text-align: center

oder

margin: 0 auto;

mittig. Schau mal ob das funktioniert.

Viele Grüße

 

[yuro]

das hab ich schon hinbekommen aber danke trotzdem. hab da ein anderes problem.

und zwar will ich den menüpunkten submenüs zuweisen. aber irgendwie nimmt der mein hintergrundbild von den submenüs nicht an bzw versteckt die nicht.

hier der code:

#menu2 ul li {
	display:inline;
	height:32px; 
	float:left;
	width: 253px; 
	list-style-type:none;
	/*margin-left: 15px;*/
	position: relative;	
}

#menu2 li ul {
	margin: 0px;
	padding: 0px;
	display: none;
	position: absolute;
	left: 0px; 
	top: 32px;
	background-image: url(dropdown_sub_content.png);
	background-repeat: repeat-y;
}

#menu2 li:hover ul {
	display: block;
	width: 257px; /*Breite des Untermenüs*/
}

#menu2 li li {
	list-style: none;
	display: list-item;
	width: 100%;
}

#menu2 li li a {
	color:#000; 
	text-decoration:none;
}

#menu2 li li a:hover {
	text-decoration:underline;
}


#menu2 a {
	width: 253px;
	height: 32px;
	float: left;
	text-align: center;
	display: block;
	padding-top: 8px;
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	list-style-type: none;
}

#menu2 a:hover{
		background:url(../images/menu_hover_center.png) no-repeat;
		display: block;
		float: left;
		color: #000;
}
		
#menu2 a.selected{
		background:url(../images/menu_hover_center.png) no-repeat;
		display: block;
		float: left;
		color: #000;
}

das ist jetzt für den zweiten punkt.

	<div class="header_menu">
    		
        <li id="menu1"><a href="#"><strong>Elektro</strong></a></li>
        
        <li id="menu2"><a href="#"><strong>Leistungen</strong></a>
        	<ul>
                <li><a href="#">Test 1</a></li>
                <li><a href="#">Test 1</a></li>
                <li><a href="#">Test 1</a></li>
            </ul></li>
        <li id="menu3"><a href="#"><strong>Kontakt</strong></a>
          	<ul>
				<li><a href="#">Test 1</a></li>
                <li><a href="#">Test 1</a></li>
                <li><a href="#">Test 1</a></li>
            </ul></li>
    	</ul>
    </div>