CSS3 drop-down navigation

2 Views

To be more precise, I’m looking for a pure-CSS3 drop-down navigation that would slide out (and in) the UL elements, like a jQuery would normally work.

I’ve tried making it work with opacity and visibility, but it does not seem to work properly: either it’s distorted or it doesn’t slide out, or it slides out when the mouse is in the wrong place, etc..

Read More

Here are my CSS classes at the moment: 

    #nav li ul {
    left:-20000px;
    position:absolute;
    z-index:1;
    top:42px;
    width:140px;
    opacity:0;
    -webkit-transition: opacity .25s ease .1s;
    -moz-transition: opacity .25s ease .1s;
    -o-transition: opacity .25s ease .1s;
    -ms-transition: opacity .25s ease .1s;
    transition: opacity .25s ease .1s;
}
#nav li ul:hover {
    opacity:1;
}
#nav li ul li {
    float:none;
    background-color:#fff;
    padding:9px 0 0 10px;

    height:0;
    overflow:hidden;
    -webkit-transition: height .25s ease .1s;
    -moz-transition: height .25s ease .1s;
    -o-transition: height .25s ease .1s;
    -ms-transition: height .25s ease .1s;
    transition: height .25s ease .1s;
}
#nav li ul li:hover {
    height:40px;
    overflow:visible;
}
#nav li ul li a {
    font-size:12px;
}

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

The HTML is from WordPress, as that’s what I’m creating a theme for. Here is the code snippet, I cannot post more, as I don’t see the code anywhere. I guess this has to be answered by someone keen on WordPress as well: 

<div id="nav-wrapper">
<ul id="nav">
<?php wp_nav_menu( array( 'container' => false, 'theme_location' => 'primary-menu' ) ); ?>
</ul>

It seems that it might be something like this, though I don’t really understand this line myself: 

<ul id="%1$s" class="%2$s">%3$s</ul>

P.S. Sorry for the lack of detail about the HTML part, I’m doing the best I can with the knowledge I have and am able to find.

EDIT #2: as suggested, copying the printed out source. However, there are no “menu-item” nor “sub-menu” classes,” and I’m able to make cosmetic changes (color, borders, sizes, etc.) from the CSS classes that were provided earlier. 

                <ul id="nav">
<li id="menu-item-1565" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1565"><a href="http://localhost/" rel="nofollow" title="" target="_blank">Home</a>
<ul class="sub-menu">
<li id="menu-item-1456" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1456"><a href="http://localhost/category/news/games-news/">Games</a></li>
<li id="menu-item-2324" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2324"><a href="http://localhost/category/news/internet-news/">Internet</a></li>
<li id="menu-item-1876" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1876"><a href="http://localhost/category/news/hardware-news/">Hardware</a></li>
<li id="menu-item-1786" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1786"><a href="http://localhost/category/news/software-news/">Software</a></li>
</ul>
</li>
<li id="menu-item-1432" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1432"><a href="http://localhost/test1/">TEST #1</a></li>
<li id="menu-item-1653" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1653"><a href="http://localhost/test2/">TEST #2</a></li>
            </ul>
Post Views: 2

Related posts

Leave a Reply

1 comment

  1. Try this – http://jsfiddle.net/2mCZM/

    HTML 

    <ul id="nav">
    <li><a href="#">Item 1</a>
        <ul class="sub1">
            <li><a href="#">Item 1.1</a></li>
        </ul>
    </li>
    <li><a href="#">Item 2</a>
        <ul class="sub2">
            <li><a href="#">Item 2.1</a></li>
            <li><a href="#">Item 2.2</a></li>
        </ul>
    </li>
    <li><a href="#">Item 3</a>
        <ul class="sub3">
            <li><a href="#">Item 3.1</a></li>
            <li><a href="#">Item 3.2</a></li>
            <li><a href="#">Item 3.3</a></li>
        </ul>
    </li>
</ul>

    CSS

    #nav li {
    display: inline-block;
    width: 140px;
    background: beige;
    border-bottom: 1px solid orange;
    position: relative;
    height: 42px;
    line-height: 42px;
}

#nav li ul {
    position:absolute;
    left: 0;
    top:43px;
    width:140px;
    height: 0;
    overflow:hidden;

    -webkit-transition: height .25s linear;
       -moz-transition: height .25s linear;
         -o-transition: height .25s linear;
        -ms-transition: height .25s linear;
            transition: height .25s linear;
}

#nav li:hover ul.sub1 { height: 42px; }
#nav li:hover ul.sub2 { height: 84px; }
#nav li:hover ul.sub3 { height: 126px; }