TargetFighter
07-08-2011, 12:48 PM
hi, i m fairly new to css, however have got to work on css. well no problem.. i want to do it with my full devotion..
so in order to achieve drop down menu i have wrote this css code after a day long googling and wants to display background color{#FFFFCC} even when list slides down on mouse hover covering whole list items.
There is one more problem that my list could not be display in full mode due to the next heading element, that i could not figure out why it is being so. List gets disappear as soon as user goes down to other options.
code is as follows-
#mbar
{
margin:0;
position : absolute;
height:50px;
width: 1000px;
background:url("../images/bar_full_4_2.jpg") repeat-x;
top:240px;
left:144px;
}
#nav
{
margin:0px;
padding:0px;
position:absolute;
top: 5px;
left:8px;
display:block;
width: 490px;
}
#nav > li
{
list-style-type:none;
float:left;
display:block;
margin:0px 10px;
padding:10px;
width:116px;
text-transform:uppercase;
height: 21px;
z-index:10;
}
#nav > li:hover ul
{
display:block;
position:absolute;
}
#nav > li:hover
{
background-color:#FFFFCC;
-moz-border-radius:10px;
-webkit-border-radius:10px; text-transform:uppercase;}
#nav li ul{margin:0px;padding:0px;display:none;}
#nav li ul li { list-style-type:none; margin:10px 0 0 0;}
#nav li ul li a
{
display:block; padding:5px 10px; color:#00FFFF; text-decoration:none;
}
#nav li ul li:hover a { background-color:#003399; -moz-border-radius:5px; -webkiborder-radius:5px;}
#nav li span { cursor:pointer; margin:0px 10px; font-weight:bold;
}
so in order to achieve drop down menu i have wrote this css code after a day long googling and wants to display background color{#FFFFCC} even when list slides down on mouse hover covering whole list items.
There is one more problem that my list could not be display in full mode due to the next heading element, that i could not figure out why it is being so. List gets disappear as soon as user goes down to other options.
code is as follows-
#mbar
{
margin:0;
position : absolute;
height:50px;
width: 1000px;
background:url("../images/bar_full_4_2.jpg") repeat-x;
top:240px;
left:144px;
}
#nav
{
margin:0px;
padding:0px;
position:absolute;
top: 5px;
left:8px;
display:block;
width: 490px;
}
#nav > li
{
list-style-type:none;
float:left;
display:block;
margin:0px 10px;
padding:10px;
width:116px;
text-transform:uppercase;
height: 21px;
z-index:10;
}
#nav > li:hover ul
{
display:block;
position:absolute;
}
#nav > li:hover
{
background-color:#FFFFCC;
-moz-border-radius:10px;
-webkit-border-radius:10px; text-transform:uppercase;}
#nav li ul{margin:0px;padding:0px;display:none;}
#nav li ul li { list-style-type:none; margin:10px 0 0 0;}
#nav li ul li a
{
display:block; padding:5px 10px; color:#00FFFF; text-decoration:none;
}
#nav li ul li:hover a { background-color:#003399; -moz-border-radius:5px; -webkiborder-radius:5px;}
#nav li span { cursor:pointer; margin:0px 10px; font-weight:bold;
}