Ondersteuning » Thema en CSS/opmaak » nog niet te vreden over men horizontale menu

  • hallo allemaal.

    ik heb al eerder een topic gehad over het horizontale menu
    ik ben daar goed geholpen en dacht dat hij helemaal goed was en heb die topic dus gemarkeerd als op gelost.
    vandaar dat ik even een nieuw topic start.

    want het menu is nog niet helemaal naar men zin.
    op het moment dat ik namelijk op een van de menu items ga staan klapt hij netjes uit.
    maar zodra je de muis maar gaat bewegen om het sub menu aan te klikken verdwijn hij praktisch meteen weer en is het onmogelijk om fatsoenlijk een sub menu aan te klikken.

    verder is het horizontale menu met knopen ik zou het mooier vinden als het gewoon als links word weer gegeven.
    kan iemand me hiermee helpen.
    belangrijkste is dat de menu’s en sub menu’s aan te klikken zijn want de opmaak van de knopen kan altijd later nog wel aan ge past worden.
    de css code ziet er als volgt uit

    /*
    Theme Name: Bootstrap Basic
    Theme URI:
    Author: Vee Winch
    Author URI: http://okvee.net
    Description: Bootstrap v.3 basic theme for developers to build their new theme very fast and easy.
    Version: 1.0.3.3
    License: MIT
    License URI: http://opensource.org/licenses/MIT
    Text Domain: bootstrap-basic
    Domain Path: /languages/
    Tags: white, gray, light, one-column, two-columns, three-columns, left-sidebar, right-sidebar, custom-background, custom-menu, featured-images, front-page-post-form, post-formats, threaded-comments, translation-ready
    
    This theme built with Twitter Bootstrap v.3. It is basic theme with basic style for build new theme with Bootstrap.
    
    */
    
    /*
    Required WordPress CSS
    */
    ul#menu-header { margin: 0; padding: 0; }
    ul#menu-header  li { list-style: none; float: left; margin: 0 10px; }
    .alignleft {
    	display: inline;
    	float: left;
    	margin-right: 1.5em;
    }
    .alignright {
    	display: inline;
    	float: right;
    	margin-left: 1.5em;
    }
    .bypostauthor {
    }
    .gallery-caption {
    }
    .sticky {
    }
    .wp-caption {
    	border: 1px solid #ccc;
    	margin-bottom: 1.5em;
    	max-width: 100%;
    }
    .wp-caption img[class*="wp-image-"] {
    	display: block;
    	margin: 1.2% auto 0;
    	max-width: 98%;
    }
    .wp-caption-text {
    	text-align: center;
    }
    .wp-caption .wp-caption-text {
    	margin: 0.8075em 0;
    }
    body {
    	background-color: #000000;
    }
    body,td,th {
    	color: #FFFFFF;
    }
    a:link {
    	color: #FFFF00;
    }
    a:visited {
    	color: #FFFF00;
    }
    a:hover {
    	color: #FF0000;
    }
    a:active {
    	color: #00FF00;
    }
    
    nav ul ul {
    	display: none;
    }
    
    	nav ul li:hover > ul {
    		display: block;
    	}
    nav ul {
    	background: #efefef;
    	background: linear-gradient(top, #000 0%, #bbbbbb 50%);
    	background: -moz-linear-gradient(top, #000 0%, #bbbbbb 50%);
    	background: -webkit-linear-gradient(top, #000 0%,#bbbbbb 50%);
    	box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    	padding: 0 20px;
    	border-radius: 10px;
    	list-style: none;
    	position: relative;
    	display: inline-table;
    }
    	nav ul:after {
    		content: ""; clear: both; display: block;
    	}
    	nav ul li {
    	float: left;
    }
    	nav ul li:hover {
    		background: #4b545f;
    		background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
    		background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
    		background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
    	}
    		nav ul li:hover a {
    			color: #fff;
    		}
    
    	nav ul li a {
    		display: block; padding: 15px 17px;
    		color: #757575; text-decoration: none;
    	}
    	nav ul ul {
    	background: #5f6975; border-radius: 0px; padding: 0;
    	position: absolute; top: 100%;
    }
    	nav ul ul li {
    		float: none;
    		border-top: 1px solid #6b727c;
    		border-bottom: 1px solid #575f6a;
    		position: relative;
    	}
    		nav ul ul li a {
    			padding: 15px 15px;
    			color: #fff;
    		}
    			nav ul ul li a:hover {
    				background: #4b545f;
    			}
    			nav ul ul ul {
    	position: absolute; left: 100%; top:0;
    }

    het stuk dat over de horizontale menu’s gaat is

    nav ul ul {
    	display: none;
    }
    
    	nav ul li:hover > ul {
    		display: block;
    	}
    nav ul {
    	background: #efefef;
    	background: linear-gradient(top, #000 0%, #bbbbbb 50%);
    	background: -moz-linear-gradient(top, #000 0%, #bbbbbb 50%);
    	background: -webkit-linear-gradient(top, #000 0%,#bbbbbb 50%);
    	box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    	padding: 0 20px;
    	border-radius: 10px;
    	list-style: none;
    	position: relative;
    	display: inline-table;
    }
    	nav ul:after {
    		content: ""; clear: both; display: block;
    	}
    	nav ul li {
    	float: left;
    }
    	nav ul li:hover {
    		background: #4b545f;
    		background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
    		background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
    		background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
    	}
    		nav ul li:hover a {
    			color: #fff;
    		}
    
    	nav ul li a {
    		display: block; padding: 15px 17px;
    		color: #757575; text-decoration: none;
    	}
    	nav ul ul {
    	background: #5f6975; border-radius: 0px; padding: 0;
    	position: absolute; top: 100%;
    }
    	nav ul ul li {
    		float: none;
    		border-top: 1px solid #6b727c;
    		border-bottom: 1px solid #575f6a;
    		position: relative;
    	}
    		nav ul ul li a {
    			padding: 15px 15px;
    			color: #fff;
    		}
    			nav ul ul li a:hover {
    				background: #4b545f;
    			}
    			nav ul ul ul {
    	position: absolute; left: 100%; top:0;
    }

    en de site waarop het huidige resultaat te zien is is te bekijken op: http://www.jenp.net

    hopelik kan en wil iemand me helpen

    groeten: peter

  • Het onderwerp ‘nog niet te vreden over men horizontale menu’ is gesloten voor nieuwe reacties.