No replies
nina85
nina85's picture
Offline
newbie
Last seen: 10 years 22 weeks ago
Joined: 2010-06-17
Posts: 1
Points: 2

Hi all,

I'm trying to create a hybrid css dropdown menu as described in this "A list apart" article: http://www.alistapart.com/articles/hybrid

But I can't get the second level navigation list to display horizontally. What's missing in my code?

CSS:

#nav { height:100px; width:100%; float:right; padding:5px;}
#navbg{ background:url(images/smaller%20navigation/nav_05.jpg) left top repeat-x; float:left; width:100%; }
#navleft { background:url(images/smaller%20navigation/nav_03.jpg) no-repeat; float:left; height:34px; width:7px;}
#navright { background:url(images/smaller%20navigation/nav_15.jpg) no-repeat; float:right; height:34px; width:7px;}
#nav .inside{  float:left; width:1176px; height:99px; overflow:hidden; position:relative;}
#nav .inside ul { clear:left; float:left; list-style:none; margin:0; padding:0; position:relative; left:50%; height:34px; text-align:center; font-family:Verdana; font-size:1em;}
 
#nav .inside ul li { display:block; float:left; list-style:none; margin:0; padding:0; position:relative; right:50%;}
#nav .inside ul li b {  float:left; font-weight:600; display:inline; color:#3A88C7; height:34px; line-height:34px; margin-left:35px; margin-right:35px; cursor:pointer; text-decoration:none; vertical-align:middle;}
#nav ul li a.active {color:#3A88C7;}
#nav ul li a:hover { color:#3A88C7;}
 
 
#nav li.off ul, #nav li.on ul {
  display: none;
  position: absolute;
  top: 30px;
  height: 15px;
  left: 0;
  padding-top: 10px;
}
 
 
#nav li.on a {
  color:#3A88C7;
}
 
#nav li.on ul a, #nav li.off ul a {
  border: 0;
}
 
#nav li.on ul {
  /*display active subnav list*/
  display:inline; line-height:15px; height:15px; text-decoration:none; font-weight:400; color:#666666;
}

HTML:

<div id="nav">
  <div id="navbg"><div id="navleft"></div>
     <div class="inside">
        <ul>
          <li class="off"><a href="#">page1</a>
             <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
                <li><a href="#">Link 4</a></li>
                <li><a href="#">Link 5</a></li>
              </ul>
          </li>     
          <li><b>|</b></li>
          <li class="on"><a href="index.html">page2</a>
              <ul>
        	 <li><a href="#">Link 1</a></li>
                 <li><a href="#">Link 2</a></li>
                 <li><a href="#">Link 3</a></li>
                 <li><a href="#">Link 4</a></li>
                 <li><a href="#">Link 5</a></li>
              </ul>
 
          </li>
          <li><b>|</b></li>
          <li class="off"><a href="index.html">page3</a></li>
          <li><b>|</b></li>
          <li class="off"><a href="index.html">page3</a></li>
          <li><b>|</b></li>
 
        </ul>
      </div>
     <div id="navright"></div>
   </div>
</div>

A snapshot of the result is attached.
Thanks

AttachmentSize
nav2levels.JPG9.71 KB