Bonjour,
Après plusieurs jours de recherche je m'en remets à vous !
J'ai également (peut être une erreur de ma part, posté ce message dans la rubrique javascript car il y a un bout de code qui met un effet particulier sur les sous menu)
je désirerai, lorsque je parcours le sous menu, que le menu garde le fond gris et la couleur rouge. Est ce qu'une personne aurait la gentillesse de tester ce bout de site ? je ne sais pas si je dois travailler sur le javascript ou le css. Je ne maîtrise pas trop la notion d'héritage
voici ma page html :
et mon css
/* CSS Document */
Merci d'avance
Après plusieurs jours de recherche je m'en remets à vous !
J'ai également (peut être une erreur de ma part, posté ce message dans la rubrique javascript car il y a un bout de code qui met un effet particulier sur les sous menu)
je désirerai, lorsque je parcours le sous menu, que le menu garde le fond gris et la couleur rouge. Est ce qu'une personne aurait la gentillesse de tester ce bout de site ? je ne sais pas si je dois travailler sur le javascript ou le css. Je ne maîtrise pas trop la notion d'héritage
voici ma page html :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>TutorialNET by wonkaStudio - tutorial 499</title>
<link rel="stylesheet" href="css/tutorial_499_css.css" type="text/css" media="screen" />
<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav
//$("ul.topnav li span").click(function() { //When trigger is clicked.
//$("ul.topnav li span").hover(function() { //When trigger is clicked...
$("ul.topnav li a").hover(function() {
//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click
$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
});
//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass("subhover"); //On hover over, add class "subhover"
}, function(){ //On Hover Out
$(this).removeClass("subhover"); //On hover out, remove class "subhover"
});
});
</script>
</head>
<body>
<div id="bloc_website">
<ul class="topnav">
<li>
<a href="#">Page de garde</a>
</li>
<li>
<a href="#">Menu 1</a>
<ul class="subnav">
<li><a href="#">toto1</a></li>
<li><a href="#">toto2 toto2</a></li>
<li><a href="#">toto3 toto3</a></li>
<li><a href="#">toto1 toto3</a></li>
<li><a href="#">toto3 toto2</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a>
<ul class="subnav">
<li><a href="#">titi1 titi2</a></li>
<li><a href="#">titi3 titi2</a></li>
<li><a href="#">titi3 titi2</a></li>
<li><a href="#">titi3</a></li>
<li><a href="#">titi2 titi3</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
</ul>
<div id="explication">
<h1>Menu horizontal avec javascript ou sous menu qui slide</h1>
</div>
</body>
</html>
et mon css
/* CSS Document */
body {
font-family:verdana;
}
#bloc_website {
float: left;
width:600px;
}
#explication {
float:left:
width:600px;
padding:20px;
margin:50px 0 0 0;
}
h1 {
font-size:18px;
}
h2 {
font-size:12px;
}
p {
font-size:10px;
line-height:20px;
padding:10px;
}
p a {
font-weight:bold;
color:#000000;
}
ul.topnav {
list-style: none;
padding: 0 20px;
margin: 0;
float: left;
width: 600px;
height:40px;
font-size: 10px;
/*background: url(../images/bg_menu.png) no-repeat;*/
}
ul.topnav li {
float: left;
margin: 0;
padding:0;
position: relative; /*--Declare X and Y axis base for sub navigation--*/
}
ul.topnav li a{
padding: 0;
height:40px;
line-height:40px;
text-align:center;
width:100px;
margin:0 12px 0 0;
font-weight:bold;
color: #000000;
display: block;
text-decoration: none;
float: left;
}
ul.topnav li a:hover{
/*background: url(../images/bg_menu_hover.png) no-repeat center top;*/
/* background-color: rgba(215, 215, 215, 0.5); /* un arrière plan bleu à 50% de transparence */
background-color: #D7D7D7;
background-opacity:0.5;
color: #AA0000;
}
ul.topnav li span { /*--Drop down trigger styles--*/
width: 13px;
height: 16px;
margin:12px 0 0 -15px;
float: left;
/*background: url(../images/arrow1.png) no-repeat center top;*/
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
list-style: none;
position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
left: 0; top: 40px;
/*background: #6f0019;*/
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
/*border: 1px solid #6f0019;*/
}
ul.topnav li ul.subnav li{
margin: 0; padding: 0;
clear: both;
width: 170px;
}
html ul.topnav li ul.subnav li a {
float: left;
width: 140px;
/*background-color: rgba(215, 215, 215, 0.95); /* un arrière plan bleu à 50% de transparence */
/*background: #012 url(../images/arrow2.png) no-repeat 10px center;*/
background: #D7D7D7 url(../images/arrow2.png) no-repeat 10px center;
padding-left: 30px;
text-align:left;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
background: #D7D7D7 url(images/arrow2.png) no-repeat 15px center;
/* background: #D7D7D7;*/
}Merci d'avance