Welcome to WebmasterWorld Guest from 54.221.49.52

Forum Moderators: not2easy

Message Too Old, No Replies

drop down menu badly aligned

     

ghid

6:05 pm on Jun 15, 2013 (gmt 0)



Hi,

I am trying to make a menu, but all my drop down child ul lists aligns at the left of the page.

I use left:0 to align the drop down list to the parrent element. But I'm have trouble, I don't succeed to do this.

Please help me.

here is the .php


<html>

<head>
<link rel="stylesheet" type="text/css" href="index1.css">
</head>


<body>

<ul id="nav">

<li>

<a href="#"> Home </a>

</li>


<li>

<a href="#"> About </a>

<ul>
<li> <a href="#"> The product </a> </li>


<li> <a href="#"> The big big product </a> </li>
</ul>



</li>


<li>

<a href="#"> Services </a>

<ul>

<li> <a href="#"> Service One </a> </li>
<li> <a href="#"> Service Two </a> </li>

</ul>

</li>

</ul>




and here is the .css


#nav

{

list-style:none; /* scoate bulinele de lista */
position:relative;
z-index:5;

}

#nav li {

float:left;
margin-right:10px;



}


#nav li:hover a{

background:#6b0c36;

}



#nav a{

text-decoration:none; /* scoate underline-ul din link */
display:block;
color:#fff; /* culoarea textului */
background:#333;
padding-left: 15px;
padding-right: 15px;



}



#nav a:hover{ /* cand treci cu mouse-ul peste se aprinde background-ul */

background-color:red;

}


#nav li:hover ul {
left:0px;

}


#nav li:hover ul li a:hover{

background: green;

}

#nav ul{

list-style:none;
position:absolute;
left:-9999px;

}

#nav ul li{ /* astea sunt elementele liste drop down (copii) de sub elementele parinte dispuse orizontal */

float:none; /* pentru ca elementele din listele dropdown sa se aseze unul sub altul */
padding-top:1px;


}

#nav ul li a{

padding-left:30px;
}


Thank you.

birdbrain

11:46 am on Jun 16, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi there ghid,

try this slightly modified code...


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">

<title>untitled document</title>

<style>
#nav,#nav ul {
padding:0;
margin:0;
list-style:none;
}
#nav li {
position:relative;
float:left;
margin-right:10px;
}
#nav a {
display:block;
padding:0 15px;
text-decoration:none;
color:#fff;
background-color:#333;
}
#nav a:hover {
background-color:#f00;
}
#nav li:hover ul {
display:block;
left:0;
}
#nav ul a:hover {
background-color:#008000;
}
#nav ul {
position:absolute;
display:none;
white-space:nowrap;
}
#nav ul li {
float:none;
padding-top:1px;
}
#nav ul li a {
padding-left:30px;
}
</style>

</head>
<body>

<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">The product</a></li>
<li><a href="#">The big big product</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Service One</a></li>
<li><a href="#">Service Two</a></li>
</ul>
</li>
</ul>

</body>
</html>


birdbrain

ghid

5:26 pm on Jun 16, 2013 (gmt 0)



Thank you, it worked.

birdbrain

7:30 pm on Jun 16, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



No problem, you're very welcome. ;)


birdbrain
 

Featured Threads

Hot Threads This Week

Hot Threads This Month