Member Avatar for hanan-kh

hi....
Ihave this CSS but i have problem The sub-menu appears above the Main Menu
can you tell me where is the error PLZ

 #pop ul {list-style-type: none; font-weight:bold;}
#pop, #pop li ul {
 margin: 0;
 padding: 0;
 list-style: none;
}
#pop li {
 float: right;
 margin: 0;
 padding: 0;
 position: relative;
}
#pop li li {
 float: right;
 width: 140px;
 margin: 0;
 padding: 0;
}
#pop li a, #pop li a:link, #pop li a:visited {
 text-decoration: none;
 display: block;
 padding: 5px 15px;
}
#pop li a:hover, #pop li a:active {
    background-image:url(imgs/hoverefect.png);
 /*color: #FFF;*/
 display: block;
/* background: #2583AD;*/
 padding: 5px 12px;
  border-radius: 2px;
 -webkit-text-shadow:2px 2px 3px rgb(244,195,78);
-moz-text-shadow:2px 2px 3px rgb(244,195,78);
text-shadow:2px 2px 3px rgb(244,195,78);
}
#pop li li a, #pop li li a:link, #pop li li a:visited {
/* background: #D2DDE4;*/
 width: 80px;
 margin: 0;
 padding: 5px 12px;
 border-top: 1px solid #FFF;
}

#pop li li a:hover, #pop li li a:active {
background-image:url(imgs/hoverefect.png);
}
#pop li ul {
 position: absolute;
 width: 199px;
 display: none;
 right: 0;
}
#pop li:hover ul {
 display: block;
 z-index:300;
 position: absolute;
}
  • 3 Contributors
  • 11 Replies
  • 198 Views
  • 20 Hours Discussion Span
  • Latest Post Latest Post by pixelsoul

Recommended Answers

All 11 Replies

Member Avatar for pixelsoul

You've basically given up half the puzzle pieces and asked us to solve it. The markup would be needed to really give you an exact answer on the problem. Do you have this online somewhere we can see?

Edited by pixelsoul
Member Avatar for JorgeM

We need the relevant HTML (markup)

Member Avatar for hanan-kh 
<div class="menu"  >

<div id="pop" >
<ul >
<li><a href="index.php">الرئيسيه  </a></li>

<li><a href="news.php">الاخبار</a></li>
<li><a href="index.php">عن الجمعيه</a>
    <ul>
        <li> <a href="index.php">أهداف الجمعيه</a></li>
        <li> <a href="index.php">أهداف الجمعيه</a></li>
        <li> <a href="index.php">أهداف الجمعيه</a>
        </li>
    </ul>
</li>
<li><a href="index.php">التقارير</a></li>
<li><a href="us.php">من نحن</a></li>
<li><a href="index.php">اتصل بنا</a></li>
</ul>

</div>
Member Avatar for hanan-kh

no in my site dosent work like that

Member Avatar for pixelsoul

There must be something, somewhere, in the rest of your css or markup that is conflicting with this then. If you were able to setup a test page with all of the content like you normally have and it shows the problem, we could probably tell you what is causing it.

Member Avatar for hanan-kh

thats my CSS Code

body
{
  /*background-image: url(imgs/bg.jpg);*/
  background-color:rgb(21,103,177);
 /* width:1000px ;*/
  height:auto;
  font-family:"GE SS Two Light";
  font-size:16px;
  color:#ffffff;
  margin:0;
  padding:0;
  text-align:center;
  width: 1300px; 
  margin: 0 auto;
}
html
{
height: 100%;
margin-bottom: 0.01em;
}
/*#warp{    width: 1300px; 
          margin: 0 auto;}*/

.headerbg
{ /*text-align:center;*/
  width:1200px;
  height:200px;
  margin-left:0px;
}
.menu
{
  background-image: url(imgs/menubg.jpg);
  background-repeat: repeat-x;
  width:850px;
  height:30px; 
  border-radius: 5px;
  border-color: rgb(18, 18, 18);
  border-width:1px;
  box-shadow: 1px 1px 2px 1px #121212; 
  text-align:center;
  margin-right:0px;
  margin-left:220px;

}

a{text-decoration:none;
  padding-right:10px;
  padding-top:5px;
  float:right;
  color:#ffffff;
  }
/*#pop ul li a:hover
 {
 color: #fff;
 background-image:url(imgs/hoverefect.png);
 height:15px;
 width:20;
 font-size:17px;
 border-radius: 2px;
 -webkit-text-shadow:2px 2px 3px rgb(244,195,78);
-moz-text-shadow:2px 2px 3px rgb(244,195,78);
text-shadow:2px 2px 3px rgb(244,195,78);

 } */

 /* Dropdowns Menu */
 #pop ul {list-style-type: none; font-weight:bold;}
#pop, #pop li ul {
 margin: 0;
 padding: 0;
 list-style: none;
}
#pop li {
 float: right;
 margin: 0;
 padding: 0;
 position: relative;
}
#pop li li {
 float: right;
 width: 140px;
 margin: 0;
 padding: 0;
}
#pop li a, #pop li a:link, #pop li a:visited {
 text-decoration: none;
 display: block;
 padding: 5px 15px;
}
#pop li a:hover, #pop li a:active {
    background-image:url(imgs/hoverefect.png);
 /*color: #FFF;*/
 display: block;
/* background: #2583AD;*/
 padding: 5px 12px;
  border-radius: 2px;
 -webkit-text-shadow:2px 2px 3px rgb(244,195,78);
-moz-text-shadow:2px 2px 3px rgb(244,195,78);
text-shadow:2px 2px 3px rgb(244,195,78);
}
#pop li li a, #pop li li a:link, #pop li li a:visited {
/* background: #D2DDE4;*/
 width: 80px;
 margin: 0;
 padding: 5px 12px;
 border-top: 1px solid #FFF;
}

#pop li li a:hover, #pop li li a:active {
background-image:url(imgs/hoverefect.png);
}
#pop li ul {
 position: absolute;
 width: 199px;
 display: none;
 right: 0;
}
#pop li:hover ul {
 display: block;
 z-index:300;
 position: absolute;
}




*******
 #newbg
 {
 background-color:#e5e5e5;
 margin-left:0px;
 margin-right:0px;
 width:850px;
 height:35px;
 border-radius: 5px 5px 5px 5px;
 margin-top:2px;
 text-align:center;

     }
.newnav
{
float:right;
background-color:#ffffff; 
border-color:#949494; 
border-radius: 10px 10px 10px 10px;
color:#114b8f;
font-size:14px; 
height:23px; 
width:100px; 
text-align:center;
margin-top:5px;
margin-right:5px;
box-shadow: 1px 1px 2px 1px #949494;

}
.search{float:left; background-color:#bcbcbc; width:140px; height:24px;border-radius: 10px 10px 10px 10px; margin-left:5px;  margin-top:3px; font-family:"GE SS Two Light"; color:#ffffff; text-align:center; background-image:url(imgs/search.ico) ; background-repeat:no-repeat; background-position:left}
#block
{width:208px;
h210px;
border-style:double;
border-color:#e6e6e6;
}

.content{
    width:900px;
    height:800px;
    background-color:#d9d9d9; 
   /* margin-left:200px;*/
   margin:0 auto;
    margin-top:30px;
    border-radius:5px 5px 5px 5px; 
    color:#114b8f;
    text-align:right}

    #indexbody{
    background-color:#f9f9f9; 
    width:900px; height:510px; 
    margin-left:200px; 
    border-radius:0px 0px 10px 10px;
    }

    #slider{
    style="margin-top:25px; 
    -webkit-width:900px; 
    -moz-width:900px;
    width:900px;
    /*background-color:#d9d9d9; */
    height:350px;
    border-radius:10px 10px 0px 0px;
    margin-left:200px;
    position:static;
    margin-top:20px
    }
#footer
{ 
background-color:#dadada; 
border-bottom-color:#5a5a5a; 
width:1200px;
height:35px;
margin-left:50px; 
margin-top:5px; 
color:#114b8f;
 }

and thes Html header

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> 
    <script type="text/javascript"> 
jQuery(document).ready(function() { 

$('.class_demo').hover(function() { 
    $(this).stop().animate({opacity:".5"},500);     
},function() { 
    $(this).stop().animate({opacity:"1"},500);     
}); 

});   
    </script> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256" />
<link rel="stylesheet" type="text/css" href="mycss.css" />
</head>
<body>
<div class="headerbg" align="center"><a href="#" class="class_demo"><img src="imgs/hb.png" width='1100' height='200'></img></a></div>



<div class="menu"  >

<div id="pop" >
<ul >
<li><a href="index.php">الرئيسيه  </a></li>

<li><a href="news.php">الاخبار</a></li>
<li><a href="index.php">عن الجمعيه</a>
    <ul>
        <li> <a href="index.php">أهداف الجمعيه</a></li>
        <li> <a href="index.php">أهداف الجمعيه</a></li>
        <li> <a href="index.php">أهداف الجمعيه</a>
        </li>
    </ul>
</li>
<li><a href="index.php">التقارير</a></li>
<li><a href="us.php">من نحن</a></li>
<li><a href="index.php">اتصل بنا</a></li>
</ul>

</div>
<div style="clear:both"></div>
<div id="newbg">
<div style="float:right">
<div class="newnav"">جديد الجمعية</div>
<div style="background-color:#f4c34e; width:600px; height:24px; margin-right:100px; margin-top:5px;"> الشريط</div>
</div>
<div><input name="search" type="text" class="search" dir="rtl" value="البحث" /></div>

</div>
</div>
</body>
</html>

and its allso have problem the id="newbg" dosent work also

Member Avatar for pixelsoul

This is the problem here

a{
    text-decoration:none;
    padding-right:10px;
    padding-top:5px;
    float:right; /* this is a problem. Remove this. */
    color:#ffffff;
}

The float is causing it to move over the top of your top level li a.

Member Avatar for hanan-kh

thanks its work
but how about id="newbg" it dosent work and the background dosnt show

Member Avatar for pixelsoul

Hmm, I am going to take a guess about what you mean by "doesn't work" and it is probably because you don't have a <form> tag around the input.

<form action="" method="" name="">
    <input name="search" type="text" class="search" dir="rtl" value="البحث" />
</form>

I am not sure what you mean though about the background not showing. I see you have assigned a background color to #newbg background-color: #e5e5e5; and I can see that color fine.

I wanted to also point out, you have styles that are inline as well. I would recommend avoiding putting any styles inline. Styles inline override any styles that you define in the style sheet.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.