Archief - Simpel probleem met submenu

Chickenlal · 12 dec 2010

Hey,

Eerste semester TI, bezig met simpel site'je voor integratie.

Integratie Internet

Het probleem is, submenu van Protocollen, krijg ik die border right niet weg.

HTML

Code:

<div id="menuOpmaak">
		<ul id="navigatie">
            <li><a href="index.html">Home</a></li>
			<li><a href="ons.html">Over Ons</a></li>
			<li><a href="#">Protocollen</a>
                <ul>
                    <li><a href="#">Protocol1</a></li>
                    <li><a href="#">Protocol12</a></li>
                    <li><a href="#">Protocol13</a></li>
                </ul>
            </li>
            <li><a href="bronnen.html">Bronnen</a></li>
		</ul>
	</div>

CSS

Code:

/*Hoofdmenu*/
#navigatie
{
	list-style:none;
	margin:0;
	padding:0;
}

#navigatie li
{
	float:left;
	position:relative;
	
}
#navigatie a
{
       display: block;
	float: left;
	padding: 5px 10px;
	color: #FFFFFF;
	text-decoration: none;
	border-right: 1px solid #FFFFFF;
}

#navigatie li:hover
{
    background: #A7BF6F;
}

/*Submenu*/ 
#navigatie li ul
{
    position: absolute;
    left: -999em;
    background-color: #33322E;
    border-right: none;
}
#navigatie li:hover ul
{
	left:0;
	top:1.8em;
	/*submenu in beeld*/
	
	list-style:none;
	margin-left:0;
	padding-left:0;
	width:100%;
}

Chickenlal · 12 dec 2010

heb het voorlopig opgelost

Code:

#navigatie li ul a
{
    border-right: none;
}

Maar ik geef misschien beter mijn 2de <ul> ook een id?

Drone · 12 dec 2010

q-ball_NBK zei:
heb het voorlopig opgelost

Code:

#navigatie li ul a { border-right: none; }

Maar ik geef misschien beter mijn 2de <ul> ook een id?

Is niet nodig en ik doe het meestal ook zo. Nu als je iets als sass of less gebruikt is het iets overzichtelijker.

Code:

#navigatie
{
    li
    {
        ul
        {
           ...
        }
    }
}

Chickenlal · 12 dec 2010

Thansk hierboven! Zal straks eens proberen

Maar, die hover over submenu is nu niet volledig en zie niet waarom

Iemand een idee?

update css

Code:

/*Hoofdmenu*/
#navigatie
{
	list-style:none;
	margin:0;
	padding:0;
}

#navigatie li
{
	float:left;
	position:relative;
}

#navigatie a
{
    display: block;
	float: left;
	padding: 5px 10px;
	color: #FFFFFF;
	text-decoration: none;
	border-right: 1px solid #FFFFFF;
}

#navigatie li:hover
{
    background: #A7BF6F;
}

/*Submenu*/ 
#navigatie li ul
{
    position: absolute;
    left: -999em;
    background-color: #33322E;
}
#navigatie li:hover ul
{
	left:0;
	top:1.8em;
	/*submenu in beeld*/
	
	list-style:none;
	padding:0;
}

#navigatie li ul a
{
    display: block;
	border-right: none;
}

Archief - Simpel probleem met submenu

Chickenlal

Legacy Member

Chickenlal

Legacy Member

Drone

Legacy Member

Chickenlal

Legacy Member