Horizontal CSS Subnav Issues!

Horizontal CSS subnav issues!

I wasn’t quite sure where to begin with your existing code, so instead, I’ve put together a working sample from scratch. Please note that the supplied example is very basic, and is just one way of achieving the stated goal. I have tested it on Firefox 3.6, and nothing else. There are likely to be cross-browser compatibility issues, especially with the :hover pseudo class in Internet Explorer. The idea behind this code is simply to give you a simple framework from which to work.

I highly recommend that you check out the following articles, as they explain the use of nested lists, the problems with cross-browser compatibility, Javascript solutions to the :hover pseudo class IE problem, and accessibility issues with hiding elements using display: none:

Suckerfish Dropdowns

http://www.alistapart.com/articles/dropdowns

Son of Suckerfish Dropdowns

http://www.htmldog.com/articles/suckerfish/

Hiding with CSS: Problems and solutions

http://www.456bereastreet.com/archive/200905/hiding_with_css_problems_and_solutions/

Okay, onto the code. First, the HTML. Here, I have used nested unordered lists to create the menu structure. This is a good way to go, as a navigation menu is really just a nested list of links. This will display correctly for those that do not use CSS, and will be read correctly by screen readers.

You may wish to look into ways of removing links from the active page. For example, if the active page is Page 1-3, you could replace the a tag with a span tag.

The HTML should be fairly self explanatory. Just give the active menu UL the active class:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link rel="stylesheet" type="text/css" href="test.css" media="screen" />
<title>Horizontal Menus</title>
</head>

<body>
    <div id="topnav">
        <ul>
            <li>Menu 1
                <ul class="active">
                    <li><a href="#">Page 1-1</a></li>
                    <li><a href="#">Page 1-2</a></li>
                    <li><a href="#">Page 1-3</a></li>
                    <li><a href="#">Page 1-4</a></li>
                </ul>
            </li>

            <li>Menu 2
                <ul>
                    <li><a href="#">Page 2-1</a></li>
                    <li><a href="#">Page 2-2</a></li>
                    <li><a href="#">Page 2-3</a></li>
                    <li><a href="#">Page 2-4</a></li>
                    <li><a href="#">Page 2-5</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

The CSS is full of comments, so it should be fairly simple to understand. I think the hardest part is getting the formatting right, and making the sub-menus horizontal instead of vertical. You’ve managed that bit, so the rest should be quite easy:

/*
 * The contain DIV for the navigation menu.
 * Use this to position the menu on the page.
 */
#topnav {
    /*
     * Set the containing DIV position to
     * relative.  This allows the UL to be
     * positioned relative to this container.
     * See static, relative and absolute, here:
     * http://www.w3.org/TR/CSS2/visuren.html#choose-position
     */
    position: relative;
}

/*
 * All ULs (first and second level).
 */
#topnav ul {
    /*
     * Remove bullets from the UL.
     */
    list-style: none;
    /*
     * Zero margins and padding.
     */
    margin: 0;
    padding: 0;
    /* 
     * Take the UL out of the normal flows so
     * that it can be given absolute positioning
     * coordinates, relative to its containing
     * block (the #topnav DIV).
     */
    position: absolute;
    /*
     * Align the UL with the left of the #topnav DIV.
     */
    left: 0;
    /*
     * The list must be wide enough to enclose all
     * second level list items (5 x 10em).
     */
    width: 50em;
    /*
     * Give the UL height and a background colour.
     * This enables the UL that is activated during a
     * hover to mask the UL that is active.  See
     * the active and hover z-index settings.
     */
    height: 1.5em;
    background: #eeeeee;
}

/*
 * All LIs (first and second level).
 */
#topnav li {
    /*
     * Float the LIs left so that they all
     * appear on one line.
     */
    float: left;
    /*
     * Set the width of each LI.
     */
    width: 10em;
}

/*
 * Second level UL.
 */
#topnav ul ul {
    /*
     * Hide all second level LIs.
     * Set their position to absolute, then
     * move them left by 999em.
     */
    position: absolute;
    left: -999em;
}

/*
 * Second level UL.
 * Selected when first-level LI is hovered over,
 * or when first-level UI has the 'active' class.
 */
#topnav ul li:hover ul, #topnav ul ul.active {
    /*
     * Show active LIs.
     * Reset the left position to zero.
     */
    left: 0;
}

/*
 * Second level UL.
 * Selected when first-level LI is hovered over.
 */
#topnav ul li:hover ul {
    /*
     * Set the stacking level (z-index) so that it is
     * above the active UL.
     */ 
    z-index: 200;
    background: #cccccc;
}

/*
 * Second level UL.
 * Selected when first-level UI has the 'active' class.
 */
#topnav ul ul.active {
    /*
     * Set the stacking level (z-index) so that it is
     * below the UL that is displayed during hover.
     */ 
    z-index: 100;
    background: #aaaaaa;
}

Good luck!

A couple more problems with my horizontal subnav...but almost there

The problem was caused by the margin you added to the .subnav class: while moving the mouse from the upper list item to the sub list, the mouse had to move over a gap of 0.333% space resulting in a lost focus (or lost hover-effect). I updated your code and removed the unnecessary spacers, the updated version can be found here:
http://codepen.io/anon/pen/hzAaD
Referring to your original code, change your CSS as follows:

 .subnav ul li {    
   margin: 0;
   margin-top: 3px;
 }
 .subnav {
   width:100%;
 }

css only horizontal subnav

I got this for you http://jsfiddle.net/aLZqZ/99/. In under 100 tries, too. I became a little obsessed and spent at least 5 hours total. A good challenge for me and I have never really fiddled with sub navs before.

This issue was three fold:

Using float:right for a horizontal nav bar is usually not good in my experience because it causes unexpected issues, also it is negated and ignored by browsers if the same element is positioned relative or absolute (you had a lot of superfluous code, btw). I changed float:right to text-align:right where necessary. See this for horizontal nav I fixed for someone recently: Aligning/floating my nav bar to the right

The li element containing the sub menu was not positioned, therefore, the position:absolute and right:0 on the ul within it moves according to the closest containing element that is position:absolute or :relative. In this case there was not one so that element was html; thus the ul would be pushed all the way right to the end of the page. I added position:relative to these li elements which then made the right:0 behave as expected, but did not put all the li element on one line and stacked them instead.

You had tags with display:inline-block when :inline would have done it, but more importantly, no one ever really mentions that white-space:nowrap on the same elements to do what you are trying here is important. inline-block and nowrap together should force one line block like elements that you can align or float as whole as if they were a paragraph. BTW, IE7 needs some special attention for inline-block. See here: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

I made special css at the bottom of yours in your fiddle to separate the left and right navs, and I basically left your original css alone. I also adjusted the html a bit. Here it all is.

HTML for the right nav (follows the HTML for the left nav):

        <ul class="rightNav">
            <li>menu3
                    <ul class="rightSubNav">
                        <li>item3-1</li>
                        <li>item3-2</li>
                        <li>item3-3</li>
                    </ul>
            </li>
            <li>menu4
                    <ul class="rightSubNav">
                        <li>item4-1</li>
                        <li>item4-2</li>
                        <li>item4-3</li>
                    </ul>
            </li>
        </ul>

CSS that I added to separate the right and left nav:

        ul.rightNav {
        margin:0;
        padding:0;
        text-align: right;
    }

    .rightNav li:hover {
        background-color: red;
    }

    ul.rightNav  li{
        list-style: none;
        display: inline-block;
        color: white;
        padding: 4px 8px;
        font-weight: bold;
        line-height: 32px;
        position:relative;
    }

    ul.rightSubNav {
        position: absolute;
        right:0;
        margin: 4px 0 0 -20px;
        padding: 0;
        display: none;
        white-space:nowrap;
    }
    ul.rightSubNav li {
        background-color: red;
        list-style: none;
        display: inline;
        color: white;
        padding: 4px 8px;
        font-weight: bold;
        position: relative;
        line-height: 32px;
    }

    .rightNav li:hover ul.rightSubNav {
        display: inline-block;
        background-color: red;
    }

If this helped I would appreciate the up votes and answer select. If you figured something else out and got it working differently please post. I would love to see it.

Pure CSS Sticky Horizontal Subnav - dropdown not displaying

Remove overflow:hidden; from your .navbar declaration and replace it with float:left; and width:100%;

Floated elements are removed from the calculated height of the parent element. However, overflow:hidden; invokes the height to be calculated via block formatting context but, was hiding your dropdowns cause overflow is hidden.

Also, floating the parent element means the children dictate the parent's height making it more dynamic.

Revised Fiddle Here

Horizontal Navigation with Expanding SubNav

You should have searched Google before.

Anyways, search for "CSS Navigation" bars. You'll find plenty of examples. They'll do the trick.

Okay, then you can build up a menu like that

Hide it initially using CSS
.menu{
display: none;
}
Setup event handlers to toggle + animate the submenu display.
Use Jquery for that slideDown Animation.

CSS sub-menu wont display vertically, keeps aligning horizontally

The .nav-column is inheriting the inline style of #hdr-box nav li. Selecting .nav-column ul li and delcaring your styles wont override the styles set by #hdr-box nav li because IDs are adhered to before classes. Try adding an ID to .nav-column. jsFiddle Example

HTML

<div id="sub-nav" class="nav-column">
    <ul>
        <li><a href="#">Book a sevice Online</a></li>
        <li><a href="#">Express Service</a></li>
        <li><a href="#">BMW</a></li>
        <li><a href="#">Dacia</a></li>
        <li><a href="#">Hyundai</a></li>
        <li><a href="#">Lexus</a></li>
    </ul>
</div>

CSS

#sub-nav ul li {
    float: none ;
    display: block ; 
}

Sub nav hidden in horizontal menu with overflow auto

need to set float:left;width:100% to the .wrapper too, because all the elements inside have float and so , the .wrapper needs to have the height of it's content and also set overflow:visible instead of auto

body {    background: #fff;}
div.wrapper {    background: #2e2e2e;    min-height: 10px;    overflow: visible;    float:left;    width:100%;}
div.wrapper .info {float: right;}
div.wrapper .logo {    float: left;    margin-right: 2em;    min-height: 10px;}
ul {    list-style-type: none;    margin: 0;    padding: 10px 0;    float: left;}ul li ul {    list-style-type: none;    margin: 0;    padding: 10px 0;
}
li {    display: inline;    padding: 10px 0;    position: relative;}
li a {    color: white;    text-align: center;    padding: 10px 16px;    text-decoration: none;}
li a:hover {    background-color: green;}.dropdown-content {    display: none;    position: absolute;    background-color: #f9f9f9;    min-width: 160px;    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);    top: 100%;    left: 0;}
.dropdown-content a {    color: black;    padding: 12px 16px;    text-decoration: none;    display: block;    text-align: left;}
.dropdown-content a:hover {background-color: #f1f1f1}
ul li:hover .dropdown-content {    display: block;}
h3 {  clear: both; }}

<div class="wrapper"><p class="logo">logo</p><ul>  <li><a class="active" href="#home">Home</a></li>  <li><a href="#news">News</a></li>  <li>    <a href="#">Dropdown</a>    <ul class="dropdown-content">      <li><a href="#">Link 1</a></li>      <li><a href="#">Link 2</a></li>      <li><a href="#">Link 3</a></li>    </ul>  </li></ul><div class="info"><a href="a">Test</a></div></div><h3>Dropdown Menu inside a Navigation Bar</h3><p>Hover over the "Dropdown" link to see the dropdown menu.</p>

IE7 Subnav, two positioning issues

The thing is that you are incorrectly using positioning.

Try this approach. I have commented few changes.

.row.margin-bottom-15.nav-container { /* Remove overflow:hidden; so your dropdowns will be shown when they overflow. */}

nav .main-nav {
    /* removed position:absolute; */
    display: block;
    width: 100%;
    height: 40px;
    padding: 0;
    margin: 0;
    border: 1px solid #fff;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

nav ul > li {
    position: relative; /* Add position:relative; so you can absolute position dropdowns */
    display: inline-block;
    height: 40px;
    padding: 0;
    margin: 0 0 0 -4px;
}

.main-sub-nav { 
    position: absolute;
    display: none;
    z-index: 1;
    width: 200px;
    height: auto;
    top: 100%;
    left: 0;
    border: 1px solid #d4d4d4;
    background: #f6f6f6;
}

nav ul > li:hover > .main-sub-nav { 
    display: block;
}

nav ul li .main-sub-nav li {
    position: relative;
    height: 40px;
    display: block;
    padding: 0;
    margin: 0;
    border-top: 1px solid #fff;
    border-right: none;
    border-bottom: 1px solid #f2f2f2;
    border-left: 1px solid #fff;
}

Let me know if it helped.

Horizontal SubMenu

Please find the updated code below, hope it will resolve your issue. let me know any further problem you face.

#nav{ margin: 0 ; padding: 0; position:fixed; width:100%; background:#e7e7e7}#nav li { list-style: none; display: inline-block; float:left}#nav li a{ padding:10px 20px; display: inline-block; text-decoration: none; color: #F2583E ; font-family: 'Helvetica Neue'; font-size:1.25em; background:#e7e7e7;}#nav li a:hover{background:#bababa;}/*SubMenu*/#nav li:hover ul{display:block;position:absolute; top:43px; width:100%; left:0px; background:#bababa;}#nav li ul{ display: none;}#nav li:hover ul li, #nav li:hover ul li a{ display: inline-block; float:left; padding:5px; background:#bababa}#nav li ul li{  _display: inline-block; /* for IE5*/}#nav li ul li a{  width: 150px;}

   <body>               <div class="slide-down-page">  <ul id="nav">    <li><a class="active btn" href="home.html">Bio</a></li>    <li><a href="portfolio.html">Portfolio</a>        <ul>            <li><a href="#">Writing</a>            </li>            <li><a href="#">Illustrations</a></li>            <li><a href="#">Design</a></li>        </ul> 
    </li>    <li><a href="contact.html">Contact</a></li></ul>    </div>        </body>

CSS Horizontal hover navigation disappearing in IE 7

Simply adding a background colour makes it work in IE7:

#sidebar ul.subnav li a {
    background: #fff
}

Live Demo (edit)

If this doesn't work on your actual page, I have one question for you.

What doctype are you using on your page? (show the first lines of your file)

Horizontal CSS Subnav Issues!