Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Multi-level navigation and easy menu definition
#36
Now there's a new problem, the following menu items do not move down when opens submenu

Code:
.sitemenu {
  position: relative;
  height: 1.4em;
  margin-top:0px;
  padding-bottom:40px;
  margin-left:-20px;

  }
.sitemenu ul {
  position: absolute;
  list-style: none;
}
.sitemenu li {
  float: left;
  padding: 2px 10px 2px 7px;
  width: 8em;
  color:#333;
  font-size:18px;
   letter-spacing:1px;
  margin-bottom:5px;
  padding-right:70px;
  background:#333;
  text-decoration:none;
  border-radius:4px;
  -moz-border-radius:4px;
  -khtml-border-radius:4px;
    -webkit-border-radius:4px;
        border-top:1px solid rgba(255,255,255,.4);
    background: -moz-linear-gradient(top, #444 0%, #222 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#444), color-stop(100%,#222));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#222222',GradientType=0 );
    
    }

.sitemenu li a {
  color: #ECECEC;
  text-decoration: none;  
  border-bottom: none;
  font-family: Impact, Charcoal, sans-serif;  
  line-height:1.2em;
  font-weight:100;
  text-transform:uppercase;
  

}
.sitemenu li ul {
  display: none;
  margin-left:8px;
  margin-bottom:50px;}
.sitemenu li.currentpath  ul, .sitemenu li.current  ul, .sitemenu li:hover  ul {
  display:block;
  font-weight:100}
.sitemenu li ul li {
    margin-top:7px;
  float: none;
  background:#333;
    text-decoration:none;
    border-radius:4px;
    margin-bottom:40px;
    -moz-border-radius:4px;
    -khtml-border-radius:4px;
    -webkit-border-radius:4px;
    border-top:1px solid rgba(255,255,255,.4);
    background: -moz-linear-gradient(top, #444 0%, #222 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#444), color-stop(100%,#222));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#222222',GradientType=0 );
}
.sitemenu li:hover {
    background:#6B94B4;
}
.sitemenu li:hover > ul {
    color:#000;
}
.sitemenu li:hover ul li {
  background-color: #333;
  border: none 0;
  display:block;
}
.sitemenu li > ul > li:hover {
    background:#6B94B4;}


i know, my css is crap, but I have tried everything
Reply


Messages In This Thread
Multi-level navigation and easy menu definition - by sciera - 2011-06-09, 05:07:31



Users browsing this thread: 2 Guest(s)