Hoi,
Ik heb een cms menu met dropdown hier ergens vandaan geplukt.
Heb hem verder gestript en tot een menu op een pagina teruggebracht met minimale css.
Dit is de pagina: http://www.swv19-1.nl/index.php?page=testmenu
Wat ik graag wil is dat de tekstkleur van de hover verandert in een andere kleur. Nu is de hoofdkleur zwart en dat blijft hij ook in de hover.
Eerst de html:
{process_pagedata}
{sitename} - {title}
{metadata}
{stylesheet}
{content}
{if $ccuser->loggedin()}
{cms_module module='menumanager' template='menu'}
{else}
{cms_module module='menumanager' template='menu' excludeprefix='private_'}
{/if}
Hier is de ccs:
/* the bit that does the work */
#container {
font-family:arial, verdana, sans-serif;
font-size: 0.8em;
position:fixed;
top:190px;
left:30px;
bottom:10px;
right:0;
overflow:auto;
background-color:#ffffff;
padding:20px;
text-align:left;
}
* html #container {
height:100%;
width:100%;
}
#container a:hover {
background-color:#00616D;
color: #ffffff;
text-decoration: none;
font-weight: bold;
}
/* Horizontal menu for the CMS CSS Menu Module */
#menu_horiz{
position:absolute;
top:0;
left:0;
width:100%;
height:80px;
}
/* The wrapper clears the floating elements of the menu */
#menuwrapper {
overflow: hidden;
background-image: url();
background-repeat: repeat-x;
border-bottom: 0px solid black;
margin-left:0px;
margin-right:0px;
font-size: .85em;
}
/* Bepaal de breedte van de dropdown. Het hoofdmenu blijft flexibel. */
#primary-nav li li {
width: 220px;
}
/* Hier vanaf blijven!!!! */
#primary-nav, #primary-nav ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#primary-nav ul {
position: absolute;
top: auto;
display: none;
}
#primary-nav ul ul {
margin-top: 1px;
margin-left: -1px;
left: 100%;
top: 0px;
}
#primary-nav li {
margin-left: -1px;
float: left;
}
#primary-nav li li {
margin-left: 0px;
margin-top: -1px;
float: none;
position: relative;
}
/* Stijl van het verschijnen van de menuelementen */
/*de linkvorm*/
#primary-nav a {
backgound-image: ;
background-repeat: repeat-x;
display: block;
margin: 0px;
padding: 5px 10px;
text-decoration: none;
letter-spacing: 2px;
color : black ; /*hoofmenu letterkleur*/
}
/*randje van het menu*/
#primary-nav li a {
border-right: 0px solid #000000;
border-left: 0px solid #000000;
border-bottom: 0px solid black;
}
/*achergrondkleur menu's met dropdown*/
#primary-nav li, #primary-nav li.menuparent{
background-color:green; /*kan ook een plaatje zijn url(....)*/
background-repeat: repeat-x; /*alleen nodig bij plaatje*/
}
/*als een link actief is welke kleur*/
#primary-nav li.menuactive {
background-color: red; /* kan ook een plaatje: url(......);*/
background-repeat: repeat-x; /*alleen nodig bij plaatje*/
}
/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
/*de pijl bij een submenu van de dropdown*/
#primary-nav ul li.menuparent, #primary-nav ul li.menuparent:hover, #primary-nav ul li.menuparenth {
background-image: url(uploads/swvutrecht/kl-mbar.jpg);
background-repeat: repeat-x;
}
/* hover stadium hoofdmenu */
#primary-nav li:hover, #primary-nav li.menuh, #primary-nav li.menuparenth, #primary-nav li.menuactiveh {
background-color: yellow; /* kan ook een plaatje bv. url(.....);*/
background-repeat: repeat-x; /*alleen nodig bij een plaatje als achtergrond*/
color:red; /*deze blijkt geen invloed te hebben*/
}
#primary-nav li:hover{
color:red;
}
/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */
#primary-nav ul, #primary-nav li:hover ul, #primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul, #primary-nav li.menuparenth ul ul {
display: none;
}
#primary-nav li:hover ul, #primary-nav ul li:hover ul, #primary-nav ul ul li:hover ul,
#primary-nav li.menuparenth ul, #primary-nav ul li.menuparenth ul, #primary-nav ul ul li.menuparenth ul {
display: block;
}
/* IE Hacks */
#primary-nav li li {
float: left;
clear: both;
}
#primary-nav li li a {
height: 1%;
}
{opgelost} Krijg het niet voor elkaar link hover
Moderator: velden
-
- Forum Members
- Posts: 47
- Joined: Sat May 16, 2009 5:47 pm
{opgelost} Krijg het niet voor elkaar link hover
Last edited by arjandevries on Thu Nov 05, 2009 4:11 pm, edited 1 time in total.
Re: Krijg het niet voor elkaar link hover
Je kunt daarvoor de volgende css-regels toevoegen:
Code: Select all
#primary-nav li a:hover{
color:red;
}
-
- Forum Members
- Posts: 47
- Joined: Sat May 16, 2009 5:47 pm
Re: {opgelost} Krijg het niet voor elkaar link hover
Dat is het! die a: had ik niet!
Bedankt!
Arjan
Bedankt!
Arjan