Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jul 2013
    Location
    USA
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to make a dropdown menue in css?

    I am trying to get a drop down menu of all the cities and towns in each state when the mouse is passed over a particular state and I cant get it right! 0:

    this is what my site looks like right now:
    http://i1110.photobucket.com/albums/...ps130fc724.png

    and this is an example of what would happen if the mouse was passed over Alabama:
    http://i1110.photobucket.com/albums/...psdfaaa9e7.png

    this is what my code look like right now in html:
    http://i1110.photobucket.com/albums/...ps20a6e4e8.png

    and this is what it looks like right now in css:
    http://i1110.photobucket.com/albums/...ps27f08b9d.png

  • #2
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    8
    Thanks
    0
    Thanked 1 Time in 1 Post
    Can't help like that.
    Paste your code somewhere like gist.github.com or pastebin.com

  • #3
    New Coder
    Join Date
    Jun 2013
    Posts
    34
    Thanks
    1
    Thanked 2 Times in 2 Posts
    It was very difficult to solve your issue with data you provided; however, I have made a try to help you,
    Code:
    <ul id="states">
    <li><a href="">Albama</a>
        <ul>
              <li><a href="">auburn</a></li>
              <li><a href="">auburn1</a></li>
         </ul>
    </li>
    <li><a href="">Alaska</a>
         <ul>
               <li><a href="">Alaska1</a></li>
               <li><a href="">Alaska2</a></li>
         </ul>
    </li>
    </ul>


    .css
    Code:
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    ul li {
        position: relative;
        float: left;
    }
    li ul {
        display: none;
    }
    ul li a {
        text-decoration: none;
        color: #ffffff;
        margin-left: 1px;
    }
    ul li a:hover {
    color: #0000FF;
    }
    li:hover ul {
        display: block;
        position: absolute;
    }
    li:hover li {
        float: none;
        font-size: 11px;
    }
    li:hover a { color: #00FFFF; }
    li:hover li a:hover {
        color: #FFFFFF;
    }
    Last edited by VIPStephan; 07-09-2013 at 01:00 PM. Reason: added code BB tags

  • #4
    New to the CF scene
    Join Date
    Jul 2013
    Location
    USA
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i tried fixing it but it didnt turn out how i wanted but this is what i have so far here is all my current code in paste bin:

    http://pastebin.com/RxBD5VJ9

    please help me i cant seem to get this right ://

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,084
    Thanks
    23
    Thanked 593 Times in 592 Posts
    mooninspector, This is maybe the fourth time you have posted this same question and the first time I have seen your code. You might want to do something easier as your first program. A fast look at the code shows your missing the beginning < on the doctype. A doctype of html1 and using <footer> tags, a html5 thing. Using some obsolete attributes. ordered lists in a table. (I do not like tables in layout so I got rid of em)

    You want to show cities for the states. I remember seeing three/four pages of cities for some states in an atlas. I looked at alaska(cause, I thought, there couldn't be many there), but look at this page: http://www.theus50.com/alaska/cities.php

    What I suggest is using ajax. A click on a state would change the page, but have a return on that page to get back to your main page.

    Here is coding for the main page with css and a link in ALASKA to the javascript. Put your JS there instead of the alert. Your CSS is small so it's not in a separate file. You will need to take time and position the state columns(divs) the way you want them.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//Ddiv XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1-strict.ddiv">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>The States</title>
    <style type="text/css">
    #header, #footer{
    width:99.95%;
    height:75px;
    background-color:#81DAF5;
    color: blue;
    padding-top: 15px;
    text-align:center;
    }
    #header{
    	margin-bottom:20px;
    }
    #footer{
    	margin-top:20px;
    }
    #container{
    	background-color:gray;
    	padding:10px;
    	overflow: hidden;
    }
    .column{
    	width: 100px;
    	float:left;
    	margin-right: 35px;
    }
    </style>
    </head>
    <body>
    <div id="header" >
       <p><strong>LIST OF STATES</strong></p>
    </div>
    
    <div id="container">
    <div class="column">
     <a href="" onclick="stateShow();">Alabama</a><br />
     <a href="" onclick="stateShow();">Alaska</a><br />
     <a href="" onclick="stateShow();">Arizona</a><br />
     <a href="" onclick="stateShow();">Arkansas</a><br />
     <a href="" onclick="stateShow();">California</a><br />
     <a href="" onclick="stateShow();">Colorado</a><br />
     <a href="" onclick="stateShow();">Connecticut</a><br />
     <a href="" onclick="stateShow();">Delaware</a><br />
     <a href="" onclick="stateShow();">Florida</a><br />
     <a href="" onclick="stateShow();">Georgia</a><br />
     </div><div class="column">
     <a href="" onclick="stateShow();">Hawaii</a><br />
     <a href="" onclick="stateShow();">Idaho</a><br />
     <a href="" onclick="stateShow();">Illinois</a><br />
     <a href="" onclick="stateShow();">Indiana</a><br />
     <a href="" onclick="stateShow();">Iowa</a><br />
     <a href="" onclick="stateShow();">Kansas</a><br />
     <a href="" onclick="stateShow();">Kentucky</a><br />
     <a href="" onclick="stateShow();">Louisiana</a><br />
     <a href="" onclick="stateShow();">Maine</a><br />
     <a href="" onclick="stateShow();">Maryland</a><br />
     </div><div class="column">
     <a href="" onclick="stateShow();">Massachusetts</a><br />
     <a href="" onclick="stateShow();">Michigan</a><br />
     <a href="" onclick="stateShow();">Minnesota</a><br />
     <a href="" onclick="stateShow();">Mississippi</a><br />
     <a href="" onclick="stateShow();">Missouri</a><br />
     <a href="" onclick="stateShow();">Montana</a><br />
     <a href="" onclick="stateShow();">Nebraska</a><br />
     <a href="" onclick="stateShow();">Nevada</a><br />
     <a href="" onclick="stateShow();">New Hampshire</a><br />
     <a href="" onclick="stateShow();">New Jersey</a><br />
     </div><div class="column">
     <a href="" onclick="stateShow();">New Mexico</a><br />
     <a href="" onclick="stateShow();">New York</a><br />
     <a href="" onclick="stateShow();">North Carolina</a><br />
     <a href="" onclick="stateShow();">North Dakota</a><br />
    <a href="" onclick="stateShow();">Ohio</a><br />
     <a href="" onclick="stateShow();">Oklahoma</a><br />
     <a href="" onclick="stateShow();">Oregon</a><br />
     <a href="" onclick="stateShow();">Pennsylvania</a><br />
     <a href="" onclick="stateShow();">Rhode Island</a><br />
     <a href="" onclick="stateShow();">South Carolina</a><br />
     </div><div class="column">
     <a href="" onclick="stateShow();">South Dakota</a><br />
     <a href="" onclick="stateShow();">Tennessee</a><br />
     <a href="" onclick="stateShow();">Texas</a><br />
     <a href="" onclick="stateShow();">Utah</a><br />
     <a href="" onclick="stateShow();">Vermont</a><br />
     <a href="" onclick="stateShow();">Virginia</a><br />
     <a href="" onclick="stateShow();">Washington</a><br />
     <a href="" onclick="stateShow();">West Virginia</a><br />
     <a href="" onclick="stateShow();">Wisconsin</a><br />
     <a href="" onclick="stateShow();">Wyoming</a><br />
    </div>
    </div>
    
    <div id="footer" style="clear: both;">
       <p id="name"><strong>LIST OF STATES</strong></p>
    </div>
    
    <script type="text/javascript">
    function stateShow(){
    	alert("CLICKED");
    }
    </script>
    </body>
    </html>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •