Hey there! Sign in to join this conversationNew here? Join for free
    • Thread Starter
    Offline

    0
    ReputationRep:
    I'm new to web design and getting there slowly. I've got my nav menu mad how I've like it and was good enough to my site but for what I'm adding I want to put a drop down menu in on one the links.

    This is the html and css code I've got for the menu so far:
    Html:
    <nav>
    <ul id="top_menu">
    <li><a href="index.html">Home</a> </li> |
    <li><a href="fixtures.html">Fixture & Results</a></li> |
    <li><a href="news.html">News</a></li> |
    <li><a href="players.html">Players</a></li> |
    <li><a href="table.html">Table</a></li>
    </ul>
    </nav>
    CSS:
    #top_menu {
    background:black;
    color:white;
    text-align:center;
    font-weight:bold;
    font-size: 20px;
    word-spacing: 5px;
    border: 1px solid #151515;
    }
    #top_menu a{
    color:white;
    text-decoration:none;
    font-size:20px;
    }
    #top_menu li {
    display:inline-block;
    list-style:none;
    padding: 5px;
    font: bold 14px Consolas;
    }
    #top_menu li a:hover {
    colorFF0000;
    background-color: #FFFFFF;
    text-decoration: none;
    padding:5px;
    border-radius: 5px;
    }
    I want to add this drop down menu to my site:
    <nav>
    <ul id="top_menu">
    <li><a href="index.html">Home</a> </li> |
    <li><a href="fixtures.html">Fixture & Results</a> |
    <ul class="sub1">
    <li>Premier League</li>
    <li>Champions League</li>
    </ul>
    </li>
    <li><a href="news.html">News</a></li> |
    <li><a href="players.html">Players</a></li> |
    <li><a href="table.html">Table</a></li>
    </ul>
    </nav>
    Thats an example if someone could help me with the css with this becuase it just doesnt work with my site!! It messes it all up and puts links at the top and the bottom!!
    Offline

    2
    ReputationRep:
    (Original post by Gwa 91)
    [...]
    Try putting your code inside [code][/code] tags - this will allow indents to actually display and make your code easier to read.
    E.g.
    Code:
    this
       is
            an
    example
    Offline

    0
    ReputationRep:
    Also if possible link to an online version of this code so that people can see the error for themselves.
 
 
 
  • See more of what you like on The Student Room

    You can personalise what you see on TSR. Tell us a little about yourself to get started.

  • Poll
    What's your favourite Christmas sweets?
    Useful resources
  • See more of what you like on The Student Room

    You can personalise what you see on TSR. Tell us a little about yourself to get started.

  • The Student Room, Get Revising and Marked by Teachers are trading names of The Student Room Group Ltd.

    Register Number: 04666380 (England and Wales), VAT No. 806 8067 22 Registered Office: International House, Queens Road, Brighton, BN1 3XE

    Quick reply
    Reputation gems: You get these gems as you gain rep from other members for making good contributions and giving helpful advice.