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 3 of 3

Thread: drop-down menu

  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    drop-down menu

    Im trying to implement drop-down menu using html and css. On menu item hover it show drop-down menu as i want. But it has another width at top and down, as you can see at image. Also last menu item is pushed out of "menu panel".

    can someone give me a hand?


    .css
    Code:
    #menu ul {
    	width:1090px;
        height:40px;
        position:absolute;
        top:160px;
      	left:0px;
    	border:1px solid black;
      	opacity:0.6;
    	background-color:#360;
    	list-style-type: none;	
    	margin: auto;
    }
    #menu li{
    	float:left;
    	width:auto;
    }
    #menu ul a {
    	margin-top:8px;
    	margin-left:19px;
    	margin-right:19px;	
    	display: block;
    	line-height: 20px;
    	text-decoration: none;
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-size: 21px;
    	color: black;
    }
    #menu ul a:hover {
    	color: #FFF;
    }
    #menu li ul {
    	display: none;
    	width:90px;
    	 /* Width to help Opera out */
    	background-color: #360;
    }
    #menu li:hover ul {
    	display: block;
    	position: relative;
    	top:0px;
    	left:0px;
    	width:auto;
    	margin: 0;
    	padding: 0; 
    }
    #menu li:hover li {
    	float: none; 
    }
    #menu li:hover li a {
    	background-color: #360;
    	border-bottom: 1px solid #fff;
    	color: #000; 
    }
    #menu li li a:hover {
    	background-color:#2AFF00; 
    }
    .html
    Code:
     <div id="menu">
        	<ul>
        	<li id="Home"><a href="#">Home</a></li>
    		<li id="Kalendar"><a href="#">Kalendár akcií</a></li>
    		<li id="Archiv"><a href="#">Archív hier</a></li>
    		<li id="Uzivatelia"><a href="#">Hráči</a></li>
    		<li id="Teamy"><a href="#">Teamy</a></li>
            <li id="Shopy"><a href="#">PB/Army shopy</a></li>
            <li id="Ihriska"><a href="#">Ihriská</a></li>
            <li id="Forum"><a href="#">Forum</a>
            
            <ul>
    		<li><a href="#">SK FORUM</a></li>
    		<li><a href="#">CZ FORUM</a></li></ul></li>
            
            
            <li id="FAQ"><a href="#">FAQ</a></li>
    		</ul>    
        </div>
    printscreen:
    http://uploading.sk/?v=beznzvzoz.png

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    I'd recommend you to check http://www.htmldog.com/articles/suckerfish/dropdowns/ to see how to easily build a dropdown menu.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Feb 2012
    Location
    Bokaro Steel City, India
    Posts
    21
    Thanks
    14
    Thanked 1 Time in 1 Post
    Try this!
    Code:
    #menu li ul{
    	left: -9999px; /*Better to use instead of 'display: none;' */
    
    	width:90px; /* Width to help Opera out */
    	background-color: #360;
    }


  •  

    Posting Permissions

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