css menu déroulant avec vignette

salut im construire un menu déroulant qui doit avoir une vignette à gauche. Pour l'instant im en utilisant <ul>&<li>s pour construire le menu et j'ai obtenu le travail en baisse. Le problème est que lorsque vous essayez d'ajouter une image sur le côté gauche, il ajoute simplement son auto au bas de la liste si cela a du sens.css menu déroulant avec vignette

au ive moment obtenu ce travail, mais im saut quelqu'un pourrait suggérer une meilleure façon

ici est mon code

<!--the css for the nav bar--> 
#navbar 
{ 
    clear: both; 
     position: absolute; 
    left: 488px; 
    width: 466px; 
} 

#navbar ul{ 


float:left; 
display:block; 
} 
#navbar ul li img 
{ 
padding:0px; 
margin:0px; 
border:none; 

} 
#navbar ul li{ 
text-align: center; 
display:block; 
float:left; 
width:55px; 
border-left:thin #666 solid; 
border-right:thin #666 solid; 
} 




#navbar li li, #navbar li li a{ 
height:0px; 
margin-top: -100px; 
text-align: center; 
    zoom: 1; 
    background-color:#666; 
text-decoration: none; 
-webkit-transition:all .2s ease-in-out; 
-moz-transition:all .2s ease-in-out; 
-o-transition:all .2s ease-in-out; 
transition:all .2s ease-in-out; 
border:thin #000 solid; 
width:93px; 
display:table-row; 

} 

.navbar link{ 
color: #ff6600; 
text-decoration: none; 
} 

#navbar li:hover li{ 
height:auto; 
margin-top:0px; 
margin-bottom: 0px; 
} 



#navbar li:hover li a{ 
color:#FFF; 

text-decoration: none; 
} 

#navbar li li a:hover{ 
color:#333; 
} 

#navbar ul ul{ 
background:black; 
} 

#navbar li li:hover li li{ 
height:auto; 
margin-top:0px; 
margin-bottom: 0px; 
margin-left:-100px; 
margin-top:-30px; 

} 

#navbar li:hover li li{ 
height:77px; 
margin-top:-79px; 
margin-bottom: 0px; 
margin-left:-96px; 
} 

#thum 
{ 
width:70px; 
z-index:-2; 
} 

#thum li 
{ 
height:auto; 
z-index:-50; 
} 


<!--html of nav bar--> 
<div id="navbar"> 
     <ul id="items" > 
      <li><a href="#"><img src="img/home_button_56_44.png"/></a></li> 
      <li><a href="#"><img src="img/product_56_42.png"/></a> 
        <ul> 

         <li><a href="#">About</a></li> 
         <li><a href="#">About2</a></li> 
         <li><a href="#">About3</a></li> 
         <li>about4 
         <ul id="thum"><li><img src="img/home_button_56_44.png"/></li>  </ul> 
         </li> 


        </ul> 


      <li><a href="#"><img src="img/lifestyle_57_42.png"/></a></li> 

      <li><a href="#"><img src="img/about_54_42.png" /></a></li> 
      <li><a href="#"><img src="img/contact_54_42.png" /></a></li> 
     </ul> 
     </div> 
}

espoir ce sens que je sais est un peu encombrés je vais couper vers le bas avant que le site va vivre

grâce dan

Source

2011-09-02 Dannymadethis

je placerais l'image de pouce dans le premier li du sous-menu. Donnez-lui un cours et faites-le flotter à gauche. Cela peut nécessiter quelques réglages en fonction de la taille de votre image. Ceci devrait permettre aux li suivantes de tomber à côté d'elle.

<html> 
<head> 
<style type="text/css"> 
<!--the css for the nav bar--> 
#navbar 
{ 
    clear: both; 
     position: absolute; 
    left: 488px; 
    width: 466px; 
} 

#navbar ul{ 


float:left; 
display:block; 
} 
#navbar ul li img 
{ 
padding:0px; 
margin:0px; 
border:none; 

} 
#navbar ul li{ 
text-align: center; 
display:block; 
float:left; 
width:55px; 
border-left:thin #666 solid; 
border-right:thin #666 solid; 
} 




#navbar li li, #navbar li li a{ 
height:0px; 
margin-top: -100px; 
text-align: center; 
    zoom: 1; 
    background-color:#666; 
text-decoration: none; 
-webkit-transition:all .2s ease-in-out; 
-moz-transition:all .2s ease-in-out; 
-o-transition:all .2s ease-in-out; 
transition:all .2s ease-in-out; 
border:thin #000 solid; 
width:93px; 
display:table-row; 

} 

.navbar link{ 
color: #ff6600; 
text-decoration: none; 
} 

#navbar li:hover li{ 
height:auto; 
margin-top:0px; 
margin-bottom: 0px; 
} 



#navbar li:hover li a{ 
color:#FFF; 

text-decoration: none; 
} 

#navbar li li a:hover{ 
color:#333; 
} 

#navbar ul ul{ 
background:black; 
} 

#navbar li li:hover li li{ 
height:auto; 
margin-top:0px; 
margin-bottom: 0px; 
margin-left:-100px; 
margin-top:-30px; 

} 

#navbar li:hover li li{ 
height:77px; 
margin-top:-79px; 
margin-bottom: 0px; 
margin-left:-96px; 
} 

#thum 
{ 
width:70px; 
z-index:-2; 
} 

#thum li 
{ 
height:auto; 
z-index:-50; 
} 
#navbar li li.my-thumb {width:40px;} 
#navbar li .thumb-menu {width:140px;padding:0;} 
</style> 
</head> 
<body> 

<!--html of nav bar--> 
<div id="navbar"> 
     <ul id="items" > 
      <li><a href="#">Item 1</a></li> 
      <li><a href="#">Item 2</a> 
        <ul class="thumb-menu"> 
         <li class="my-thumb"><img width="40" height="40" src="img/home_button_56_44.png"/></li> 
         <li><a href="#">About</a></li> 
         <li><a href="#">About2</a></li> 
         <li><a href="#">About3</a></li> 
        </ul> 
      <li><a href="#">Item 3 </a></li> 

      <li><a href="#">Item 4</a></li> 
      <li><a href="#">Item 5</a></li> 
     </ul> 
     </div> 
</body> 
</html>

Source

2011-09-02 15:48:54 Jrod

ok ace merci beaucoup – Dannymadethis

css menu déroulant avec vignette

Répondre

Questions connexes