Responsive dropdown menu

Status
Niet open voor verdere reacties.
Beste Antoon,

In je css zet je comments maar dit wordt niet juist toegepast. Zie als voorbeeld: http://www.w3schools.com/css/css_syntax.asp

Je gebruikt de selector #nav maar de HTML tag <nav> heeft geen id. Je kunt deze gewoon weglaten.

Probeer dit eens:

HTML:
#logo{
    float: left;
    margin-left: 0.5%;
}
nav {
    font-family: "Palatino Linotype","Book Antiqua",Palatino,FreeSerif,serif;
    overflow: hidden;
    width: 100%;
    float: left;
    background-color: white;
    padding: 5px 0;
}

nav{
    float: left;
    margin-left: 0.5%;
}

nav ul li{
    font-weight: 700;
}

nav ul li ul li a{
    color: #000;
    padding: 5%;
}

nav a {
    padding: 0.5%;
}

nav ul {
	margin:0;
	padding:0;
	list-style:none;
}

nav ul li {
	float:left;
	text-align: center;
}

nav ul li a {
   	float: left;
	color: #fff;
        padding: 10px 30px;
        font-weight: bold;
        text-decoration:none;
   	background: #cc0000;  
	background: -moz-linear-gradient(left, #cc0000 0%, #cc0000 100%); 
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#cc0000), color-stop(100%,#cc0000));  
	background: -webkit-linear-gradient(left, #cc0000 0%,#cc0000 100%);  
	background: -o-linear-gradient(left, #cc0000 0%,#cc0000 100%);  
	background: -ms-linear-gradient(left, #cc0000 0%,#cc0000 100%); 
	background: linear-gradient(to right, #cc0000 0%,#cc0000 100%);  
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc0000', endColorstr='#cc0000',GradientType=1 );  
  	box-shadow: 0 0px 0 rgba(255, 255, 255, 0.1) inset, 0 0 0px rgba(0, 0, 0, 0.1) inset;
  	border-left: 1px solid rgba(255, 255, 255, 0.05);
        border-right: 1px solid rgba(0,0,0,0.2);
}

nav li ul {
    	background: rgb(255,255,255);  
		background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(243,243,243,1) 50%, rgba(237,237,237,1) 51%, rgba(255,255,255,1) 100%);  
		background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(243,243,243,1)), color-stop(51%,rgba(237,237,237,1)), color-stop(100%,rgba(255,255,255,1)));  
		background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%);  
		background: -o-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%);  
		background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%);  
		background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%);  
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 );   
    	border-radius: 0 0 10px 10px;
    	-moz-border-radius: 0 0 10px 10px;
    	-webkit-border-radius: 0 0 10px 10px;
    	left: -999em;
    	margin: 35px 0 0 0;
    	position: absolute;
    	width: 170px;
    	z-index: 9999;
}

nav li:hover ul {
    	left: auto;		
}

nav li ul a {
    	background: none;
    	text-align: left;
    	border: none;
    	margin-left: 0px;
    	width: 170px;
    	border-bottom: 1px solid transparent;
    	border-top: 1px solid transparent;
}

nav li li ul {
    	margin: -1px 0 0 170px;
    	-webkit-border-radius: 0 10px 10px 10px;
    	-moz-border-radius: 0 10px 10px 10px;
    	border-radius: 0 10px 10px 10px;
    	visibility:hidden;
}

nav li li:hover ul {
    	visibility:visible;
}

nav ul ul li:last-child > a {
	-moz-border-radius:0 0 10px 10px;
	-webkit-border-radius:0 0 10px 10px;
	border-radius:0 0 10px 10px;
}

nav ul ul ul li:first-child > a {
	-moz-border-radius:0 10px 0 0;
	-webkit-border-radius:0 10px 0 0;
	border-radius:0 10px 0 0;
}

Mocht het niet lukken dan hoor ik het wel!

Mvg, Hollander
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan