12 Replies Latest reply: May 17, 2013 2:46 PM by edg13 RSS

    CSS flyout Menu Help!

    John Delamotte

      I'm having a problem with my CSS flyout menu. Everything works great, but the links only work if I right click and open in new window. Any ideas?

      PS: I don't have overflow hidden

        • 1. Re: CSS flyout Menu Help!
          sudarshan.t Community Member

          Post a link to your active page on the web. Also, let us know which browser you're using so we could test it here.

          • 2. Re: CSS flyout Menu Help!
            John Delamotte Community Member

            I don't have an active page yet, but I was checking it in Firefox, Chrome, and IE. I'm building the site still, but ran into a problem with the menu. I'll post my HTML and CSS below. I hope that would help. Thank you for your help.

             

             

            .menu {

                font-family:Arial, Helvetica, sans-serif;

                width:230px;

                height: 500px;

                position:relative;

                font-size:16px;

                line-height:30px;

                text-align: left;

                margin-left: 43px;

                margin-top: 0px;

                margin-right: 0px;

                margin-bottom: 0px;

            }

            .menu a    {

                padding-left: 10px;

            }

            .menu ul li a, .menu ul li a:visited {

                display:block;

                text-decoration: none;

                color:#fff;

                width:230px;

                height:30px;

                border:solid #fff;

                border-width:1px 2px 1px 2px;

                background:#63614e;

            }

            .menu ul {

                padding:0;

                margin:0;

                list-style-type: none;

            }

            .menu ul li {

                float:left;

                margin-right:1px;

                position:relative;

            }

            .menu ul li ul {

            display: none;

            }

             

            /* specific to non IE browsers */

            .menu ul li:hover a {

                color:#a9a487;

            }

            .menu ul li:hover ul {

            display:block;

            position:absolute;

            top:0;

            left:240px;

            }

            .menu ul li:hover ul li a.hide {

            background:#000;

            color:#F06;

            }

            .menu ul li:hover ul li:hover a.hide {

            width:330px;

             

            }

            .menu ul li:hover ul li ul {

            display: none;

             

            }

            .menu ul li:hover ul li a {

            display:block;

            color: #FFF;

            width: 280px;

            }

            .menu ul li:hover ul li a:hover {

                color:#a9a487;

            }

            .menu ul li:hover ul li:hover ul {

            display:block;

            position:absolute;

            left:290px;

            top:0;

            }

            .menu ul li:hover ul li:hover ul li a {

            display:block;

            width: 180px;

            }

            .menu ul li:hover ul li:hover ul li a:hover {

            color:#a9a487;

            }

             

             

             

             

             

            <div class="menu">

                                            <ul>

                                                    <li><a class="hide" href="./index.html">4th Grade Curriculum</a>

                                                            <ul>

                                                                    <li><a href="./index.html" target="_self">Geology, Geography, and Climate</a>

                                                                            <ul>

                                                                                    <li><a href="">Teacher Resource Guide</a></li>

                                                                                    <li><a href="./order.html">Order</a></li>

                                                                                    <li><a href="">Content Standards</a></li>

                                                                            </ul>

                                                                    </li>

                                                                    <li><a href="">American Indians of North Dakota</a>

                                                                            <ul>

                                                                                    <li><a href="">Teacher Resource Guide</a></li>

                                                                                    <li><a href="./order.html">Order</a></li>

                                                                                    <li><a href="">Content Standards</a></li>

                                                                            </ul>

                                                                    </li>

                                                                    <li><a href="">Citizenship</a>

                                                                            <ul>

                                                                                    <li><a href="">Teacher Resource Guide</a></li>

                                                                                    <li><a href="">Order</a></li>

                                                                                    <li><a href="">Content Standards</a></li>

                                                                            </ul>

                                                                    </li>

                                                                    <li><a href="">Frontier Era of North Dakota</a>

                                                                            <ul>

                                                                                    <li><a href="">Teacher Resource Guide</a></li>

                                                                                    <li><a href="">Order</a></li>

                                                                                    <li><a href="">Content Standards</a></li>

                                                                            </ul>

                                                                    </li>

                                                                    <li><a href="">Early Settlement of North Dakota</a>

                                                                            <ul>

                                                                                    <li><a href="">Teacher Resource Guide</a></li>

                                                                                    <li><a href="">Order</a></li>

                                                                                    <li><a href="">Content Standards</a></li>

                                                                            </ul>

                                                                    </li>

                                                                    <li><a href="">North Dakota Argriculture</a>

                                                                            <ul>

                                                                                    <li><a href="">Teacher Resource Guide</a></li>

                                                                                    <li><a href="">Order</a></li>

                                                                                    <li><a href="">Content Standards</a></li>

                                                                            </ul>

                                                                    </li>

                                                            </ul>

                                                    </li>

                                                    <li><a class="hide" href="">8th Grade Curriculum</a>

                                                            <ul>

                                                                    <li><a href="">North Dakota Legendary</a>

                                                                            <ul>

                                                                                    <li><a href="">Teacher Resource Guide</a></li>

                                                                                    <li><a href="">Order</a></li>

                                                                                    <li><a href="">Content Standards</a></li>

                                                                            </ul>

                                                                    </li>

                                                                    <li><a href="">ND: People Living on the Land</a>

                                                                            <ul>

                                                                                <li><a href="">New! Coming Soon</a></li>

                                                                            </ul>

                                                                    </li>

                                                            </ul>

                                                    </li>

                                                    <li><a class="hide" href="./index.html">High School Curriculum</a>

                                                            <ul>

                                                                    <li><a href="">North Dakota History</a>

                                                                            <ul>

                                                                                    <li><a href="">Teacher Resource Guide</a></li>

                                                                                    <li><a href="">Order</a></li>

                                                                                    <li><a href="">Content Standards</a></li>

                                                                            </ul>

                                                                    </li>

                                                                    <li><a href="">ND History: Document Sets</a></li>

                                                                    <li><a href="">Governing North Dakota, 2011-2013</a>

                                                                            <ul>

                                                                                    <li><a href="">Teacher Resource Guide</a></li>

                                                                                    <li><a href="">Order</a></li>

                                                                                    <li><a href="">Content Standards</a></li>

                                                                            </ul>

                                                                    </li>

                                                                    <li><a href="">North Dakota Indian Studies</a></li>

                                                                    <li><a href="">Davies Curriculum</a></li>

                                                            </ul>

                                                    </li>

                                                    <li><a class="hide" href="">Habitats of North Dakota</a>

                                                            <ul>

                                                                    <li><a href="">Wetlands</a></li>

                                                                    <li><a href="">Praire</a></li>

                                                                    <li><a href="">Badlands</a></li>

                                                                    <li><a href="">Woodlands</a></li>

                                                                    <li><a href="">Riparian Areas</a></li>

                                                            </ul>

                                                    </li>

                                                    <li><a class="hide" href="">North Dakota Indian Studies</a>

                                                            <ul>

                                                                    <li><a href="">The Mandan, Hidatsa, and Sahnish</a></li>

                                                                    <li><a href="">The Turtle Mountain Band of Chippewa</a></li>

                                                                    <li><a href="">The Standing Rock Oyate</a></li>

                                                                    <li><a href="">The Mni Wakan Oyate</a></li>

                                                            </ul>

                                                    </li>

                                                    <li><a class="hide" href="">Civil War Era in North Dakota</a>

                                                            <ul>

                                                                    <li><a href="">The Civil War Era in Dakota Territory</a></li>

                                                                    <li><a href="">Leaders in Dakota Territory</a></li>

                                                                    <li><a href="">Commemorating the Civil War in ND</a></li>

                                                            </ul>

                                                    </li>

                                                    <li><a class="hide" href="">USS North Dakota</a>

                                                            <ul>

                                                                    <li><a href="">4th Grade Lesson and Activities</a></li>

                                                                    <li><a href="">8th Grade Lesson and Activities</a></li>

                                                                    <li><a href="">High School Lesson and Activities</a></li>

                                                            </ul>

                                                    </li>

                                                    <li><a class="hide" href="">Teacher Resources</a>

                                                            <ul>

                                                                    <li><a href="">National History Day of North Dakota</a></li>

                                                                    <li><a href="">Teacher of the Year Award</a></li>

                                                                    <li><a href="">Teaching with Primary Resources</a></li>

                                                            </ul>

                                                    </li>

                                                    <li><a class="hide" href="">Newsletters</a>

                                                            <ul>

                                                                    <li><a href="">Spring 2012</a></li>

                                                                    <li><a href="">Fall 2011</a></li>

                                                                    <li><a href="">Spring 2011</a></li>

                                                                    <li><a href="">Fall 2010</a></li>

                                                            </ul>

                                                    </li>

                                                    <li><a class="hide" href="">Affiliated Websites</a>

                                                            <ul>

                                                                    <li><a href="">Digital Horizons Online</a></li>

                                                                    <li><a href="">Theodore Roosevelt Center</a></li>

                                                                    <li><a href="">North Dakota Humanities</a></li>

                                                                    <li><a href="">State Historical Society of North Dakota</a></li>

                                                            </ul>

                                                    </li>

                                            </ul>

                                    </div>

            • 3. Re: CSS flyout Menu Help!
              Nancy O. MVP

              Maybe this tutorial will help you.

              http://alt-web.com/DEMOS/CSS-Horiz-menu-3.shtml

               

               

              Nancy O.

              Alt-Web Design & Publishing

              Web | Graphics | Print | Media  Specialists 

              http://alt-web.com/

              • 4. Re: CSS flyout Menu Help!
                John Delamotte Community Member

                Thanks Nancy,

                The site is useful, but I believe I did that. The problem is that the links don't work right. They only work when you right click, open in new window or tab. What I am I doing wrong?

                • 5. Re: CSS flyout Menu Help!
                  Nancy O. MVP

                  What's the URL so we can see for ourselves what happens.

                   

                  Menu won't work if you don't add pages to your links. <a href="#"> is a null link that goes nowhere.

                  Also, get rid of target="_self" you don't need it.

                   

                   

                  Nancy O.

                  • 6. Re: CSS flyout Menu Help!
                    John Delamotte Community Member

                    I was using ./index.html, ./about.html and ./contact.html. All pages I created within the website (All pages are at the same level in the same folder).

                    • 7. Re: CSS flyout Menu Help!
                      Nancy O. MVP

                      John Delamotte wrote:

                       

                      The problem is that the links don't work right. They only work when you right click, open in new window or tab. What I am I doing wrong?

                       

                      No way to answer this without seeing your page.  Please post a URL.

                       

                       

                      Thanks,

                       

                       

                      Nancy O.

                      • 8. Re: CSS flyout Menu Help!
                        edg13

                        John,

                         

                        I am having this same issue. How did you fix this!

                         

                        Thanks in advance.

                         

                        Enric

                        • 9. Re: CSS flyout Menu Help!
                          Nancy O. MVP

                          What is the URL to your problem page?  Answers to questions like these are contained in your code.

                           

                           

                          Nancy O.

                          • 10. Re: CSS flyout Menu Help!
                            edg13 Community Member

                            Hey,

                             

                            fluentroad.com

                             

                            You will have to create a free trial. Verify via email and click on the help button when you are logged in!

                             

                            Much appreciated.

                            • 11. Re: CSS flyout Menu Help!
                              Nancy O. MVP

                              You've got to make it simple for us to see your problem page with one click to your site.  The best way to do that is upload your problem page to a TEST folder on your server.  Post the relevant URL here.  When your question has been answered, delete the TEST page & folder from your server. 

                               

                              If your home page is any indication of the rest of your site, you have a significant number of code errors that need attention.

                              http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Ffluentroad.com%2F

                               

                              Most linking issues are caused by simple code errors or bad paths from pages in sub-folders to the site root.  Also, Apache/Linux servers, are cAsE sEnSiTiVe.   So a file named AboutUs.html is not the same as aboutus.html

                               

                               

                              Nancy O.

                              • 12. Re: CSS flyout Menu Help!
                                edg13 Community Member

                                Hello Nancy,

                                 

                                So I was just trying to facilitate the fix for our developers that are busy enough already. Thanks for pointing out those errors on the home page.

                                 

                                At this point I will just redirect one of the developers to handle this. I will go ahead and check for the case sensitive issue.

                                 

                                Thanks again.

                                 

                                Enric