0

HI guys hope your all well. I'm in the final stages of getting my website created.

I wanted a simple HTML/CSS dropdown menu I have found this, from this website Click Here

I have followed it to the letter

This is my code so far (HTML code)

<html>
    <head>
        <title>Nav</title>
       </head>
     <body>
        <nav>
    <ul>
        <li><a href="index.php">Home</a></li>
        <li><a href="historyofweb.php">History of the Website </a></li>

        <li><a href="research_into_dis.php">Information About Dysaculia</a>
            <ul>
                <li><a href="what_is_dyscaculia.php">What is Dyscaculia?</a>
                <li><a href="causes_of_dyscaculia.php">Underlying causes of Dyscaculia</a>
                <li><a href="dyscaculia_neglected.php">Why has Dyscaculia been neglected?</a>
                <li><a href="other_names_for_dyscaculia.php">By what names are Dyscaculia are reconfigured by the public?</a>
                <li><a href="warning_signs.php">What are the warning signs of Dyscaculia?</a>
                <li><a href="identifying_dis.php">Identifying Dyscaculia</a>
                <li><a href="gove_definition.php">How does the UK Government and DfES class Dyscaculia as?</a>
            </ul>
        </li>
       <li><a href="questionniare_analysis.php">Results of Questionniares that were given out to help develope this website</a>
            <ul>
                <li><a href="onlinetests.php">Do Online Tests Help you</a></li>
                <li><a href="maths_topic.php">Maths Topic</a></li>
                <li><a href="How_ would_ you_ like_ to_ access_ a_ new_ piece _of_ Mathematical _software.php">How would you like to access a new Peice of new software?</a>
                <li><a href="interact_with_software.php">Do you think its important to interact with a peice of software/a>
                <li><a href="useful_of_new_software.php">Would you find it useful with the devekioment of a new peice of maths software?</a>
                <li><a href="use_of_other_software.php">Have you ever had the use of any Mathematical software</a>
                <li><a href="when_learnning.php">When Learning how do you prefer to learn?</a>
                <li><a href="bbcbitesize.php">What Features of the BBC Bitesize website do you find useful?</a>
                </li>
            </ul>
        </li>
        <li><a href="fractions_intro.php">Fractions Introduction</a>
            <ul>
                <li><a href="fractions_adding.php">Fractions:Adding</a></li>
                <li><a href="fractions_subtracting.php">Fractions:Subtracting</a></li>
                <li><a href="fractions_multiplication.php">Fractions:Multiplication</a></li>
                <li><a href="division_fractions.php">Fractions:Fractions</a></li>
            </ul>
        </li>
        </li>
        <li><a href="start.php">End of Module Quiz</a></li>
    </ul>
        <li><a href="profile.php">Personal Profile</a>
            <ul>
                <li><a href="changepassword.php">Change Password</a></li>
                <li><a href="update.php">Update Details</a></li>
            </ul>
        </li>
        <li><a href="#">Logout</a></li>
            </ul>
                </nav>
    </body>
   </html>

This is the CSS code that I'm trying to put into my website CSS code

av ul ul {
    background: #5f6975; border-radius: 0px; padding: 0;
    position: absolute; top: 100%;
}
    nav ul ul li {
        float: none; 
        border-top: 1px solid #6b727c;
        border-bottom: 1px solid #575f6a;
        position: relative;
    }
        nav ul ul li a {
            padding: 15px 40px;
            color: #fff;
        }   
            nav ul ul li a:hover {
                background: #4b545f;
            }
            nav ul ul ul {
    position: absolute; left: 100%; top:0;
}

This is the CSS code I have for the website, do i need to replace this or get rid of it? I'm just a little confused about this bit

.wrapper {width: 980px; margin: 0 auto;}
.header:after {content:"";height:0;display:block;visibility:hidden;clear:both;}
.header {background: #ff8400; border-bottom: 5px solid #f16702;}
.header .branding-title {float: left; margin: 0 0 0 12px; font: 0/0 serif; text-shadow: none; color: transparent; width:122px;height:77px;background:url(../img/branding-title.png) 0 14px no-repeat;padding: 14px 0;}
.header .branding-title a {display: block; height: 77px; width: 122px;}
.header .nav {float: right; top: 0; right: 0; margin: 0; position: relative; left: 15px; z-index: 99999999;}
.header .nav li {display: inline-block; margin: 0; list-style: none;}
.header .nav li.cart {margin-left: 64px; border: 0 solid #f16702; border-width: 0 8px;}
.header .nav li a {
    color: white;
    text-decoration: none;
    display: block;
    line-height: 95px;
    padding: 10px 0 0;
    margin: 0 0 0 50px;
    width: 90px;
    text-align: right;
    background: url('../img/nav-sprite.png') no-repeat 0px 105px;
    text-transform: uppercase;
    white-space: nowrap; 
}
.header .nav li.on a {text-decoration: underline;}
.header .nav li a:hover, .header .nav li a:active {color: #FFE200;}
.header .nav li.shirts a {background-position: 0px 0px;}
.header .nav li.contact a {background-position: 0px -105px;}
.header .nav li.cart a {
    width: 122px;
    font-size: 0/95px serif;
    text-shadow: none;
    color: transparent;
    background-position: 16px -216px;
    margin: 0;
}

When I run my index page (this is to make sure its working) all I'm getting is a bulleted list and now how it should look like!

Sorry to be such a pain can anyone give me a hint as to where I'm going wrong

Any help would be much appreicated

Rich

6
Contributors
10
Replies
80
Views
3 Years
Discussion Span
Last Post by chirsty269
0

Was it a mistake when pasting in the CSS that caused you to make the first element 'av' instead of 'nav'?
Also, the CSS code can't be complete because I can't see the nav ul section (which there needs to be), the first element in your posted CSS is nav ul ul.
And, this must be a mistake, but I can't even see the <link> element in your head section so where are you even linking to the CSS?

I got a CSS drop menu working, from the site you linked to, in about 30 secs. It really is a matter of copy/paste, change the links as you need to. So I think one of the errors you've made above is causing the issue.

0

its work like a charm, just copied the code from site

 nav {
        margin: 100px auto;
        text-align: center;
    }

    nav ul ul {
        display: none;
    }

    nav ul li:hover > ul {
        display: block;
    }


    nav ul {
        background: #efefef;
        background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
        background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
        background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
        box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
        padding: 0 20px;
        border-radius: 10px;
        list-style: none;
        position: relative;
        display: inline-table;
    }
    nav ul:after {
        content: ""; clear: both; display: block;
    }

    nav ul li {
        float: left;
    }
    nav ul li:hover {
        background: #4b545f;
        background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
        background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
        background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
    }
    nav ul li:hover a {
        color: #fff;
    }

    nav ul li a {
        display: block; padding: 25px 40px;
        color: #757575; text-decoration: none;
    }


    nav ul ul {
        background: #5f6975; border-radius: 0px; padding: 0;
        position: absolute; top: 100%;
    }
    nav ul ul li {
        float: none;
        border-top: 1px solid #6b727c;
        border-bottom: 1px solid #575f6a; position: relative;
    }
    nav ul ul li a {
        padding: 15px 40px;
        color: #fff;
    }
    nav ul ul li a:hover {
        background: #4b545f;
    }

    nav ul ul ul {
        position: absolute; left: 100%; top:0;
    }

your html code is messed up you have unclosed <li> and unclosed <a> I fixed for you

<nav>
    <ul>
        <li><a href="index.php">Home</a></li>
        <li><a href="historyofweb.php">History of the Website </a></li>

        <li><a href="research_into_dis.php">Information About Dysaculia</a>
            <ul>
                <li><a href="what_is_dyscaculia.php">What is Dyscaculia?</a></li>
                <li><a href="causes_of_dyscaculia.php">Underlying causes of Dyscaculia</a></li>
                <li><a href="dyscaculia_neglected.php">Why has Dyscaculia been neglected?</a></li>
                <li><a href="other_names_for_dyscaculia.php">By what names are Dyscaculia are reconfigured by the public?</a></li>
                <li><a href="warning_signs.php">What are the warning signs of Dyscaculia?</a></li>
                <li><a href="identifying_dis.php">Identifying Dyscaculia</a></li>
                <li><a href="gove_definition.php">How does the UK Government and DfES class Dyscaculia as?</a></li>
            </ul>
        </li>
        <li><a href="questionniare_analysis.php">Results of Questionniares that were given out to help develope this website</a>
            <ul>
                <li><a href="onlinetests.php">Do Online Tests Help you</a></li>
                <li><a href="maths_topic.php">Maths Topic</a></li>
                <li><a href="How_ would_ you_ like_ to_ access_ a_ new_ piece _of_ Mathematical _software.php">How would you like to access a new Peice of new software?</a></li>
                <li><a href="interact_with_software.php">Do you think its important to interact with a peice of software</a></li>
                    <li><a href="useful_of_new_software.php">Would you find it useful with the devekioment of a new peice of maths software?</a></li>
                    <li><a href="use_of_other_software.php">Have you ever had the use of any Mathematical software</a></li>
                    <li><a href="when_learnning.php">When Learning how do you prefer to learn?</a></li>
                    <li><a href="bbcbitesize.php">What Features of the BBC Bitesize website do you find useful?</a>
                    </li>
            </ul>
        </li>
        <li><a href="fractions_intro.php">Fractions Introduction</a>
            <ul>
                <li><a href="fractions_adding.php">Fractions:Adding</a></li>
                <li><a href="fractions_subtracting.php">Fractions:Subtracting</a></li>
                <li><a href="fractions_multiplication.php">Fractions:Multiplication</a></li>
                <li><a href="division_fractions.php">Fractions:Fractions</a></li>
            </ul>
        </li>
        <li><a href="start.php">End of Module Quiz</a></li>
    <li><a href="profile.php">Personal Profile</a>
        <ul>
            <li><a href="changepassword.php">Change Password</a></li>
            <li><a href="update.php">Update Details</a></li>
        </ul>
    </li>
    <li><a href="#">Logout</a></li>
    </ul>
</nav>

Edited by OsaMasw

0

messed up on the copy pasting lol
html and css is better hand coded its easy as abc
u also learn faster

0

hey guys thanks for all the info and replays. I found another website with a much better example from here, Click Here The nav is working fine, showing on the site as it should. But there is one problem, when I try and click on one of the drop down menu it wont let me and I just want to know where I'm going wrong!

Here is the css code

<style type="text/css">
  ul {list-style: none;padding: 0px;margin: 0px;}

  ul li {display: block;position: relative;float: left;border:1px solid #000}
  li ul {display: none;}
  ul li a {display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none;
           white-space: nowrap;color: #fff;}
  ul li a:hover {background: #f00;}
  li:hover ul {display: block; position: absolute;}
  li:hover li {float: none;}
  li:hover a {background: #f00;}
  li:hover li a:hover {background: #000;}
  #drop-nav li ul li {border-top: 0px;}
</style>
0

hey when i try and click on a drop down links, it wont let me click on it at all. between the nav bar and the drop down list there is a gap and it wont let me navigate to the page i want to click on. It worked fine for a few days. I just dont know what I'm doing wrong

here is the headder code

<html>
    <head>
        <title>Nav</title>
       </head>
     <body>
        <nav>
    <ul>
        <li><a href="index.php">Home</a></li>
        <li><a href="historyofweb.php">History of the Website </a></li>

        <li><a href="research_into_dis.php">Information About Dysaculia</a>
            <ul>
                <li><a href="what_is_dyscaculia.php">What is Dyscaculia?</a>
                <li><a href="causes_of_dyscaculia.php">Underlying causes of Dyscaculia</a>
                <li><a href="dyscaculia_neglected.php">Why has Dyscaculia been neglected?</a>
                <li><a href="other_names_for_dyscaculia.php">By what names are Dyscaculia are reconfigured by the public?</a>
                <li><a href="warning_signs.php">What are the warning signs of Dyscaculia?</a>
                <li><a href="identifying_dis.php">Identifying Dyscaculia</a>
                <li><a href="gove_definition.php">How does the UK Government and DfES class Dyscaculia as?</a>
            </ul>
        </li>
       <li><a href="questionniare_analysis.php">Results of Questionniares</a>
            <ul>
                <li><a href="onlinetests.php">Do Online Tests Help you</a></li>
                <li><a href="maths_topic.php">Maths Topic</a></li>
                <li><a href="How_ would_ you_ like_ to_ access_ a_ new_ piece _of_ Mathematical _software.php"> would you like to access a new software?</a>
                <li><a href="interact_with_software.php">Do you think its important to interact with a peice of software/a>
                <li><a href="useful_of_new_software.php">Would you find it useful with the devekioment of a new peice of maths software?</a>
                <li><a href="use_of_other_software.php">Have you ever had the use of any Mathematical software</a>
                <li><a href="when_learnning.php">When Learning how do you prefer to learn?</a>
                <li><a href="bbcbitesize.php">What Features of the BBC Bitesize website do you find useful?</a>
                </li>
            </ul>
        </li>
        <li><a href="fractions_intro.php">Fractions Introduction</a>
            <ul>
                <li><a href="fractions_adding.php">Fractions:Adding</a></li>
                <li><a href="fractions_subtracting.php">Fractions:Subtracting</a></li>
                <li><a href="fractions_multiplication.php">Fractions:Multiplication</a></li>
                <li><a href="division_fractions.php">Fractions:Fractions</a></li>
            </ul>
        </li>
        </li>
        <li><a href="start.php">End of Module Quiz</a></li>
    </ul>
        <li><a href="profile.php">Personal Profile</a>
            <ul>
                <li><a href="changepassword.php">Change Password</a></li>
                <li><a href="update.php">Update Details</a></li>
            </ul>
        </li>
        <li><a href="#">Logout</a></li>
            </ul>
                </nav>
    </body>
   </html>
-1
The drop down menu itself is an unordered list, which you hide within a div that can be triggered to make the UL appear when the user hovers over the div. Here’s how Webstuffshare sets up the overall design of the menu:

.drop-menu {
    display: block;
    margin-right: auto;
    margin-left: auto;
    text-align: left;
    padding: 10px 10px;
    font-size: 22px;
    height: 25px;
    max-height: 25px;
    width: 400px;
    background: #fff;
    cursor: pointer;
    border: 1px solid #f6f0e4;
}

This creates a fixed height for the menu along with setting definitions for the padding, font, border, cursor and so on. To simulate the look and feel of a menu, you’ll want to manipulate the look of the cursor. You can do that with the pseudo-class :hover as such:

.drop-menu:hover .sub-menu {
    display: inline-block;
}

For the menu, you’ll want to mimic some of the attributes that were defined earlier. Plus, you can add in some shadow effects to enhance the aesthetics.

.sub-menu {
    display: none;
    width: 400px;
    background: #fff;
    padding: 10px 10px;
    margin-left: -11px;
    margin-top: 10px;
    border: 1px solid #fff;
    -webkit-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
    -moz-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
    box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
}

The shadow affect is rather advanced in that it uses a “box-shadow property, set x-axis to 0px, y-axis to 13px, blur to 25px and shadow color to black with 20% alpha. This will make the shadow [sic] has a gradient effect.”

As mentioned at the start of the article, the drop down menu is itself a list, which also must be defined:

.sub-menu li {
        list-style-type: none;
        display: block;
        border-bottom: 1px dotted #eaeaea;
        font-size: 19px;
        height: 22px;
        padding: 8px 0;
    }

The demo is actually set up very nice, which is a reason why HTMLgoodies is showcasing this code, in that it allows for small icons next to the drop down items. It is a popular convention in web design to focus on using images instead of text to convey meaning. Here is how that is done:

.sub-menu li img {
            margin-right: .5em;
        }

This code is also impressive in that it adds minor details like a dotted border between each item:

.sub-menu li:hover {
        border-bottom: 1px dotted #bababa;
    }

The cherry on this sundae is an animated plus symbol. This symbol conveys to the visitor that this is indeed a drop down menu and begs to be clicked on or at least hovered over. The plus symbol rotates when the visitor hovers over the menu.

.plus {
    display: inline-block;
    -webkit-transition: .3s ease-in-out;
      -moz-transition: .3s ease-in-out;
      -o-transition: .3s ease-in-out;
}

.drop-menu:hover .plus {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}
This topic has been dead for over six months. 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.