Comment créer une liste déroulante CSS

-3

Je voulais créer une liste déroulante CSS pour mon blog blogger. Mais j'ai fait face à de nombreuses difficultés parce que je ne suis pas un professionnel CSS et mon modèle de blogueur n'est pas conçu par moi. J'ai essayé beaucoup de choses mais rien n'a fonctionné pour moi. Je vous donne le code, s'il vous plaît identifier les erreurs. Merci ...Comment créer une liste déroulante CSS

Mon HTML Structure de Navigation Links:

<div id='mainmenu'> 
<ul> 

<li class='first current_page_item'><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></li> 
<li><a href='http://www.technodoze.com/search/label/Physics' title='Amazing Articles about Physics'>Physics</a></li> 

<li><a href='http://www.technodoze.com/search/label/Amazing' title='Amazing'>Amazing Stuff</a>

Le code déroulant élément où problème est vraiment:

<ul> 
    <li><a href='http://www.technodoze.com/search/label/Amazing' title='Amazing'>Amazing Stuff</a></li> 
    <li><a href='http://www.technodoze.com/2011/09/write-for-us.html' title='Write For Us'>Write For Us</a></li>   
    </ul>

De là, il est code normal:

</li> 

<li><a href='http://www.technodoze.com/search/label/Videos' title='Videos'>Videos</a></li> 

<li><a href='http://www.technodoze.com/search/label/Downloads' title='Free Downloads'>Download</a></li> 
<li><a href='http://www.technodoze.com/search/label/Biggest%20In%20The%20World' title='SG Biggest'>Biggest In The World</a></li> 
<li><a href='http://www.technodoze.com/2010/01/author-of-blog.html' title='About Me'>About Me</a></li> 

</ul> 
</div>

Voir l'URL où cette liaison de navigation est appliquée: www.technodoze.com

Maintenant, mon CSS:

#mainmenu a { 
text-decoration:none; 
display:block; 
margin:0; 
float:left; 
background: none; 
padding: 9px 15px; 
text-transform:uppercase; 
color: #CCCCCC; 
font-size: 11px; 
} 

#mainmenu li a:hover, 
#mainmenu li a:focus, 
#mainmenu a.mainMenuParentBtnFocused{ 

/*background-color: #1e1e1e;*/ 
background: url(http://1.bp.blogspot.com/_lxBSX0YJV58/SwQlF623qJI/AAAAAAAAAlc/h7AiX8sx00g/s1600/mainnav-hover.gif) repeat-x left top #666666; 
color:#fff; 
} 

#mainmenu , #mainmenu ul { 
padding: 0; 
margin: 0; 
list-style: none; 
line-height: 1em; 
} 
#mainmenu ul { 
/*border around submenu goes here*/ 
background: none; 
left:0; 
} 

#mainmenu li { 
/*great place to use a background image as a divider*/ 
background-image:url(http://3.bp.blogspot.com/_lxBSX0YJV58/SwQlNUijg3I/AAAAAAAAAlk/6U-xiY6v8Jo/s1600/mainnav-sep.gif); 
background-repeat:no-repeat; 
background-position: 100% 0px; 
cursor: pointer; 
float: left; 
margin: 0 0px 0 0px; 
padding: 0 2px 0 1px; 
height: 30px; 
display: inline; 



} 
#mainmenu { 
overflow: hidden; 
font-size: 12px; 
float: left; 
width: 738px; 
display: inline; 
height: 30px; 
}

Tout va bien jusqu'à ici ... (. Le code CSS est supérieur Juste pour le #mainmenu ul li qui va bien enfait)

Le problème commence ici ...

J'ai essayé de créer un menu déroulant, mais l'élément enfant [#mainmenu ul li ul] n'est pas sous forme de menu déroulant et est intégré sur le côté. . (Ceci est actuellement appliqué sur le site Web, vous pouvez le voir en allant sur www.technodoze.com et en cliquant sur le lien de navigation Amazing Stuff.)

Je suis sûr que l'erreur rare est dans le dernier morceau de code CSS, mais j'ai montré vous le scénario dans le cas où ce problème se pose en raison de flottement de #mainmenu ul ou tout autre élément supérieur ...

Je serai reconnaissant à la personne qui me aider ...

Merci

Mise à jour: 27 sep, 11:00 GMT, Raison: Un problème de plus

J'ai changé mon code maintenant:

#mainmenu { 
overflow: hidden; 
font-size: 12px; 
float: left; 
width: 738px; 
display: inline; 
height: 30px; 
} 

#mainmenu ul li ul li a { 
background-color:#333333; 

} 

#mainmenu ul li ul .first_li { 

-moz-border-top-left-radius: 7px; 
-khtml-border-top-left-radius: 7px; 
-webkit-border-top-left-radius: 7px; 
border-top-left-radius: 7px; 

-moz-border-top-right-radius: 7px; 
-khtml-border-top-right-radius: 7px; 
-webkit-border-top-right-radius: 7px; 
border-top-right-radius: 7px; 
} 
#mainmenu ul li ul .last_li { 

-moz-border-bottom-left-radius: 7px; 
-khtml-border-bottom-left-radius: 7px; 
-webkit-border-bottom-left-radius: 7px; 
border-bottom-left-radius: 7px; 

-moz-border-bottom-right-radius: 7px; 
-khtml-border-bottom-right-radius: 7px; 
-webkit-border-bottom-right-radius: 7px; 
border-bottom-right-radius: 7px; 
} 

#mainmenu ul li ul { 
-moz-box-shadow: 4px 4px 2px #888; 
-webkit-box-shadow: 4px 4px 2px #888; 
box-shadow: 4px 4px 2px #888; 
-khtml-box-shadow: 4px 4px 2px #888; 
border-color: #F1F1F1; 
-moz-outline-color: #F1F1F1; 

} 




#mainmenu a { 
text-decoration:none; 
display:block; 
} 

#mainmenu a { 
margin:0; 
float:left; 
background: none; 
padding: 9px 15px; 
text-transform:uppercase; 
color: #CCCCCC; 
font-size: 11px; 
} 

#mainmenu li a:hover, #mainmenu li a:hover ul li, 
#mainmenu li a:focus, #mainmenu li a:focus ul li, #mainmenu li:hover > a, 
#mainmenu a.mainMenuParentBtnFocused{ 

/*background-color: #1e1e1e;*/ 
background: url(http://1.bp.blogspot.com/_lxBSX0YJV58/SwQlF623qJI/AAAAAAAAAlc/h7AiX8sx00g/s1600/mainnav-hover.gif) repeat-x left top #666666; 
color:#fff; 
} 

#mainmenu , #mainmenu > ul { 
padding: 0; 
margin: 0; 
list-style: none; 
line-height: 1em; 
} 
#mainmenu ul { 
/*border around submenu goes here*/ 
background: none; 
left:0; 
} 

#mainmenu > li { 
/*great place to use a background image as a divider*/ 
background-image:url(http://3.bp.blogspot.com/_lxBSX0YJV58/SwQlNUijg3I/AAAAAAAAAlk/6U-xiY6v8Jo/s1600/mainnav-sep.gif); 
background-repeat:no-repeat; 
background-position: 100% 0px; 
cursor: pointer; 
float: left; 
margin: 0 0px 0 0px; 
padding: 0 2px 0 1px; 
height: 30px; 
display: inline; 



} 
#mainmenu li ul { 
    display: none; 

    margin:0; 
    padding 0; 
    position:absolute; 
    left:0; 

} 

#mainmenu li:hover > ul { 
    display: block; 
    float:none; 
    position:absolute; 
    top:159px; 
    left:235px; 
} 


#mainmenu li:hover ul li { 
display: block; 
} 
#mainmenu li ul li { 
    list-style-type: none; 
    margin:0; 
    display: block; 
    padding:0; 
}

Maintenant, le seul problème qui reste est que je reçois des espaces dans la deuxième adresse ayant li ordre [#mainmenu ul li ul li]

Vous pouvez voir en allant à ce lien www.technodoze.com

S'il vous plaît suggérer une solution.

Merci

Source

2012-09-26 Muhammad Bilal Shafi

Cela peut aider http://jsfiddle.net/Mutmatt/3ppr8/23/ ou http://jsfiddle.net/Mutmatt/gqsmB/10/ – Mutmatt

ne peut pas comprendre pourquoi c'est ** downvoted ** –

Change:

#mainmenu li { 
/*great place to use a background image as a divider*/ 
background-image:url(http://3.bp.blogspot.com/_lxBSX0YJV58/SwQlNUijg3I/AAAAAAAAAlk/6U-xiY6v8Jo/s1600/mainnav-sep.gif); 
background-repeat:no-repeat; 
background-position: 100% 0px; 
cursor: pointer; 
float: left; 
margin: 0 0px 0 0px; 
padding: 0 2px 0 1px; 
height: 30px; 
display: inline; 
}

À:

#mainmenu > li { 
    /*great place to use a background image as a divider*/ 
    background-image:url(http://3.bp.blogspot.com/_lxBSX0YJV58/SwQlNUijg3I/AAAAAAAAAlk/6U-xiY6v8Jo/s1600/mainnav-sep.gif); 
    background-repeat:no-repeat; 
    background-position: 100% 0px; 
    cursor: pointer; 
    float: left; 
    margin: 0 0px 0 0px; 
    padding: 0 2px 0 1px; 
    height: 30px; 
    display: inline; 
    }

Et ajouter de nouvelles choses dans:

#mainmenu li:hover > ul { 
display: block; 
float:none; 
position:absolute; 
    top:30px; /*new line*/ 
    left:140px; /*new line*/ 
}

DEMO

Source

2012-09-26 14:48:23 ygssoni

Cela a été un peu d'aide, merci, mais ce réglage de pixel va le perturber dans différentes résolutions. Ai-je raison?? –

J'ai mis à jour la question un peu .. S'il vous plaît jetez un coup d'oeil ... Thnx –

Essayez cette baisse dans le menu déroulant http://www.lwis.net/free-css-drop-down-menu/

Source

2012-09-26 14:51:01

Comment créer une liste déroulante CSS

Répondre

Questions connexes