XHTMLforum - CSS3 Subnavigation

Guten Morgen,
ich habe da ein kleines Problem. Ich bekomme es einfach nicht hin eine Subnavigation aus meiner "normalen" Navigation zu basteln. Evtl. kennt sich einer von euch da ein bisschen besser aus.

CSS:

Code:

.topnav { background: url(../images/topnavBg.png) repeat-x; display: block; color: #eeeeee; margin: 0 0 0 -2px; padding: 3px 0; position: fixed; width: 100%; z-index: 999; }

.userNav { border-left: 1px solid #39454f; border-right: 1px solid #39454f; margin-right: -2px; }



.welcome { float: left; margin-left: -4px; }

.welcome img { float: left; margin: 6px 8px 6px 0 }

.welcome span { padding: 4px 5px; display: block; white-space: nowrap; float: left; font-size: 11px; }



.userNav { float: right; z-index: 6000; position: relative; font-size: 11px; margin-right: 214px;}

.userNav ul { border-left: 1px solid #39454f; border-right: 1px solid #39454f; margin-right: -1px; }

.userNav ul li { display: inline; float: left; position: relative; cursor: pointer; border-left: 1px solid #1c262b; border-right: 1px solid #1c262b; margin-left: -1px; }

.userNav ul li a { color: #eeeeee; text-decoration: none; display: block; float: left; border-left: 1px solid #39454f; border-right: 1px solid #39454f;  -webkit-opacity: 0.30;

  -moz-opacity: 0.30;

  opacity: 0.30; 

  -webkit-transition: all 0.4s ease;

  -moz-transition: all 0.4s ease;

  -ms-transition: all 0.4s ease;

  -o-transition: all 0.4s ease;

  transition: all 0.4s ease; }

.userNav ul li a:hover { border-left: 1px solid #293138; border-right: 1px solid #293138; background-color: #293138; -webkit-opacity: 1;

  -moz-opacity: 1;

  opacity: 1;

  }

.userNav ul li span {  display: block; padding: 4px 15px 4px 8px; float: left; }

.userNav ul li img { float: left; display: block; margin: 9px 2px 0px 14px; }

HTML:

HTML-Code:

<div class="topnav">

    <div class="wrapper">

        <div class="welcome"><a href="#" class="screenshot" rel="images/user_large.png"><img src="images/userPic.png" alt="" /></a><span>Welcome, Lars Aschmoneit</span></div>

        <div class="userNav">

            <ul>

                <li><a href="#" title=""><img src="images/icons/profile.png" alt="" /><span>My Profile</span></a></li>

                <li><a class="tooltip" href="#" title="Hey, im a Tooltip"><img src="images/icons/tasks.png" alt="" /><span>Tooltip</span></a></li>

                <li><a href="#" title=""><img src="images/icons/messages.png" alt="" /><span>Messages</span><span class="number">2</span></a></li>

                <li><a href="#" title=""><img src="images/icons/settings.png" alt="" /><span>Settings</span></a></li>

                <li><a href="login.html" title=""><img src="images/icons/logout.png" alt="" /><span>Logout</span></a></li>

            </ul>

        </div>

        <div class="clear"></div>

    </div>

</div>