Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.5a is a product of Lussumo. More Information: Documentation, Community Support.

    • CommentAuthorrekhad
    • CommentTimeOct 15th 2007 edited
     permalink
    I already have CSS dropdown but can I have more examples for the same? especially with center aligned layout having the dropdown?
  1.  permalink

    If you haven't already, take a look at the Suckerfish

    • CommentAuthorrekhad
    • CommentTimeOct 15th 2007 edited
     permalink
    Kari Pätilä, Its not working in IE 7.
    I already have some code - Any luck ? same code with small changes...

    /* CSS CODE */
    ===================
    #contents
    {
    margin: 0px auto;
    padding: 3px 0px 0px 0px;
    width:970px;
    color: #000;
    background-image:url(/images/shadow-bg.gif);
    background-repeat:repeat-y;
    display:table;
    text-align:left;
    position:relative;
    }


    #menu{
    width:926px;
    height:36px;
    margin:0 auto;
    padding:0px 0px 0px 21px;
    //padding:0px 0px 0px 22px;
    position:relative;
    }

    #menu ul{
    margin: 0;
    padding: 0;
    position: relative;
    }

    #menu ul li{
    display:inline;
    }

    #menu li>ul {
    top: auto;
    left: auto;
    }

    #menu a{
    background-color:#ffa216;
    font-family:Arial;
    font-weight:bold;
    font-size:12px;
    border:1px solid #fff;
    border-right: none;
    color:#fff;
    display:inline;
    width:13.36%;
    //width:13.32%;
    float:left;
    margin-left:-1px;
    padding:8px 0px 8px 8px;
    text-align:left;
    text-decoration: none;
    cursor: default;
    cursor:hand;
    }

    #menu a.last{
    border-right:0px;
    margin-right:-1px;
    width:13.2%;
    //width:13.4%;
    }
    #menu a.first{
    border-left:0px;
    margin-left:-1px;
    width:13.29%;
    //width:13.43%;
    }
    #menu a:hover{
    color:#EAEAEA;
    }
    #menu a.active{
    background-color:#181818;
    color:#EAEAEA;
    }

    .anylinkcss{
    font-family:tahoma;
    font-size:12px;
    font-weight: normal;
    visibility: hidden;
    border:1px #dddddd;
    border-bottom-width: 0;
    color: #777777;
    line-height: 30px;
    z-index: 100;
    width: 170px;
    background-color: #efefea;
    position:absolute;
    }

    .anylinkcss a{
    display: block;
    position:relative;
    border-bottom: 1px solid #dddddd;
    padding-left: 10px;
    padding-right: 10px;
    text-decoration: none;
    font-weight: normal;
    color: #666666;
    font-family:tahoma;
    font-size:11px;
    }

    .anylinkcss a:hover{ /*hover background color*/
    background-color: #bbbbbb;
    color: white;
    font-weight: normal;
    }

    <!-- HTML code -->
    <div id="menu">
    <ul>
    <li><a href="">Home</a></li>
    <li id="back1" ><a href="#" class="first" style="background-color:#8aaeda; " onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'services', 'back1', '#8aaeda')" >Services <img src="/images/arr.gif" width="7" height="10" style="margin-left:40%;" /></a></li>
    <li id="back2" > <a href="#" style="background-color:#b0cf49;" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'industries', 'back2', '#8aaeda')" > Industries <img src="/images/arr.gif" width="7" height="10" style="margin-left:35%;" /> </a></li>
    <li><a href="#" style="background-color:#7ec8d3;">Success Stories </a></li>
    <li><a href="#" style="background-color:#ccd37e;">About Us </a></li>
    <li><a href="#" style="background-color:#a0ca78;">Articles</a></li>
    <li><a href="#" style="background-color:#a6b67a;" class="last">Contact Us </a></li>
    </ul>
    </div>


    <div id="industries" class="anylinkcss" >
    <a href="#">Logistics</a> <a href="#">Healthcare</a>
    <a href="#">Financial & Banking</a>
    <a href="#">Engineering</a>
    <a href="#">Insurance</a>
    <a href="#">Mortgage</a>
    </div>

    <div id="services" class="anylinkcss" style="width:170px; background-color: #efefea">
    <a href="#">Research & Analytics</a>
    <a href="#">Competitive Intelligence</a>
    <a href="#">Scientific KPO</a> <a href="/bio-it/bio-it-services.php">Bio-IT Services</a>
    <a href="#">Clinical Trials</a>
    <a href="#">Clinical Data Analytics</a>
    <a href="#">Web Analytics</a></div>
    <div id="industries" class="anylinkcss" style=" width:170px; background-color: #efefea"> <a href="#">About </a> <a href="#">The Team</a> <a href="#">Our Management Team</a> <a href="#">Our Global Delivery Network</a><a href="#">Our Transition Process</a> <a href="#">Our Recruitment Process</a> <a href="#">Our Work Culture</a></div>
    • CommentAuthorsjw
    • CommentTimeOct 16th 2007
     permalink
    try http://www.cssplay.co.uk there are lots of examples
    • CommentAuthorrekhad
    • CommentTimeOct 29th 2007
     permalink
    Thanks I got the menu fixed :)
Add your comments
    Username Password
  • Format comments as (Help)