homepage Welcome to WebmasterWorld Guest from 54.205.241.107
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
drop down menu badly aligned
ghid



 
Msg#: 4584484 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4584484 posted 11:46 am on Jun 16, 2013 (gmt 0)

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



 
Msg#: 4584484 posted 5:26 pm on Jun 16, 2013 (gmt 0)

Thank you, it worked.

birdbrain

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4584484 posted 7:30 pm on Jun 16, 2013 (gmt 0)

No problem, you're very welcome. ;)


birdbrain

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved