[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 89
  • Last Modified:

css drop down menu

I have a dropdown menu which has only one level,

what should I do to add another level for listing?

my code is:
@charset "utf-8";
/* CSS Document */

/*burası ana divin özellikleri*/
#navMenu {
    margin:0;
    width:auto;
	background-color:#FFF;
 }

  #navMenu ul {
    margin:0;
    padding:0;
    line-height:36px;
 }

  #navMenu li {
	margin:0;
	padding:0;
	list-style:none;
	float:left;
	position:relative;
	background-color:#FFF;
	
/*	width:160px; bu ölçü her bir kutunun ölçüsünü veriyor
*/ }

  #navMenu ul li a {
	text-align:center;
	height:36px;
	width:auto;
	padding-left:42px;  /*burada kutular içindeki text'in paddingini veriyor */
	padding-right:42px;	/*burada kutular içindeki text'in paddingini veriyor */
	display:block;
	background-color:#FFF; /*BURASI BACKGROUND RENGİNİ VERİYOR */
	text-decoration:none;
	color:#0D4B64;
	font-weight:bold;
	text-decoration:none;
	line-height:36px; /*burada kutular içindeki yazıların yüksekliğini yani dikey olarak ortada mıyı veriyior */
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #DDFEC8;
	border-right-color: #DDFEC8;
	border-bottom-color: #DDFEC8;
	border-left-color: #DDFEC8;
	font-family: Arial, Geneva, sans-serif;
	font-size: 0.78em;
 }

  #navMenu ul ul {
    position:absolute;
    visibility:hidden;
    top:30px;
	
 }
   /* Changes text color on hover for main menu hover
  BURASI EN ÜSTEKİ MENÜNÜN HOVER HALİNDE ALDIĞI RENK, YAZI VE BACKGROUND
  */

  #navMenu a:hover {
	background-color:#CCC;
	color:#0D4B64;
	border-top-width: 0px;
	font-size: 0.78em;
	font-weight:bold;
 } 
 
/* Bu alan açılan alt menünün tüm özelliklerini kapsıyor. 
*/ #navMenu ul li ul li a {
	text-align:left;
	height:36px; /*burayı düzeltirsem 112.satırı da düzeltmeliyim*/
	width:auto;
	padding-left:6px; 
	padding-right:6px;
	display:block;
	color:#0D4B64;
	font-family:Arial, Geneva, sans-serif;
	font-weight:bolder;
	text-decoration:none;
	font-size: 0.78em;
	color:#0D4B64;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 0px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #DDFEC8;
	border-right-color: #DDFEC8;
	border-bottom-color: #DDFEC8;
	border-left-color: #DDFEC8;

 }

  #navMenu ul li:hover ul {
    visibility:visible;
    z-index:9999; 
 }


  #navMenu li ul li {
width:140px; /*bu alan da alt kutuların genişlik ölçüsünü veriyor*/
height:36px;
 }
 
  /**********************************************/

  /*sets top level hover color*/

  #navMenu li:hover {
	background-color:#FFF;
	
	 }

  /*sets link items hover color and background
  BURASI ÜZERİNDE GELDİĞİNDE AŞAĞIYA DOĞRU AÇILAN MENÜNÜN AYARLARI
  */

  #navMenu ul li:hover  {
	color:#A2E6FC; /*bu ayar font rengini veriyor*/
	background-color:#FFF;

 }


  
 /* Contains the Float */

 .clearFloat {
    clear:both; 
    margin:0;
    padding:0;
 }

 /* IE7 Display Fix */  
 
 #navmenu ul li {

  display: inline;     
 
 }

Open in new window

0
Braveheartli
Asked:
Braveheartli
1 Solution
 
Kim WalkerWeb Programmer/TechnicianCommented:
This appears to have multi-level styling. Just be sure to format the HTML for the second level appropriately. Something similar to the following.
<div id="navmenu">
    <ul>
        <li>Top Level 1
            <ul>
                <li>Second Level 1a</li>
            </ul>
        </li>
        <li>Top Level 2
            <ul>
                <li>Second Level 2a</li>
                <li>Second Level 2b</li>
            </ul>
        </li>
    </ul>
</div>

Open in new window

0

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now