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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cannot stop float setting on dropdown menu and text is not visible.

    I am currently writing my first website and have come upon what should be a seemingly trivial problem. I have added a drop down menu but when the menu appears on hover it follows the 'float' to the left layout even when I insert float:none. Also the text which should be visible on each button is invisible. The href links do work though. My page is not live yet therefore I cannot include a link here although I have included both the relevant css and html below. I hope someone can help...
    Code:
    <ul class="menu">
    <li class="home"><a href="index.html" title="home page">home page</a></li>
    <li class="linem"></li>
    <li class="about"><a href="contentpage.html" title="about">about us</a>
    <ul class="developments">
    <li><a href="contentpage_banus.html">Las Mimosas</a></li>
    <li><a href="contentpage_chateau.html">Chateau De La Cazine</a></li>
    <li><a href="contentpage_halcyon.html">Halcyon Hills</a></li>
    <li><a href="contentpage_terrazas.html">Las Terrazas</a></li>
    <li><a href="contentpage_mar menor.html">Mar Menor</a></li>
    <li><a href="contentpage_Los_Monteros.html">Pueblo Los Monteros</a></li>
    <li><a href="contentpage_Roda Golf.html">Roda Golf</a></li>
    <li><a href="contentpage_Samara.html">Samara</a></li>
    <li><a href="contentpage_Romano.html">Valle Romano</a></li>
    <li><a href="contentpage_Julia.html">Villa Julia</a></li>
    </ul></li>
    Code:
    #Banusheader ul.menu{
    	position:absolute;
    	top:316px;
    	left:0;
    	width:735px
    }
    #Banusheader ul.menu li{float:left; height:40px;}
    #Banusheader ul.menu li a{height:40px;  display:block; text-indent:-20000px; }
    #Banusheader ul.menu li a:hover{height:40px; }
    
    #Banusheader ul.menu li.home a{ width:117px; background:url(../images/btn_1.gif) 0 0 no-repeat; }
    #Banusheader ul.menu li.home a:hover{ width:117px; background:url(../images/btn_1_over.gif) 0 0 no-repeat;}
    
    #Banusheader ul.menu li.about a{ width:109px; background:url(../images/btn_2.gif) 0 0 no-repeat; }
    /*#Banusheader ul.menu li.about a:hover{ width:109px; background:url(../images/btn_2_over.gif) 0 0 no-repeat;}*/
    
    /* New Code */
    #Banusheader li.about ul { display:none;}
    
    #banus_top{z-index:50; position:relative; }
    
    #Banusheader li:hover ul {
      display: block;
      position:absolute;
      z-index: 100;
      text-indent:-20000;
    }
    
    
    #Banusheader ul.menu li.about ul li a{background:url(../images/dropdown_button.png) 0 0 no-repeat; position:relative; }
    
    #Banusheader ul.menu li.about a:hover ul li a{display: block; position: relative; }

  • #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
    Your code is incomplete. Please post the complete HTML+CSS
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    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
    •