0

I am trying to use the code below as my Header. A multi-level drop-down navigation menu. Written in only CSS/HTML.
Of course, the fact that if i removed the extra levels of menus, the code would work fine... Is just not good enough. I want to push it.
I want to have "As many levels of drop-down menus as I want"
I,E: Menu; Menu1; MenuA; MenuA1... and so on, to infinity and beyond!

CSS

html, body {
    height: 100%; /*positions sticky footer*/
    min-width: 960px; /*maintains background on horizontal scroll for elements with 100% width*/
    background: url(images/bkgnd_texture.jpg);
    font-family: "Cabin", "Trebuchet MS", "Arial";
a {
    -moz-outline:none;
    color:#36c;
}
a img {
    border:0;
}
a:hover {
    text-decoration:none;
}
a:active {
    outline:none;
}
#header-wrap {
    display:block;
    position:relative;
    width:100%;
    margin:0 auto;
    padding:0;
    text-align:left;
    background: url(images/header-bg.png) repeat-x top left;
}
#header {
    height: 145px;
    width: 960px;
    padding:0;
    position:relative;
    margin:0 auto;
    display:block;
}
/*  ------------------------------  */
/*  DROPDOWN MENU                   */
ul.menu {
    list-style-type:none;
    margin:0;
    padding:6px 0 0 6px;
    float: right;
}
ul.menu li {
    display:block;
    height: 30px;
    float:left;
    position:relative;
    margin:0 9px 0 0;
    padding:0;
    -khtml-opacity: 0.75;      /* khtml, old safari */
    -moz-opacity: 0.75;       /* mozilla, netscape */
    opacity: 0.75;           /* fx, safari, opera */
}
ul.menu li.current {
    background:#000000;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
}
ul.menu li:hover {
    background:#000000;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
}
ul.menu li a {
    display:block;
    float:left;
    color:#fff;
    text-decoration:none;
    font-size:15px;
    font-style:normal;
    font-weight:bold;
    font-family:arial, helvetica, sans-serif;
    padding:6px 15px 5px 15px;
    line-height:18px;
}
ul.menu li a span {
    font-weight:normal;
    padding-left:3px;
}
ul.menu li.drop a {
    padding-right:7px;
}
ul.menu li.drop:hover li {
    border:none;
}
ul.menu li.drop span.toggle {
    display:block;
    float:left;
    width:21px;
    height:26px;
    background:transparent url("images/toggle.png") no-repeat 0 -20px;
    padding:0;
    margin:0 7px 0 0;
}
ul.menu li.drop:hover span.toggle, ul.menu li.drop.current span.toggle {
    background-position:1px 5px;
}
ul.menu li.drop:hover, ul.menu li.current:hover {
    -moz-border-radius:0;
    -webkit-border-radius:0;
    -moz-border-radius-topleft:4px;
    -moz-border-radius-topright:4px;
    -webkit-border-top-left-radius:4px;
    -webkit-border-top-right-radius:4px;
}
ul.menu li.drop:hover ul {
    display:block;
    z-index:1;
    padding-bottom:8px;
}
ul.menu li ul {
    display:none;
    position:absolute;
    width: 100%;
    top:30px;
    left:0;
    list-style-type:none;
    margin:0;
    padding:9px 0 0 0;
    background:#000000;
    filter: alpha(opacity=75); /* internet explorer */
}
ul.menu li ul li {
    float:none;
    height: auto;
    margin:0;
    padding:0;
    border:none;
    filter: alpha(opacity=100); /* internet explorer */
}
ul.menu li ul li a {
    float:none;
    background:none;
    margin:0;
    padding:0;
    display:block;
    font-size:13px;
    height:auto;
    margin:0;
    padding:4px 13px 4px 13px;
    font-weight:normal;
}
/* drop down menu hover styles */
ul.menu li:hover ul {
    border:none;
    -moz-border-radius-bottomleft:4px;
    -moz-border-radius-bottomright:4px;
    -webkit-border-bottom-left-radius:4px;
    -webkit-border-bottom-right-radius:4px;
}
ul.menu li:hover ul * {
    background:none;
    -moz-border-radius:0;
    -webkit-border-radius:0;
}
ul.menu li ul li:hover {
    background-color:#333333;
}

HTML

</head>
<div id="header-wrap">
  <div id="header">
    <div style="margin:0px; text-align: left; float: left;"> <span style="color: #FFFFFF; font-family:'Arial Black',Gadget,sans-serif; font-size: 25px; font-weight: bold; letter-spacing: -5px;"><a href="href="http://LOCAL/" style="color: #FFF; text-decoration: none;" title="NAPHETS">NAPHETS</a></span> - <a style="color: #FFF; font-size: 18px; font-family: Georgia, 'Times New Roman', Times, serif; font-style:italic; font-weight:normal; text-decoration: none;" href="http://LOCAL/" title="NAPHETS">NAPHETS</a>    </div>
    <ul class="menu">

      <!-- Begin Item With Drop -->
      <li class="drop">
        <a href="#">Media</a>

        <!-- Begin Toggle Icon -->
        <span class="toggle">&nbsp;</span>
        <!-- End Toggle Icon -->

        <!-- Begin Sub-Menu -->
        <ul>
          <li><a href="#">Gallery</a></li>
<!-- Begin Video With Drop -->
<li class="drop">
          <li><a href="#">Video's</a></li>
        <!-- Begin Toggle Icon -->
        <span class="toggle">&nbsp;</span>
        <!-- End Toggle Icon -->
                <!-- Begin Sub-Sub-Menu -->
                <ul>
<!-- Begin A With Drop -->
<li class="drop">
                <li><a href="#">A</a></li>
                        <!-- Begin Toggle Icon -->
                        <span class="toggle">&nbsp;</span>
                        <!-- End Toggle Icon -->
                        <!-- Begin Sub-Sub-Sub-Menu -->
                        <ul>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        </ul>
</li>
                        <!-- End Sub-Sub-Sub-Menu -->
<!-- Begin B With Drop -->
<li class="drop">
                <li><a href="#">B</a></li>
                        <!-- Begin Toggle Icon -->
                        <span class="toggle">&nbsp;</span>
                        <!-- End Toggle Icon -->
                        <!-- Begin Sub-Sub-Sub-Menu -->
                        <ul>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        </ul>
</li>
                        <!-- End Sub-Sub-Sub-Menu -->
<!-- Begin C With Drop -->
<li class="drop">
                <li><a href="#">C</a></li>
                        <!-- Begin Toggle Icon -->
                        <span class="toggle">&nbsp;</span>
                        <!-- End Toggle Icon -->
                        <!-- Begin Sub-Sub-Sub-Menu -->
                        <ul>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        </ul>
</li>
                        <!-- End Sub-Sub-Sub-Menu -->
</li>
                <!-- End Sub-Sub-Menu -->
                </ul>
          <li><a href="#">News</a></li>
          </ul>
</li>
          <!-- End Sub-Menu -->

      </li>
      <!-- End Item With Drop -->
        </div></div> <br /><br />

*this does work for the most part, but once you get more than 1 layer into it.
It needs to either A:
popout on the left & dropdown, then popout on the left & dropdpown, then popout on the left & dropdpown.
Or B:
popout on the left & dropdown, then popout on the right & dropdpown. & so on.

Right now it seems to try to open more menus, but displays it without hovering & in the same place with text over text.
I do not want to use a javascript, jquery, php, blah blah blah... Not for this. Only CSS & HTML &/or XHTML &/or XML... the usual suspects.
Thanks Everyone ;)*

Edited by naphets

2
Contributors
4
Replies
31
Views
4 Years
Discussion Span
Last Post by naphets
0

3 images used...

Edited by naphets

Attachments toggle.png 3.09 KB header-bg.png 3.19 KB bg.png 2.8 KB
1

I tried to take a look at the code you posted but I was not able to render the page properly. Looks like there are a few syntax errors such as in line #1 of your CSS... you are missing the curly brace to close the style set. There may be others.

In any event, if you are interested in a Multi-Level Navigation Menu that uses no JavaScript/jQuery using only HTML and CSS, take a look at the example provided in that link. You should be able to adapt the example code and build as many levels as you need. The code is fairly straight forward.

Example view of the menu...

92fef3ad47b732ca001e977ff3685831

Hope that helps. If you want to have someone take another swing at helping you with your example, please validate that your code can at least partially render and provide feedback as to exactly what problem you are having with your sample code.

Edited by JorgeM

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.